TOP 5: Efectos CSS que querrás en tus imágenes

publicado en: GEEKS | 0

Efectos CSS

Muchas de las paginas web que visitamos hoy en día, se caracterizan por su simplicidad y el buen funcionamiento de esta, lo que hace que el usuario tenga una mejor experiencia y tu sitio mas visitas. Los efectos CSS tienen mucha participación en la parte visual y en como se muestra el contenido. Es por eso que hoy te presentamos un TOP de 5 efectos CSS que puedes implementar a tus imágenes en tu sitio web, y lo mejor de todo no necesitas tener un gran conocimiento para poder realizarlos. ¿Estas listo? Vamos a ello.


1. Bumb up

Es 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 si así lo requieres.Bumb up

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 hubicar el mouse sobre ella. Genial para catálogos de tiendas virtuales o listados de productos que publicitas.Efecto ampliación o escalado

3. 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.Efecto Fade in and reflect

4. 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:Efecto Stack & Grow

5. Efecto Crooked photo

En este ejemplo rotamos la imagen hacia el lado izquierdo 7 grados, pero podemos personalizarlo completamente cambiando el valor “-7deg” al valor que a ti más te guste. Efecto Crooked photo

 

Ahora que ya conoces estos efectos y sabes como aplicarlos, es momento de que los pongas en practica para hacer mas atractiva tu web.