22 octubre, 2013 Jose Antonio Vila

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.

Tagged: , , ,

Sobre mí

Jose Antonio Vila Programador orientado al desarrollo Web, experto en PHP y especialista en responsive design, muy cuidadoso en la usabilidad y optimización, garantizando una adecuada navegabilidad en los websites. Jose en Google+

Comments (9)

  1. yohandy penalo

    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

  2. Nicolas

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

  3. P@ul

    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

  4. 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

  5. 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

  6. leonardo rojas

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

  7. Muchas gracias amigo, me ayudaste 🙂 ahora mi blog esta mejor, cuando publicaras mas efectos para html5, saludos amigo.

  8. Hola. Me gustaría consultarte…
    Quiero poner la imagen (A) y que al hacer hover sobre ella se vea otra imagen (V). Como puedo resolverlo???
    Agradeceré la respuesta

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *