EL CSS3 en diferentes navegadores

Algunas de las propiedades del CSS3 pueden ser simuladas en Internet Explorer, utilizando sus filtros exclusivos. No todos ellos darán el mismo resultado pero tampoco el resto de los navegadores lo hacen y por ahora, cada uno tiene alguna particularidad distintiva.

En todos los casos, la propiedad tiene la misma sintaxis:

filter: progid:DXImageTransform.NOMBRE(valores);

O en IE8:

-ms-filter: "progid:DXImageTransform.NOMBRE(valores)";

Aunque, en realidad, da lo mismo agregarla o no ya que sólo es una forma de escribir filter así que podemos obviarla.

La opacidad es la más sencilla de implementar

/* para IE, el valor varía entre 0 y 100 */
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
/* para el resto, el valor varía entre 0 y 1 */
opacity: .7;

Opacidad

Aenean eu lorem nec elit semper ullamcorper nec sed neque. Etiam sit amet turpis eros. Nullam ut felis dui. Proin ac nulla et eros semper bibendum. Quisque pharetra erat eget nunc lobortis semper metus.

Las sombras no son lo que mejor se ve en IE; se muestran "duras", sin esfumado:

/* para IE */
filter: progid:DXImageTransform.Microsoft.Shadow(color='#FFFFFF', Direction=135, Strength=10);
/*  para Firefox */
-moz-box-shadow: 10px 10px 5px #FFFFFF;
/* para Chrome y Safari */
-webkit-box-shadow: 10px 10px 5px #FFFFFF;
/* para Opera */
box-shadow: 10px 10px 5px #FFFFFF;

Una alternativa mejor es el filtro dropshadow ya que permite más flexibilidad:

filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=10, OffY=10, Color='#FFFFFF', Positive='true');

Sombras

Aenean eu lorem nec elit semper ullamcorper nec sed neque. Etiam sit amet turpis eros. Nullam ut felis dui. Proin ac nulla et eros semper bibendum. Quisque pharetra erat eget nunc lobortis semper metus.

La rotación es limitada ya que en IE sólo es posible usar tres valores:

/* para IE puede ser 0,1, 2 o 3 */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
/*  para Firefox */
-moz-transform: rotate(180deg);
/* para Chrome y Safari */
-webkit-transform: rotate(180deg);
/* para Opera */
-o-transform: rotate(180deg);

Rotación

Aenean eu lorem nec elit semper ullamcorper nec sed neque. Etiam sit amet turpis eros. Nullam ut felis dui. Proin ac nulla et eros semper bibendum. Quisque pharetra erat eget nunc lobortis semper metus.

Las gradientes funcionan perfectamente y podemos conseguir resultados casi perfectos aunque en este caso, las versiones para los navegadores varían mucho:

/* para IE */
filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#112233', endColorstr='#AABBCC');
/*  para Firefox */
background-image: -moz-linear-gradient(top, #112233, #AABBCC);
/* para Chrome y Safari */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #AABBCC),color-stop(1, #112233));

Gradientes

Aenean eu lorem nec elit semper ullamcorper nec sed neque. Etiam sit amet turpis eros. Nullam ut felis dui. Proin ac nulla et eros semper bibendum. Quisque pharetra erat eget nunc lobortis semper metus.

Más información::

• Chrome/Safari
• Internet Explorer
• Mozilla Firefox