aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

En el trabajo me ha hecho falta mirar como conseguir que las transparencias aplicadas a un elemento se vean bien en todos los navegadores. He estado leyendo sobre el tema y al final encontré una página que nos ofrecía una solución bastante decente y elegante.

Solución

En web el efecto de transparecia u opacidad, está disponible en firefox desde hace mucho tiempo, gracias a la propiedad CSS -moz-opacity podemos asignar un valor a la transparencia que queremos asignar a un elemento en concreto, a Opera parece que tambíen le gusta este método. Pero evidentemente IE no acepta esto, entonces tenemos que recurrir a un filtro que nos genere la transparencia, para ellos usaremos el filtro alpha.

.myfade {
    filter:alpha(opacity=50); /* IE */
    -moz-opacity:0.5; /* Firefox, Opera, ... */
    opacity: 0.5; /* CSS 3*/
}

Explicación

Como estamos acostumbrados, Internet explorer nos hace utilizar hacks para conseguir el mismo efecto que conseguimos con otros navegadores usando atributos estandares. Para ello, usaremos la línea:

  filter:alpha(opacity=50); /* IE */

Con esta línea estamos definiendo la opacidad que va a tener nuestro elemento, introduciendo un valor entre 0 y 100 podremos hacer más o menos opaco nuestro elemento, siendo 100 transparente total y 0 sólido.

Firefox incorporó un atributo no estandar para poder disponer de la opacidad que permitía a IE (mediante su atributo no estandar) disponer de transparencias, por ese motivo añadimos la siguiente línea:

-moz-opacity:0.5; /* Firefox, Opera, ... */

El atributo nos permite tambien elegir la opacidad de nuestro elemento, aunque en este caso el valor irá desde 0 al 1, pasando por los decimales para variar la transparencia. 0 será la opacidad máxima.

La línea más estandar es sin duda la siguiente:

 opacity: 0.5; /* CSS 3*/

Esta línea hace referencia al estandar aprovado para la especificación de CSS3, que empiza ya a estar presente en los navegadores modernos. Esta propiedad tambien requiere un valor de entre 0 y 1 para definir la opacidad de nuestros elementos.