Archive for the 'Desarrollo Web' Category

Transformaciones CSS agregadas en Firefox 3.1

La web 2.0 requiere cada vez tecnologías mas potentes en los navegadores, requiere que el javascript se ejecute mas y mas rápido, y requiere nuevos y mejores elementos html, y en toda esta carrera por superar las barreras impuestas por las tecnologías en los navegadores, uno de los últimos pasos han sido los “CSS transforms”, o dicho mas llanamente: Transformaciones CSS.

La transformaciones CSS son unas nuevas propiedades disponibles para utilizar en nuestras hojas de estilo, propuestas por el equipo de WebKit hace un año, dichas propiedades permitirían aplicar ciertos efectos, como rotaciones y escalados, a nuestros elementos HTML.

Las primeras noticias acerca de estas nuevas propiedades CSS (no estándares, evidentemente) que salieron para WebKit incluían ciertos ejemplos de lo que se podía hacer, bastante atractivos, como crear un iframe, cargar una página dentro, y rotarlo 90º:

Sin embargo, el hecho de que no estuviesen disponibles en Firefox, era desalentador, hasta hace poco, que mozilla anunció que las transformaciones CSS estaban ya disponibles en firefox 3.1.

Antes de continuar, si queréis bajar el último firefox 3.1, y probarlo, se puede descargar precompilado de aquí:

http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/

Si no queremos que esto afecte a nuestra configuración actual de firefox, en linux podemos hacer:

mv ~/.mozilla ~/.mozillaBack

Y renombrar el nombre del directorio donde se guardan nuestras configuraciones de firefox, a .mozillBack, ahora extraemos el firefox 3.1 precompilado, lo ejecutamos, y el creará su nuevo .mozilla, el cual podremos borrar y sustituir por nuestro .mozillaBack en cuanto queramos regresar a firefox estable, haciendo:

mv ~/.mozillaBack ~/.mozilla

Con nuestro nuevo firefox 3.1 listo, ya podemos adentrarnos un poco mas en las transformaciones CSS, la documentación completa de estas nuevas propiedades CSS está aquí:

http://developer.mozilla.org/En/CSS/CSS_transform_functions

Así que vamos a probar a hacer algo, por ejemplo, rotar un iframe 45º sobre si mismo:

<html>
<head>
<title>Prueba de rotación</title>
</head>
<body>
<iframe style=”-moz-transform: rotate(45deg); -moz-transform-origin: bottom left;” src=”https://rooibo.wordpress.com/&#8221; width=”600px” height=”600px” />
</body>
</html>

La verdad es que es bastante fácil, aquí podéis verlo en funcionamiento:

http://eyeideas.es/rotacion.html

Y aquí una imagen de como se me renderiza a mi en mi Firefox 3.1:

Los resultados son bastante buenos, habrá que esperar a ver cuanto se extienden estas nuevas propiedades CSS, que hace Internet Explorer y todo eso…el clásico problema en el mundo de los navegadores.

Anuncios