» Publicación:
13 agosto 2011
/
Categoría:

Bello efecto con solo propiedades CSS3 y Sprites

Una de los mejore efectos visuales que he visto este último tiempo fue el puesto por InspectElement.com, el cual hace un efecto elegante que hace girar los iconos de menú o redes sociales (como lo haré en el ejemplo a continuación) con la ayuda de una transformación CSS y de la transición cuando se pasa sobre ellos (la propiedad llamada hover). Nada espectacular, pero sin duda una mejora para nuestros diseños y sin la necesidad de cargar un JavaScript externo o el uso de Flash.

» Primer paso: Guardar la imagen

Lo primero que debemos hacer es guardar esta imagen que esta en formato .PNG en nuestro servidor o en la carpeta que deseamos.

Imagen Sprites

» Segundo paso: El Código HTML de la Página

» Tercer paso: Aplicando el CSS3

Aquí está la CSS centrarse sólo en el código que realizan las transiciones, atención que en esta parte ocupamos Sprites (como lo hace el menú de este blog, si realmente no sabes que es un Sprite, te recomiendo visitar el sitio web de Tinnta.com y leer el tutorial desarrollado por ellos.

Listo… explicare en mayor detalle como funciona lo siguiente:

La etique Span es la que hace el efecto, por ende todo la etiqueta <span> es la afectada al pasar el mouse (como dijimos actua como sprite con un hover). La primera parte de la propiedad “transition” es la duración y la facilidad de salida es la función de temporización. Es decir “0.4s” son los segundos que dura la transición para dar la vuelta en 360 grados, como es eso de los 360 grados lo explico a continuación.

Veamos el código de “transform” primero. Se trata de poner fin a la posición de donde queremos que el icono que se va y en este caso es que realmente quieren girar en 360 grados alrededor del eje Z que es el eje que se extiende fuera de la pantalla.

Sin la transición, nada parece estar sucediendo. Rotación de 360 grados, obviamente, va a hacer que el icono de venir “círculo completo”, visualmente de nuevo a la misma posición que comenzó desde el navegador.El punto de partida predeterminado para la rotación es de 0 grados y el segundo punto en hover es de 360.

Ver demo

Importante:
Actualmente trabaja en los navegadores que trabajan con WebKit (Safari y Chrome) y Firefox desde la version 4 en adelante e Internet Explorer desde la versión 9 (en la version 8 no probé).
  • Facebook
  • Twitter
  • Tumblr
  • Digg
  • Reddit
  • LinkedIn
  • Google Bookmarks
  • E-Mail
Etiquetas
» Sobre el autor: Reckless
Joven chileno de 29 años, con un paso por la escuela de Ingenieria de la UNAB, que dejo a medio camino para tomar la carrera de Diseñador Gráfico Profesional en la Universidad Santo Tomás, que era lo que siempre busco desde los 12 años. Fanático de la Universidad de Chile, el Metal y el Hardrock. Actualmente trabajando como Diseñador & Desarrolador Web para Especiales de Emol.com, ademas de "Freelancear" cuando se puede.
Comentarios
Por ahora esta entrada no contiene ningún comentario...
Se el primero en comentar está entrada en el formulario de abajo.
Escribe tú comentario
*
*
» Mensaje: