Micaela 24 de Febrero de 2009 a las 10.03
   Imprimir artículo
elWebmaster.com

Propiedad RGBa de CSS: c贸mo se aplica en distintos navegadores


rgbaLa 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


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (2)

  1. andres dice:

    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

  2. desiree ramirez dice:

    quiero tener personas para chatear por que no conosco a muchas personas

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Iniciar sesi贸n