Utilizando CSS3 hoy (2): Colores y opacidad utilizando RBGA
RGB (red, green, blue, es decir rojo, verde, azul) es un modelo que permite obtener cualquier color a partir de la combinación de esos tres colores. Los que conocéis CSS estáis habituados a especificar un color por su valor hexadecimal, por ejemplo #000000 para el negro. Pero todo color tiene también su valor RGB, que en el caso del negro es R:0 G:0 B:0. En el extremo contrario estaría el blanco que sería R:255 G:255 B:255.
Hasta ahora podíamos definir un color no sólo mediante su valor hexadecimal, sino también según sus valores RGB. Por ejemplo. para poner un fondo negro a un div:
1 2 3 4 5 | div { background: rgb(0, 0, 0); width: 50px; height: 50px; } |
Pero gracias a CSS3 podemos incluir un valor más para cada color: su opacidad. Entonces hablaríamos de RGBA, siendo A=Alpha, que nos permitirá especificar la opacidad del color. El valor de A es un número entre 1 y 0, siendo 1 totalmente opaco y 0 totalmente transparente. Si seguimos el ejemplo anterior del fondo negro y queremos que tenga una opacidad del 50% haremos:
1 2 3 4 5 | div { background: rgba(0, 0, 0, .5); width: 50px; height: 50px; } |
Como vemos hemos situado su opacidad al 50% por lo que si hubiera algo debajo de ese DIV se vería.
Existe ya una propiedad en CSS3 para conseguir la opacidad de un elemento. Se trata de opacity. Por ejemplo:
1 2 3 4 5 6 | div { background: #000; opacity: .50; width: 50px; height: 50px; } |
Hemos definido el color del fondo y luego le aplicamos “opacity”. El resultado parece ser el mismo:
A primera vista no hay diferencias, hasta que incluimos algo dentro del div. Vamos a verlo. Supongamos que, simplificando al máximo, tenemos:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <html>
<head>
<style type="text/css">
div {
background: #000;
opacity: .50;
width: 50px;
height: 50px;
}
p {
color: #000;
}
</style>
</head>
<body>
<div>
<p>TEXTO</p>
</div>
</body>
</html> |
Es decir un elemento “div” que tiene en su interior un elemento “p” con la palabra “TEXTO”. Vemos que hemos aplicado al elemento p el color negro (#000;) lo mismo que al fondo del elemento DIV. Pero además al elemento DIV le hemos aplicado una opacidad del 50% Esto es lo que vemos:
¿Donde está el texto? No se ve por una razón: con opacity no sólo se altera la opacidad del elemento sino además se altera también la opacidad de cualquier elemento que se encuentre dentro del primero, en este caso el elemento p. Es decir, el elemento p tiene aquí también una opacidad del 50% y entonces tiene el mismo color que el elemento div y por eso no se ve.
Vamos a hacerlo ahora con RGBA:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <html>
<head>
<style type="text/css">
div {
background: rgba(0,0,0,.5);
width: 50px;
height: 50px;
}
p {
color: #000;
}
</style>
</head>
<body>
<div>
<p>TEXTO</p>
</div>
</body>
</html> |
Ahora lo que veremos es esto:
Como vemos con RBGA se afecta sólo a la opacidad del elemento sobre el que se aplica la propiedad, sin afectar a los elementos que se encuentren en su interior.
La propiedad RGBA en estos momentos la soporta Safari, Chrome, Firefox 3 y Opera 10. Internet Explorer (que raro) no la soporta. Entonces si se quiere utilizar un fondo para un elemento (seguimos con el ejemplo del negro) y utilizar la propiedad RGBA para los navegadores más avanzados deberíamos establecer también el fondo para Internet Explorer:
1 2 3 4 5 6 | div { background: #000; /* Para Internet Explorer */ background: rgba(0,0,0,.5); /* Para los navegadores que soportan RGBA */ width: 50px; height: 50px; } |
Si, en Internet Explorer se verá distinto, sin opacidad. Pero si esto no afecta a la usabilidad ni a la accesibilidad del sitio es totalmente válido su uso.
Por último señalar la facilidad que nos da RGBA para el uso de una gama de colores en una web determinada. Supongamos que queremos utilizar distintas tonalidades a partir del mismo verde. Utilizando distintos niveles de opacidad podemos tener variaciones diferentes para utilizar por ejemplo como color de los enlaces y del hover de los enlaces:
1 2 3 4 5 6 | a:link, a:visited { color: rgba(20,178,120,1); } a:hover { color: rgba(20,178,120,.5); } |
Otras lecturas recomendadas
Lea Verou, propone un método para poder utilizar fondos RGBA en Internet Explorer: Bulletproof, cross-browser RGBA backgrounds, today
24Ways.com: Working With RGBA Colour
Sigue a Juan en Twitter, en Google+, o suscríbete al RSS Feed de Emenia para estar al día de nuestros artículos.
Artículos relacionados
Últimos artículos
Suscribirse a las entradas
Suscribirse a nuestro boletín
