La propiedad RGBa es una forma de declarar un color en CSS. 驴Qu茅 tiene de diferente a la forma tradicional con colores web? Que adem谩s nos da la posibilidad de incluir un valor de transparencia alpha.
Esto significa que podr谩s implementar transparencias en tus dise帽os, directamente desde CSS, sin necesidad de agregar im谩genes que imiten este efecto. A continuaci贸n, pros y contras de esta propiedad y c贸mo aplicarla.
Pero no todos los navegadores poseen soporte RGBa, as铆 que si el dise帽o lo permite, deber铆as declarar un color s贸lido 鈥渄e respaldo鈥. De no declararlo ning煤n color se aplicar谩 en aquellos navegadores que no posean el soporte.
Este color de respaldo puede llegar a fallar en los navegadores m谩s viejos.
Para implementarlo utilizamos este c贸digo:
div {
background: rgb(200, 54, 54); /* Color de respaldo */
background: rgba(200, 54, 54, 0.5);
}
Soporte de navegadores para RGBa:
|
Navegador, Versi贸n, Plataforma |
Resultado |
Respaldo |
|
Firefox 3.0.5 (OS X, Windows XP, Vista) |
Funciona |
鈥 |
|
Firefox 2.0.0.18 (PC) |
No Funciona |
Color Solido |
|
Safari 4 (Developer Preview, Mac) |
Funciona |
鈥 |
|
Safari 3.2.1 (PC) |
Funciona |
鈥 |
|
Mobile Safari (iPhone) |
Funciona |
鈥 |
|
Opera 9.6.1 |
No Funciona |
Color Solido |
|
IE 5.5 (PC via IETester) |
No Funciona |
Ning煤n Color |
|
IE 6 (PC via IETester) |
No Funciona |
Color Solido |
|
IE 7 |
No Funciona |
Color Solido |
|
IE 8 beta 2 |
No Funciona |
Color Solido |
|
Google Chrome 1.0.154.43 |
Funciona |
鈥 |
|
Google Chrome 1.0.154.46 |
Funciona |
鈥 |
|
Netscape 4.8 (PC) |
No Funciona |
Ning煤n Color |
|
SeaMonkey 1.1.14 |
No Funciona |
Se necesita info |
|
Sunrise 1.7.5 |
Funciona |
鈥 |
|
Stainless 0.2.5 |
Funciona |
鈥 |
|
Flock 2.0.2 |
Funciona |
鈥 |
|
BlackBerry Storm Browser |
Funciona |
鈥 |
|
Camino 1.6.6 |
No Funciona |
Se necesita info |
Como IE soporta hojas de estilo condicionales podemos aprovechar estas junto con un filtro CSS de Microsoft para lograr el mismo resultado:
<!--[if IE]>
<style type="text/css">
.color-block {
background:transparent; filter:progid:DXImageTransform.Microsoft.gradient
(startColorstr=#99000050,endColorstr=#99000050);
zoom: 1;
}
</style>
<![endif]–>
Fuente: Css-Tricks
Lunes, 11 de Octubre de 2010 a las 14.52
hola soy principiante en esto de la web, pero tengo un poblema, quisiera que el mismo color de letra se mirara en explorer, safari, chome porque en firefox se mira bien, gracias
Lunes, 11 de Octubre de 2010 a las 22.39
quiero tener personas para chatear por que no conosco a muchas personas