JMiur [E]

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::

3 comentarios:

Jaime Trujillo Escobedo  

Buenas tardes JMiur! Pasaba a realizarte una consulta. Verás, hace tiempo intenté crear una especie de "icono" similar al triángulo del gadget archivos de blogger para el "índice" de mi sidebar. Realicé el onmouseover y onmouseout con imágenes. Esto último no me termina de convencer y querría preguntarte si conocías alguna otra forma de hacerlo con el propio símbolo, sin iconos.

Muchas gracias maestro!

Responder
JMiur  

Lo que utiliza Blogger son caracteres:

▲ ▲
► ►
▼ ▼
◄ ◄

No sé si es eso lo que estás buscando. Hay una tabla con esos caracteres en esta entrada

Responder
Jaime Trujillo Escobedo  

Muchísimas gracias JMiur aunque ahora que lo pienso, supongo que "atrae" más como está por lo que dejaré todo como está. Un abrazo!

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR