Tradicionalmente en CSS los valores de los colores se han expresado en valores RGB. CSS3 da una vuelta de tuerca a este sistema y añade por un lado el canal alfa, y por el otro los sistemas HSL y HSLA.
Colores RGBA
CSS3 nos permite añadir un canal alfa (de transparencia) al sistema de color RGB.
Esta nueva notación a la que llamaremos rgba permite gracias a su cuarto canal la posibilidad de indicar la opacidad en tantos por 1, es decir, tomando 0 como la máxima transparencia y 1 como la máxima opacidad.
Actualmente cuando queremos crear alguna capa con transparencia creamos una imagen png con la opacidad que deseemos y guardamos conservando el canal alfa. Después en el css definimos esa imagen de fondo y eventualmente le damos el valor transparent.
Código :
background:transparent url("fondo.png") repeat;
Ahora solamente necesitamos definir el color con el modelo RGBA. Su uso es el mismo que rgb(r,g,b); pero añadiendo el cuarto valor:
Código :
body{
background-color:rgba(100,20,40,0.5);
}
Además este tipo de color actúa sobre cualquier elemento susceptible de atribución de color, como los textos.
Este es un ejemplo de capas usando RGBA en css3maker.com
Para no perder las costumbres, Internet Explorer 8 no da soporte a este modelo por lo que para verlo tendremos que usar una versión 9 o superior del programa de Microsoft.
Aquí tenéis un ejemplo.
Colores HSL y HSLA
CSS3 añade además un nuevo modelo de color conocido como HSL. Estas siglas provienen del inglés Hue, Saturation, Ligthness o lo que es lo mismo, tono, saturación y brillo.
El modelo hsl es tal vez el más intuitivo de los modelos de color digitales
La sintaxis es la siguiente:
Código :
/*atributo: hsl(tono,saturación,brillo);*/
background-color: hsl(360,100%,20%);
Nótese que el valor tono puede tomar valores del 0 al 360 donde:
- 0, sería el rojo.
- 120, sería el verde.
- 240, sería el azul.
- 360, volvería a ser rojo.
Además, como en el caso del modelo RGB, al HSL se le puede añadir un canal alpha para definir la transparencia del color. El resultado en código sería el siguiente, dando resultados análogos a RGBA:
Código :
hsla(300,130%,65%,10%);
En nuestro siguiente capítulo, algo mágico: Bordes redondeados con CSS3.
Información adicional
® Cristalab 2011
Si tienes alguna pregunta de este ejemplo; puedes hacerla aqui en los foros.