5 efectos con CSS3 para las imágenes de tu web

5 efectos con CSS3 para las imágenes de tu web

jQuery ha sido, es y será uno de los grandes reyes para poder realizar animaciones en nuestros códigos sin necesidad de recurrir a Flash, cada vez más abandonado a su suerte, pero CSS3 (sobre todo en su conjunto con HTML5) está recortando mucho terreno y nos permite multitud de efectos geniales con unas pocas líneas en nuestras hojas de estilo. Aqui te dejamos una muestra de 6 efectos simples y llamativos para tu web.

1. Efecto Stack & Grow

Esta animación hará que al pasar el puntero por encima de la imagen se amplie tanto a lo ancho como a lo alto. El código usado es este:

2. Efecto ampliación o escalado

El más simple de todos los ejemplos de CSS3. Con este código obtenemos una pequeña ampliación de nuestra imagen al hacer hover sobre ella. Genial para catálogos de tiendas virtuales o listados de productos.

3. Bumb up

También conocido como “el saltito”, esté ejemplo modifica el margin-top de la imagen quedando destacada por encima de las demás. Una buena idea para un menú o barra de navegación.

4. Efecto Crooked photo

En este ejemplo rotamos la imagen hacia el lado izquierdo 7 grados, pero podemos personalizarlo completamente cambiando el valor “-7deg”.

5. Efecto Fade in and reflect

Un dos por uno, aunque solo funciona en navegadores -webkit (como son Chrome y Safari), pero dota a las imágenes de un reflejo que siempre lo hemos tenido que trabajar con Photoshop.

Todos los efectos que os mostramos los podéis ver en funcionamiento en esta página y podéis dejarnos cualquier sugerencia o duda relacionada o no con CSS3 en los comentarios del post.

¡Compártelo!

Comentarios (13)

  • yohandy penalo Reply

    Gracias por esos efectos, tienes bonita web quisiera saber si me puedes mandar el codigo para hacer tu menu y con ese efecto de enpequenecer el logo y el estilo que usaste para poner el borde con una linea orange.
    Un saludo desde Republica Dominicana

    23 enero, 2015 at 4:13 am
  • Luigi Reply

    Excelente post!!! me sirvio mucho!! saludos!

    17 febrero, 2015 at 7:41 pm
  • Anna Reply

    Muy útil, sin JS.

    Muchas gracias.

    17 junio, 2015 at 6:54 pm
  • Nicolas Reply

    Estaría bueno que en la descripción de cada efecto muestres un ejemplo en funcionamiento
    Asi es mas rapido aún

    18 julio, 2015 at 5:40 am
  • P@ul Reply

    Disculpa quiero hacer una rollback con cambio de imagen, pero solo encuentro puras guias para xhtml y lo necesito para html5 tienes algun tutorial para eso ? ya que ninguna me a funcionado

    21 julio, 2015 at 8:49 pm
  • Anna Reply

    Muchas gracias, excelentes y muy fácil de implementar.

    29 julio, 2015 at 5:23 pm
  • Luis Reply

    Quisiera saber si existe un codigo para que las personas entren a mi sitio web y en un formulario puedan adjuntar cualquier tipo de archivo y que me llegue al correo como hago necesito que me ayuden se lo agradeceria de antemano no tengo mucho conocimiento pero me encantaria aprender gracias

    9 septiembre, 2015 at 7:22 am
  • Jose Reply

    Hola estoy haciendo una renovacion en mi web y estos efectos me seran muy utiles; sin embargo, no me resulta el efecto Bomb up, solo quiero saber si esta bien el codigo que esta publicado para revisar bien lo que estoy haciendo
    gracias

    29 octubre, 2015 at 11:28 pm
  • Rolando HUrtadovski Reply

    Muy lindos efectos !! Felicidades y gracias.

    26 enero, 2016 at 10:40 pm
  • leonardo rojas Reply

    hola una pregunta las cookies almacenan informacion para uno como dueño del sitio ? si es asi donde los almacena. gracias

    6 septiembre, 2016 at 12:20 pm
  • martha Reply

    Buenas tardes estoy interesada en mas códigos css3 para animaciones, muy buena tu publicacion

    13 noviembre, 2016 at 11:00 pm
  • Hector Reply

    muy interesante, gracias por el aporte…

    26 noviembre, 2016 at 2:13 am

Deja un comentario

Tu dirección de email no será publicada.