Css3: Transparencias


       Css ha incorporado unas funciones de color, rgb y hls, con versiones que incluyen canal alpha o de transparencia. Quien trabaje con hls ya conoce como funciona, y a los demás con rbg tenemos suficiente. Así que me voy a centrar en la función rgba. Su sintaxis es:

rgba (rojo, verde, azul, transparencia)

       Donde rojo, verde y azul son valores entre 0 y 255, siendo el 0 el más oscuro y el 255 el más claro (equivalente a 0 y F respectivamente en notación HTML). Y el valor de transparencia es un valor con decimales entre 0 y 1, siendo 0 totalmente transparente y 1 totalmente opaco.

       Así podemos hacer que el fondo de un div sea amarillo semi-transparente con el siguiente código:

#miDiv{
     background-color: rgba(255,255,0,0.5);
}

 
Div amarillo semitransparente
 
       Como vemos el amarillo deja ver el dibujo del div de fondo que se ha colocado con el logo de Tictac. Estas funciones de color están soportadas por casi todos los navegadores, Firefox, Chrome, Safari, Android, Opera,... desde hace muchas muchas versiones, y en Internet Explorer desde la 9. Así que la única preocupación seria es Internet Explorer 8 y anteriores. Se puede re-declarar la propiedad, dando primero una versión para los navegadores que no conozcan la función rbga y que los navegadores que si la conozcan la sobrescriban con la segunda declaración. Así podemos hacer una versión para navegadores viejos con una imagen (usando background en lugar de background-color) o con un color sólido. Yo recomiendo esto último, un color sólido que sea parecido a como queda el color con la transparencia en otro navegador y ya está. Quien tenga un navegador viejo lo verá un poco más feo, pero no solo es aceptable, sino casi recomendable, ¡si quieren ver las cosas bonitas que se actualicen!

       El código con re-definición de la propiedad sería:

#miDiv{
    background-color: #ffff00;
    background-color: rgba(255,255,0,0.5);
}
 
En IE 8 se vería así, con color sólido

 
Este div se ve sólido en IE 8 y transparente en otros navegadores