Tip Precoz 3: RGBa

26/Feb/2009 258

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. modafinilmoa [#]

    modafinil moa https://modafinilok.com/

  2. yeezys [#]

    Thanks so much for providing individuals with remarkably breathtaking opportunity to discover important secrets from this web site. It’s always so pleasurable and also stuffed with a good time for me personally and my office fellow workers to search the blog a minimum of three times every week to learn the newest guidance you will have. And lastly, I’m also actually happy with all the magnificent tricks served by you. Selected 1 tips in this article are essentially the simplest I’ve ever had.

  3. ivermectin 12 mg [#]

    Non-specific Message Far this offshoot
    https://ivermectstromect.com ivermectin human tablets
    https://ivermectstromect.com ivermectin for sale for humans
    https://ivermectstromect.com ivermectin tablets
    https://ivermectinsts.com ivermectin 6 mg
    https://stromectolivermect.com ivermectin 6 mg

  4. how long before ivermectin works [#]

    Hello, i think that i saw you visited my web site thus i came
    to “return the favor”.I’m attempting to find things to enhance my site!I suppose
    its ok to use some of your ideas!! http://harmonyhomesltd.com/Ivermectinum-pharmacology.html

  5. air jordans [#]

    I wish to get across my gratitude for your kind-heartedness in support of people that require help on your subject matter. Your personal commitment to getting the solution across became particularly good and has usually helped some individuals just like me to realize their pursuits. The warm and helpful advice signifies a great deal to me and substantially more to my peers. Many thanks; from everyone of us.

  6. kyrie 6 [#]

    I would like to show some thanks to this writer for bailing me out of this instance. Just after surfing around throughout the world-wide-web and obtaining proposals that were not productive, I believed my life was well over. Living devoid of the strategies to the issues you’ve fixed all through this short article is a serious case, and those which might have in a wrong way affected my entire career if I hadn’t discovered your web blog. Your main ability and kindness in controlling every aspect was useful. I don’t know what I would have done if I hadn’t encountered such a solution like this. I can also now relish my future. Thank you so much for the specialized and sensible guide. I will not think twice to suggest your web page to any person who needs to have counselling on this area.

  7. supreme new york [#]

    I am writing to make you be aware of what a useful discovery our girl encountered browsing your web site. She noticed such a lot of pieces, with the inclusion of what it’s like to possess a very effective giving character to get the rest just learn about a number of complex matters. You undoubtedly surpassed my expectations. Thank you for producing those valuable, safe, educational and even cool thoughts on your topic to Tanya.

  8. supreme hoodie [#]

    I definitely wanted to type a small note to be able to thank you for these stunning strategies you are giving out here. My long internet search has now been recognized with sensible content to go over with my great friends. I would tell you that we visitors actually are quite blessed to exist in a remarkable network with so many awesome professionals with very beneficial techniques. I feel very much grateful to have encountered your entire site and look forward to so many more excellent moments reading here. Thanks a lot once more for everything.

CSSLab