Color RBGA en CSS3

CSS3 ha llegado con muchas mejoras, vamos a ver una muy importante que tiene que ver con el uso de los colores.
Los colores en HTML se expresan en valores RGB (Red - Rojo, Green - Verde, Blue - Azul), igual que en CSS hasta la versión 2, que admite diversas notaciones para definir el color, a través de números en hexadecimal.
Veámoslo en un ejemplo:
#000000 que es negro, los dos primeros valores pertenecen a la cantidad de rojo, los dos segundos a la de verde y los dos terceros a la de azul. El extremo contrario sería el blanco #FFFFFF. Estos colores pueden variarse como queramos, veamos#52f4bb, este color que hemos puesto el fondo negro para que se vea mejor, podemos mostrarlos de otra manera con CSS; el mismo color lo pondríamos así rgb(82, 244, 187), con valores que van desde 0 hasta 255. También, aunque es menos usa existe este formato rgb(0%,100%,22%).
Ahora queremos hablar de una nueva notación, que no es simplemente una manera nueva de expresar lo mismo, sino una que nos permite definir colores por medio de valores adicionales. Se trata de la notación RGBA. Esta incorpora la capa alfa o capa de transparencia. Antiguamente se lograba trabajando imágenes png, ahora lo logramos con código. El mismo color nuevamente lo ponemos de esta manera rgb(82, 244, 187, 0.5), donde el 0.5 significa una transparencia al 50%. Los valores de transparencia van por lo tanto de 0 a 1, siendo 0 totalmente transparente y 1 sólido.
Les voy a mostrar ahora un “truco” para crear compatibilidad con navegadores viejos que no soporten esta propiedad.
HTML:
<div id="alpha"></div>
CSS:
#alpha {
                background:url(bg.png);
                background: rgba(0%, 0%, 100%, 0.5);
                width:500px;
                height:50px;
}
La propiedad background es general y abarca varias propiedades. En este caso estoy usando background-image y luego background-color. Lo del alto y ancho es para que lo prueben si no la capa con no tiene dimensiones. El navegador viejo va a obviar la segunda propiedad y utilizará bg.png, mientras que el que si soporta la propiedad lo va a sobreescribir.
Ojo: si lo usamos así background:rgba(0%, 0%, 100%, 0.5) url(bg.png); obtendremos la superposición de ambos.
Espero les haya sido útil este escrito.


Comparta su opinión con nosotros


Escriba su comentario


* Su información de correo electrónico no será publicada.
*

*

*

 

*



 


Shared Pixel es una marca comercial registrada. ® Todos los derechos reservados, 2013