rgba compatible con Internet Explorer

En CSS3 la propiedad rgba consiste en dar un color RGB y una transparencia alpha.

Su uso es el siguiente:

Código :

#contenido{
background-color:rgba(236, 26, 105, 0.5);
}

Donde los 3 primeros valores corresponden a la formación del color RGB, y el último valor indica la transparencia.

Esto es hermoso hasta ahora, pero qué sucede en Internet Explorer y sus distintas versiones? Si necesitas validar para IE, por suerte hay una solución muy sencilla y bonita de implementar, creada por Lea Verou. Sólo debes descargar el archivo rgba.php desde github. Ahora debemos crear un directorio llamado “colors”, donde allí se guardarán automáticamente los 3 png’s que forman el color con transparencia que queremos lograr, del resto se encargará el PHP.

Implementación

en nuestro CSS debemos agregar:

Código :

#contenido{
background-color:rgba(236, 26, 105, 0.5);
background: url('rgba.php/rgba(236, 26, 105, 0.5)');
}

Y listo!! podés ver el demo aquí. Ahora podés disfrutar de las transparencias y usarlas a discreción y con sabiduría! <3

más info en la página oficial

Si deseas podés revisar esta guía: Colores RGBA, HSL y HSLA en CSS3 en el curso de CSS3 por @ajnavajas

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

background-color: rgba(236, 26, 105, 0.5); /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FEC1A69,endColorstr=#7FEC1A69); /* IE6–IE9 */ zoom: 1;

Por Dientuki el 22 de Febrero de 2012
Voy a agregar una forma de hacerlo pero con css usando filtros, funciona para ie6 hasta el 9
Código :
```
  background-color: rgba(236, 26, 105, 0.5);  /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FEC1A69,endColorstr=#7FEC1A69); /* IE6–IE9 */
            zoom: 1;
```
Si quieren mas trucos como estos, vayan a css3please.com

Los filtros no son buenos (para los puristas, ya se que no valida y que es propietario), pero en lo personal prefiero un filtro y no cargar un php con todo lo que ello acarrea.

BTW, ambas formas se pueden aislar solamente para IE usando conditional css
Por Mariux el 22 de Febrero de 2012

genial dientuki! gracias por el aporte! a mí se mi hizo más simple cargar el php

lo que me ocurrió al usar los filtros es que te deja el div con todo el contenido en transparente. Con el php sólo deja el div con transparencia y el contenido opaco. Puede ser que lo haya implementado mal no tenés un demo para chusmear¿?
Por hersonHN el 22 de Febrero de 2012

Interesante y muy inteligente forma de hacerlo, veo que fue LeaVerou la que lo hizo, bueno, no me extraña que sea así, las mujeres son muy buenas para hacer cosas que a los hombres no se les ocurriría
Por Dientuki el 22 de Febrero de 2012

@mariux hay trucos tal ves el filtro que usaste era el opacity. Entra con IE a css3please.com, tiene todo dinamico y podes ir viendo como queda. Busca la regla ".box_rgba", la habilitas, y probas.
Por Otaku RzO el 24 de Febrero de 2012

Muy ingenioso, gracias por compartirlo @Mariux
Por WWCC el 09 de Marzo de 2012

hasta ahora, creaba mis divs sin transparencias, lu cual me llevava a diseñar paginas limitadas de las transparencias.

voy a probarlo..
Por The Fricky! el 09 de Marzo de 2012

Ciertamente ingenioso, pero yo estoy de acuerdo con Dientuki (quién lo diría) es que es mejor utilizar los filtros para las versiones anteriores de IE.
Por Mariux el 09 de Marzo de 2012

The Fricky! :
Ciertamente ingenioso, pero yo estoy de acuerdo con Dientuki (quién lo diría) es que es mejor utilizar los filtros para las versiones anteriores de IE.

gracias The Fricky! . qué contras supone usar un php para esto?
Por The Fricky! el 09 de Marzo de 2012

Siempre depende del proyecto, pero en principio estás poniendo la carga en el lado del servidor, que puede ser poca o puede multiplicarse a la n dependiendo de la cantidad de visitas únicas que tengas. Usando los filtros, esa misma carga la colocas del lado del cliente, quitándola del servidor y disminuyendo el impacto porque cada cliente se encarga del render de su propia transparencia.
Por Otaku RzO el 10 de Marzo de 2012

@TheFricky Sobre el PHP tecnicamente tienes razón, pero considero que tu explicación espanta u.u . Mi servidor no explotará por usar uno archivo PHP de esta forma.
Solo quería clarar eso.

[i]Pero niños, no hagan eso en casa.[i]

También estoy a favor del filtro u otra mejor opción según sea el caso.
Por The Fricky! el 11 de Marzo de 2012

Jajajajaja!!!! Bueno, no pretendía espantar. No matará al servidor, sólo lo hará trabajar más y aumentará el número de peticiones.
Por Dientuki el 12 de Marzo de 2012

Otaku RzO :
@TheFricky Sobre el PHP tecnicamente tienes razón, pero considero que tu explicación espanta u.u . Mi servidor no explotará por usar uno archivo PHP de esta forma.
Solo quería clarar eso.

[i]Pero niños, no hagan eso en casa.[i]

También estoy a favor del filtro u otra mejor opción según sea el caso.

Tal ves TheFricky fue demaciado tecnico en la explicacion, pero es asi. Pero siempre hay que considerar el entorno. Por ejemplo, si tu sitio tiene 1000 visitas al mes, no importa si es un filtro o es un php, ahora si tu servidor tiene 1000 visitas por minuto, es otra cosa, ahi ya tienes que pensar en quitar la carga del servidor como sea, o gastar dinero en servidores.
Por Mariux el 15 de Marzo de 2012

gracias @TheFricky, @Dientuki y @Otaku RzO !!

si alguien se anima sería bueno un artículo o tuto con consejos para diseñadores, con estas pequeñas advertencias

rgba compatible con Internet Explorer

Implementación

Publica tu comentario

o puedes...