Transparencias con CSS en Blogger

Una de las cosas más significativas en la estética de un blog son los distintos efectos que podemos darle a los objetos, uno de estos es la transparencia. Recuerda que esta guía es sobre CSS, es aplicable bajo cualquier plataforma. Acá especificaré el uso en Blogger ya que es la plataforma en la que trabajo.

Como se puede apreciar en los siguientes ejemplos, el resultado puede llegar a ser excelente.

Ejemplos:

Sin transparencias:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna. Curabitur id nibh auctor tellus adipiscing pharetra. Fusce vel justo non orci semper feugiat. Cras eu leo at purus ultrices tristique.

Con transparencias (Al 80%):

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna. Curabitur id nibh auctor tellus adipiscing pharetra. Fusce vel justo non orci semper feugiat. Cras eu leo at purus ultrices tristique.

Todo está hecho con CSS, sólamente se ha utilizado una imagen para definir un fondo.

¿Cómo usar transparencias en algunos objetos en Blogger?

Para ello debemos conocer el nombre de la sección a la cual le aplicaremos las transparencias, usaremos como ejemplo las entradas:

Sabemos bien que la línea (Selector) que define una entrada es la siguiente:

.post {Atributos CSS}

 Para aplicarle transparencias necesitamos  pegar el siguiente contenido dentro del contenedor de los estilos:

opacity:0.50; /*Transparencias- Código estándar*/
-moz-opacity:0.50; /*Transparencias en Firefox*/
filter:alpha(opacity=′50′); /*Transparencias en IE*/

De tal forma que quede así:

.post {
opacity:0.50; /*Transparencias- Código estándar*/
-moz-opacity:0.50; /*Transparencias en Firefox*/
filter:alpha(opacity=′50′); /*Transparencias en IE*/
otros atributos de la hoja de estilos;
}

La zona CSS de nuestro blog se encuentra arriba de ]]></b:skin>, es ahí donde deberás pegar todo los códigos.

Definiendo el nivel de transparencias:

Como puedes apreciar en el código existen 3 atributos para distintos navegadores, tanto el estándar como el de Firefox están definidos en números decimales, el de Internet Explorer en números enteros, veamos un ejemplo:

Seteando el 40% de transparencias:

• Como los valores de los 2 primeros atributos son en decimales, lo que debemos hacer es hacer el porcentaje considerando el primer decimal, es decir que queden 0.40 (Para definir el 40%), mientras que en el tercer atributo sólamente seteas un valor de 40.

El código deberá quedar así:

opacity:0.40;
-moz-opacity:0.40;
filter:alpha(opacity=′40′);