Tip Precoz 3: RGBa

26/feb/2009 9

Como debes saber, existe más de una manera de declarar colores en CSS:

  • Nombres (websafe): por 17 colores en inglés : aquablackbluefuchsiagraygreenlimemaroonnavyoliveorangepurpleredsilvertealwhiteyellow (actualmente los browsers modernos soportan muchos más).
  • Sistema (no lo recomiendo): por colores del sistema operativo que esté utilizando el usuario del sitio: ActiveBorder, AppWorkspace, Background, ButtonFace, ButtonHighlight, ButtonShadow, ButtonText, HighlightText, InactiveBorder, InfoBackground, InfoText, Menu, MenuText, Scrollbar, Window, WindowFrame y WindowText.
  • RGB Hexadecimal: quizás el más utilizado, en el cual cada color se mezcla según 16 símbolos (de 0 a 9 y de la A a la F); por ejemplo el rojo es: #FF0000.
  • RGB Decimal: se indica qué cantidad de Rojo, Verde y Azul se debe mezclar en una escala de 0 a 256 tonos cada uno; en este caso el rojo seria rgb(255,0,0).
  • RGB Porcentual (poco preciso): otra forma de expresar colores en RGB pero en forma porcentual; rojo es rgb(100%,0%,0%).

Pero con CSS3 existe una nueva e interesante manera:

  • RGBa: al igual que en la forma RGB Decimal anterior, se agrega un valor al final: el canal alpha de opacidad, en escala de 0 a 1. Lo interesante de este método es que al contrario de opacity{}, la transparencia la verás sólo al color y no a todo el elemento, por lo tanto esta propiedad no se hereda. Su modo de uso es de la siguiente manera:
selector {
background: rgba(255,0,0,0.3);
color: rgba(200,120,60,0.6);
border: 3px solid rgba(10,250,70,0.5);
}

En el siguiente ejemplo verás la diferencia con una opacidad aplicada mediante RGBa y mediante opacity{}.

Ver ejemplo

Por supuesto al ser una propiedad CSS3, en estos momentos sólo es soportada por Safari 3+ y Firefox 3, pero ya comencé a agregar funcionalidades a los sitios en que sólo son vistos si navegas con estos browsers; si usas IE no tienes tan buena experiencia visitándolos y es mi manera de convencer al usuario de que se actualice.

Comentarios

  1. Felipesoto [#]

    que mejor manera de invitar a los usuarios para que se actualicen de una vez a un buen navegador, y mas ahora que salió safari 4 (es demasiado espectacular ¡¡vuelaaaaaaaaaaaaaaaa!!)

  2. rogertm [#]

    Excelente el tip, he estado pensando hacer un update al theme de mi blog, donde uso la transparencia en algunos bloques y de seguro empleare este metodo

    Saludos y suerte

  3. OMA [#]

    ¿Pero es que crees que si alguien entra con IE en tu sitio va a molestarse en comprobar cómo se ve con otros navegadores? Hay que ser realista.

    Si son efectos menores como el de la transparencia, ese usuario no sabrá que con otros navegadores se ven esos elementos transparentes. Y si son problemas mayores que hacen que la página se vea mal en IE, creerán que tu página está mal hecha y no volverán. Es así de triste.

    Por eso, he empezado a añadir mensajes a los sitios web que hago que aparecen sólo a los usuarios que entren con IE6 o anteriores, avisándoles de que su navegador no es compatible con los sitios web más actuales, para que se actualicen.

  4. Jorge Epuñan [#]

    OMA: no pretendo obligar a nadie a hacer nada, solo que desde hace un tiempo ya no me mato tratando de hacer q los sitios se vean iguales en todos los browsers, principalmente con todos los problemas que conlleva trabajar con IE6 en especifico. Por ejemplo, ya no temo usar PNG’s transparentes porq IE6 no lo soporta… es su problema, no mio. Bordes redondos? uso CSS directo para mozilla y webkit, con IE no lo podras ver; lo mismo el tema de la opacity y este RGBa.

    Resumiendo: ya no limito mi creatividad por culpa de un mal browser; es su culpa no mia. Los usuarios quizas no lo perciban y los q si lo noten quizas cambien la manera en q usan internet. De ninguna manera la pagina quedara mal hecha para IE, solo no se vera mejor q con un browser bueno.

    Saludos, gracias por presentar tu punto de vista.

  5. stock [#]

    Gracias por el tip 😀

    en cuanto a que si IE6 funciona o no, realmente yo lo unico que me preocupo es que se vea la información y le aviso a los usuarios que cambien de navegador.

    saludos

  6. fearlex [#]

    Pues excelente conocer de esta propiedad, una vez mas gracias, por que aqui siempre encuentro tips nuevos y viejos, pero que siempre son un placer tener en el bookmark. Saludos y muera IE6

  7. CSSLab - Usando CSS3 ahora [#]

    […] puedes definir de 2 maneras: como color utilizando RGBa o como opacidad del elemento completo, mediante […]

  8. Animaciones CSS3 avanzadas → CSSLab [#]

    […] nuevas propiedades que entrega Webkit, sino que además en las que CSS3 trae como box-shadow, rgba y […]

  9. Capacitación Gráfica » Usando CSS3 [#]

    […] puedes definir de 2 maneras: como color utilizando RGBa o como opacidad del elemento completo, […]

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab