Fondos semitransparentes en Blogger
Sabemos bien que el valor ''opacity'' en CSS otorga transparencias a algun contenido en específico.
La desventaja de esto es que todo el contenido se mantiene con el mismo nivel de transparencia. Existe una sencilla forma de que sólo los fondos de las clases o ids se mantengan a un nivel de translucidez sin afectar al contenido interno.
Veamos 2 ejemplos con los mismos niveles de transparencias:
Con el valor opacity:
Usando sólo fondos transparentes:
Tal como se puede apreciar en el segundo ejemplo, sólo se aplica un efecto de transparencia al color de fondo.
Para ello necesitas conocer la class o id a la cual le asignarás la opacidad. Utilizaré como ejemplo los posts (Entradas).
La clase que define una entrada corresponde a ''post''. Como es una clase y no un ID con el que se trabaja, la sintaxis CSS es la siguiente:
Recuerda que se puede utilizar para lo que desees, yo lo utilicé en las entradas para tener un ejemplo con el cual trabajar.
La desventaja de esto es que todo el contenido se mantiene con el mismo nivel de transparencia. Existe una sencilla forma de que sólo los fondos de las clases o ids se mantengan a un nivel de translucidez sin afectar al contenido interno.
Veamos 2 ejemplos con los mismos niveles de transparencias:
Con el valor opacity:
El contenido interno se vé con el mismo nivel de transparencia que el contenedor.
Usando sólo fondos transparentes:
El contenido de este contenedor no se vé afectado por la opacidad de este.
Tal como se puede apreciar en el segundo ejemplo, sólo se aplica un efecto de transparencia al color de fondo.
¿Cómo añadir fondos transparentes en Blogger?:
Para ello necesitas conocer la class o id a la cual le asignarás la opacidad. Utilizaré como ejemplo los posts (Entradas).
La clase que define una entrada corresponde a ''post''. Como es una clase y no un ID con el que se trabaja, la sintaxis CSS es la siguiente:
.post {Cuando hayas encontrado el valor .post en tu plantilla procederemos a añadir el color de fondo y el nivel de transparencia de la siguiente forma:
atributos css
}
background-color: rgba(63, 72, 204, 0.5)
Explicación:
- El primer valor (63) corresponde a rojo.
- El segundo valor (72) corresponde a verde.
- El tercer valor (204) corresponde a azul.
- El cuarto valor (0,5) corresponde al porcentaje de transparencia del fondo.
.post {
background-color: rgba(63, 72, 204, 0.5);
otros atributos de las entradas
}
Recuerda que se puede utilizar para lo que desees, yo lo utilicé en las entradas para tener un ejemplo con el cual trabajar.
