Transiciones CSS3 sobre imágenes

Transiciones CSS3 sobre imágenes
  • Eborio Linárez
  • November 18, 2012
  • 0

Hoy en día podemos apreciar en la web una serie de efectos muy llamativos realizados con CSS3, y uno de ellos son las transiciones sobre imágenes aplicadas en el evento hover.

En este tutorial aprenderemos a crear algunos efectos que podremos aplicar a las imágenes de un sitio web. Cabe destacar que el tutorial es una traducción del artículo original creado por Alessio Atzeni en el sitio web tympanus.net llamado Original Hover Effects with CSS3 el cual está en inglés y fue traducido con la finalidad de hacer más fácil su lectura. Si deseas acceder al artículo original puedes hacerlo a través del enlace hacia el post original que se encuentra al final del artículo.

Los ejemplos se adaptaron para su utilización con Bootstrap, por lo tanto si requieres utilizarlos sin el framework o con soporte para responsive deberás realizar los ajustes correspondientes. También se dividió el tutorial en diferentes partes para explicar lo más detalladamente posible cada ejemplo y no hacer un solo post demasiado largo.

Te invito a leer cada una de las partes del tutorial para que le saques provecho a estas interesantes transiciones realizadas 100% con CSS3.

Al momento de publicar este tutorial (18 de noviembre de 2012) CSS3 aún no es estándar, por lo tanto se deben utilizar prefijos para garantizar la compatibilidad con todos los navegadores. En el código mostrado en cada uno de los ejemplos se omitirán para no hacer los posts muy largos, pero se encontrarán en los archivos del repositorio y en los ejemplos en vivo.

Puedes verificar en el sitio caniuse.com las versiones de los navegadores que soportan las reglas utilizadas. Así puedes determinar si requieren el uso de prefijos o no.

Comparte en las redes sociales

Comentarios

Aún no hay comentarios. Sé el primero en comentar.

Deja un comentario