JMiur [E]

A medida que más sitios hablan del CSS3, algunos van descubriendo que ciertas caracterísiticas ya existian desde hace tiempo en los filtros de Internet Explorer. Sin duda, no son lo mismo pero algunas cosas pueden usarse con limitaciones y es bueno que los que crean tutoriales ejemplos los incorporen ya que sino, caemos en el error de creer que, o debemos limitarnos a lo que Internet Explorer decide u odiarlo porque no hace lo que quisiéramos que haga. Ninguna de las dos posturas es correcta, ese, como todos los demás navegadores, tienen bugs y tratan las propiedades de manera diferente así que, mejor nos acostumbramos a eso porque es algo que no va a cambiar jamás.

css3please.com es uno de esos tutoriales que ha comenzado a incorporar esos filtros y nos ayuda a utilizarlos, ya que nos permite ir viendo los resultados online y copiar el código necesario. Obviamente, no lo hará con todas las propiedades ya que no todas tienen un equivalente pero, es una buna forma de aprender.

La que me resultó más interesante es la rotación. Si bien en Internet Explorer hay un filtro para eso, está limitado a rotaciones simples de 90 grados o de 180 grados lo que hace que podamos "invertir" algo pero no "rotarlo" de manera libre:

-webkit-transform: rotate(VALORdeg);
-moz-transform: rotate(VALORdeg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=VALOR);
donde:
0 es no rotar
1 rota 90 grados
2 rota 180 grados
3 rota 270 grados (-90 grados)


Gracias a otro filtro de IE llamado Matrix, también podemos rotar algo en ángulos diferentes. Es uno de esos filtros tan complejos que ni siquiera vale la pena entender si es que nos queremos limitar a hacer algo sencillo. Para eso está la página que nos ayuda con los datos y basta poner el ángulo para que nos de la respuesta.

Vamos a crear entonces un DIV con cualquier contenido y abusando un poco de algunas otras propiedades como las gradientes:
div.rotar {
background-image: -moz-linear-gradient(100% 100% 90deg, #000, #662200);
background-image: -webkit-gradient(linear, left bottom, left top, from(#000), to(#662200));
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF000000', EndColorStr='#FF662200');
border: 1px solid #FFF;
color: #FFF;
font-family: Verdana;
font-size: 24px;
margin: 0 auto;
padding: 20px;
text-align: center;
width: 250px;
}

<div class="rotar"> ....... </div>
Lo que veríamos es esto:

Aliquam luctus nisl vitae ligula pharetra quis sodales lectus suscipit!

Y ahora, lo rotamos 90 grados en un sentido:
.derecha90 {
-moz-transform: rotate(45deg); /* Firefox */
-o-transform: rotate(45deg); /* Opera */
-webkit-transform: rotate(45deg); /* Safari y Chrome */
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE */
}

<div class="rotar derecha90"> ....... </div>

Aliquam luctus nisl vitae ligula pharetra quis sodales lectus suscipit!

Y hacemos lo mismo en el otro sentido:
.izquierda90 {
-moz-transform: rotate(-45deg); /* Firefox */
-o-transform: rotate(-45deg); /* Opera */
-webkit-transform: rotate(-45deg); /* Safari y Chrome */
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=0.7071067811865475, M21=-0.7071067811865475, M22=0.7071067811865476); /* IE */
}

<div class="rotar izquierda90"> ....... </div>

Aliquam luctus nisl vitae ligula pharetra quis sodales lectus suscipit!

10 comentarios:

La hormiguita  

Puse este post en 3 navegadores que son los que estoy usando por ahora , el IE con el cual los número 1-2-3-4 estan todos sin rotar e iguales, el primer rectángulo de Aliquam derecho pero sin color y los dos últimos con color y oblicuos,con chrome los primeros numeros iguales sin rotar y el resto con color y oblicuos y con firefox, los primero números , el único ,90,180,270.
Es impresionante la diferencia que hay con los navegadores!!!! el único que funciona en los 3 es el matrix.
Podemos jugar al veo veo? Que ves?
Una cosa? que cosa Maravillosa!!!
Y agregar .... con que Navegador??????
Porque si no te internas solito!!!!
:)

Responder
Gem@  

Una maravilla, al final va a resultar que todo es posible con CSS3, el otro día vi un efecto parecido pero que trabaja con algún script el resultado era que la imagen la vemos recta sin rotación y al pasar el cursor muestra una rotación de 90 grados quedaba original :D

Responder
Graciela  

jijiji estuve mirando en IE y Mozilla se ven iguales :)

Precioso como lo relatas, lo haces siempre fácil, lástima que :S éste cerebrito funcione con menos energía de la necesaria.

Buen jueves, es un día que no dice nada no? pobre!

Responder
JMiur  

La hormiguita:
Es probable que lo hayas mirado cuando lo estaba editando y al usar Matrix ya estaba corregido ya que ese navegador usa los motores de los otros navegadores. Ahora, no deberías ver difernecias notables entre IE, Chrome y Firefox. De todos modos, es cierto eso de que cada navegador es un mundo diferente :-)

Gem@:
Se vienen tiempos interesantes y vamos a tener que aprender muchas cosas nuevas. Habrá que esperar la próxima version de Firefox y de IE para muchas cosas pero, te aseguro que la forma de crear webs cambiará completamente :-D

Graciela:
Sí, se ven bastante bien en todos. Es rarísimo lo que hay que hacer en IE pero, por suerte, esa página piensa por nosotros y nos da el código que vaya uno a saber qué significa :D

Responder
Amador López Criado  

La verdad, es que contigo como maestro, no se necesitan tutoriales.

Responder
La hormiguita  

Y si debe ser que lo estaba editando, ahora veo en todos igual,.....jaja
bueno ahora si se puede jugar al veo , veo....
gracias.

Responder
gula  

ESCUCHA VAGABUNDIA!!!


LA PAGINA DE TINYPIC DE ALOJAMIENTO DE ARCHIVOS Y FOTOS ACABA DE BANEAR O SEA NO PERMITIR QUE LOS USUARIOS ARGENTINOS QUE ENTREN PUEDAN UTILIZAR EL ALOJAMIENTO , QUERIAMOS SABER SI PODRIAS PRESENTAR UNA QUEJA ASI PODEMOS VOLVER A ALOJAR ARCHIVOS.

MUCHAS GRACIAS

Responder
JMiur  

La Hormiguita: eso debe haber sido. Me había olvidado de un detalle y justo lo corregía :D

gula: Sí, lo noté pero ¿qué sentido tiene una queja? En todo caso, lo que hace falta es buscar soluciones alternativas. Una de ellas es que entres por un webproxy y rescates la información. Otra, que instales el soft que ellos tienen porque ese, sigue funcionando perfectamente.

Responder
Karla  

Suena interesante JMiur, lo que no entiendo es el filtro que usas para IE, (cuando rotas a la izq y derecha en tus 2 ejemplos finales)...me refiero a los valores, ¿cuáles son las variables?

Mil Gracias :D

Responder
JMiur  

Imposible definirlas a mano. para eso es que está el enlace de http://css3please.com/ Mirá alli y verás que si colocas el valor del giro en grados, te calculará ese dato y te dará el valor a usar en IE.

Responder

¿Quiere dejar un comentario?

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

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

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