JMiur [E]

Cuando queremos que "algo" tenga un determinado color, establecemos ese color utilizando algún código, un valor hexadecimal, un valor expresado como RGB() o una palabra que lo identifica:
color: #FF0000;
color: rgb(255,0,0);
color: rgb(100%,0%,0%);
color: red;
Todos ellos harán lo mismo, mostrar algo de color rojo. Es lo que se llama el modelo RGB (Red Green Blue) donde cada color está compuesto por una parte de rojo, una parte de verde y una parte de azul y las diferentes proporciones de estos componentes genera todos los colores posibles.


Como cada componente puede variar entre 0 y 255, tenemos 256 variantes que van desde rgb(0,0,0) o #000000 que genera un color negro hasta rgb(255,255,255) o #FFFFFF que genera un color blanco. De esa manera tenemos 256*256*256* = 256^3 = 16777216 colores diferentes.

A medida que la tecnología avanzó, la cantidad de colores disponibles fue aumentando. En algún momento pasaron del "blanco y negro" a soportar 8 colores, luego 16 (4 bits), luego 256 (8 bits), luego 65536 (16 bits) y ahora el llamado TrueColor (24 bits) (más información).


Cualquiera diría que 16 millones de colores es más que suficiente ya que el ojo humano difícilmente distinga ciertas variaciones sutiles pero, ahora nos enfrentamos con una nueva alternativa, los llamados colores RGBA (Red Green Blue Alpha) que agregan un nuevo factor, el alpha channel, es decir, la opacidad o transparencia que sigue el mismo esquema de porcentajes: el 0% representa la transparencia absoluta y el 100% representa la opacidad absoluta que es la forma en que tradicionalmente vemos los colores.

Esto es fácilmente visible cuando vemos algunas imágenes en formato PNG y no es un avance sin costo ya que pasamos de 24 bits a 32 bits es decir, imágenes más pesadas.

Lo interesante es que el uso de este canal alpha no está limitado a las imágenes, también es posible aplicarlo a algunas propiedades CSS aunque sólo está disponible cuando el navegador puede interpretarlo ya que se trata de una posibilidad contemplada en el CSS3, algo que en este momento, sólo soportan algunos navegadores.

El valor, al igual que en la propiedad opacity, es expresado como porcentaje decimal, yendo de 0 (transparencia total) hasta 1 (el valor por defecto). En este ejemplo, al color rojo se le aplicaron diferentes valores al canal alpha:

0.00.20.40.60.81.0

Ver/Ocultar imagen si el navegador no lo muestra: [+]

color: rgba(255,0,0,0);
color: rgba(255,0,0,0.2);
color: rgba(255,0,0,0.4);
color: rgba(255,0,0,0.6);
color: rgba(255,0,0,0.8);
color: rgba(255,0,0,1);
Funciona correctamente en las versiones más recientes de Filefox 3, Safari, Chrome y Opera 10 pero no así en Internet Explorer, en este navegador, la propiedad será ignorada por lo que no habrá color definido.

Para evitar eso, debemos establecer el color de dos modos, primero, de forma "normal" y luego como rgba(), de esta manera, IE usará la primera y el resto de los navegadores la segunda. Por ejemplo:

Sed porta, turpis eu interdum facilisis, dui quam volutpat lorem, eu consequat dui magna vel arcu.
<div style="background-color:#FF0000;background-color: rgba(255,0,0,0.5);">
.........
</div>
Los valores de rgba() pueden ser utilizados en las propiedades background, border y color y, teniendo la precausión de verificar los resultados en los diferentes navegadores, es una buena alternativa, diferente de la propiedad opacity ya que sólo afecta a elementos individuales.

Cras porttitor sodales lectus, ut tincidunt lacus posuere non. Mauris nunc urna commodo viverra et, ornare non tellus! Duis ac arcu lorem, in iaculis erat! Nulla quis tellus ut tortor orci aliquam.

efecto onmouseover

13 comentarios:

Unknown  

EXCELENTE!! (como siempre bah.. xD)

Responder
Unknown  

muy buena explicación :)

Responder
José GDF  

Debo añadir algo, como profesional de las artes gráficas que soy: el modelo RGB se trata de un modelo aditivo, es decir, se suman los colores. En este caso, en las pantallas o monitores de los ordenadores. Se trata, en principio, de sumar luces de los tres colores básicos de este sistema (Red, Green y Blue). La suma de los tres da la luz blanca y la ausencia total de todos ellos da negro u oscuridad.

Digo esto porque existe el otro sistema, el sustractivo, en el que el soporte absorbe la luz -el monitor la emite, de hecho, las pantallas de los ordenadores dan algo de luz, ¿no?-. Es el caso de los soportes impresos, como el papel o cualquiera similar. En ese caso, los colores básicos son el magenta, el amarillo y el cyan. Todos ellos juntos dan, teóricamente, el negro. Teóricamente, digo, porque en la práctica no llega a ser un negro puro, de ahí que se agregue el negro para completar lo que se conoce como cuatricromía. El blanco lo suele poner el soporte. Pero hay blancos y blancos...

Y ahora vienen las cosas curiosas. La suma sobre el papel de amarillo y cyan, da el verde o green del sistema RGB; sumando el magenta y el cyan tenemos el blue del sistema RGB y, evidentemente, sumando el magenta y el amarillo, tenemos el mismo rojo vivo (teórico) que en RGB.

En el sistema aditivo,con luces, ocurre exactamente lo mismo, obtienes los colores de la otra gama, combinando los colores.

La otra cosa curiosa es que, el otro día, trasteando unos experimentos con CSS, se me ocurrió poner el nombre de un color de los que uso en el trabajo -magenta- por no ir buscando un código, y funcionó. Lo mismo pasó con yellow, green, blue... Bueno, con todos los colores básicos de ambas gamas, además del black y del white, claro.

¿Casualidad? No creo. Los colores son el nexo de unión entre mi trabajo y mi ocio bloguero.

Mis disculpas por el tostón, pero tenia que soltarlo, y un cordial saludo.

Responder
egoloco  

modestia a parte, la del tipo jajaja...

Está muy bien explicado, tanto por JMiur como por la de José GDF. Ahora yo me pregunto, y veo los ejemplos (porque me mudé a Firefox xD), es posible usar esta propiedad para diferenciar las etiquetas, así como están definidas por diferentes colores y tamaños? Yo creo que si. Y nuevamente una lástima que IE no se sume a las novedades, creo que tendrían que tragarse su orgullo si quieren que la gente use sus productos. Vos no te quejás JMiur porque usás más FF que IE, no? Nos vemos!

P.D: Abandoné mi blog, no sé porque, tengo mucho que hacer, la fecha que blogger eliminó, intentar con los avatares, etc... También hay q hacer algo con los emoticones!!!??? Una semana entera tendria que estar frente a la PC :S

Responder
JMiur  

Jared, Graciela : Esperemos que sirva :)

José GDF: No hay nada que disculpar :D Y sí, los colores llamados seguros, tienen una palabra que los identifica que puede usarse en el CSS.

egoloco: Sí, es posible usarla para eso. Basta establecer las definiciones.

Responder
alfilpatagonico  

La didáctica de J.Miur no tiene fisuras ... ¡vaya novedad!, y los que mas debemos valorarla somos los que estamos haciendo los palotes en el manejo de nuestros blogs. Bien a la porteña...: ¡Gracias, Troesma!

Responder
Red Verdialera  

No veo ninguno de los tres efectos. ¿Es normal? Tengo IE8.

Responder
EM2.0  

¿Esto es lo que utilizan en plantillas que he visto por ahí donde parece que la imagen que esta en el main se trasparenta?

Responder
JMiur  

Gracias por el comentario, alfilpatagonico

Red Verdialera: Tal como dice la entrada, no funciona en ninguna versión de Internet Explorer.

Dña. Urraca: No necesariamente, puede ser que las transparencias sea apliquen con propeidades CSS. En el Blog de Gem@ hay una buena explicación de ese otro método.

Responder
Claudio - Poca Tinta  

Buena información ahora se como seguir el tramado de un color a otro.

gracias

Responder
Gem@  

Todos los días se aprende algo.

Responder
JMiur  

#0C6BDF = rgb(12, 107, 223)

Responder
Unknown  

Perfecto! muchas gracias por la información.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR