5 Efectos con CSS3 para imágenes de tu web

CSS3 (sobre todo en su conjunto con HTML5) está abarcando mucho terreno y nos permite multitud de efectos geniales con unas pocas líneas en nuestras hojas de estilo. Aquí te dejamos una muestra de 5 efectos simples y llamativos para tu web.


  • [message]
    • ##edit## 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:
[img{ height: 100px; width: 300px; margin: 15px 0; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; } img:hover { height: 133px; width: 400px; margin-left: -50px; }]

  • [message]
    • ##edit## 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.
[img:hover{ -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5) }]

  • [message]
    • ##edit## 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.
[img{ border: 5px solid #ccc; float: left; margin: 15px; -webkit-transition: margin 0.5s ease-out; -moz-transition: margin 0.5s ease-out; -o-transition: margin 0.5s ease-out; } img:hover { margin-top: 2px; }]

  • [message]
    • ##edit## 4. Efecto Crooked photo
      • En este ejemplo rotamos la imagen hacia el lado izquierdo 7 grados, pero podemos personalizarlo completamente cambiando el valor “-7deg”.
[img { margin: 20px; border: 5px solid #eee; -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2); -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2); box-shadow: 4px 4px 4px rgba(0,0,0,0.2); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; } img:hover { -webkit-transform: rotate(-7deg); -moz-transform: rotate(-7deg); -o-transform: rotate(-7deg); }]

  • [message]
    • ##edit## 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.
[img { margin: 25px; opacity: 0.8; border: 10px solid #eee; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1))); } img:hover { opacity: 1; -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4))); -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); box-shadow: 0px 0px 20px rgba(255,255,255,0.8); }]

Espero puedan ser de mucha utilidad...

¿Qué te pareció?

Nombre

Adblock Adobe Flash AJAX Algoritmos Anuncios API Blogger Blogging Buscadores chrome web store Código Fuente CSS CSS 3 CV Dart Depurar Desarrollo Web Diseño Diseño Grafico Diseño Web Documentación Efectos Facebook Firefox Foros Fotografias Frances Bean Cobain Gadgets General Geolocalizar Google Google Analytics Google Chrome Google Imágenes Google Music Google Reader Google+ Herramientas Hotmail HTML HTML5 Imágenes Información Informática Instagram Internet Internet Explorer Internet Explorer 10 Javascript jQuery Kurt Cobain Librerías Marketing Microsoft Monetización Web Mozilla Firefox 8 MySQL Navegadores Noticias Optimización Web PageSpeed Insights PayPal Personal Photoshop PHP Plantillas Programación Programas Programas Web Proyectos Redes Sociales ScreensHots Scripts Seguridad SEO Servicios Web Sesiones Snippets SoniTube Spam Steve Jobs Templates Themes Thumbalizr Tips Trucos Tutoriales Twitter Utilidades Vectores Virus Web Widgets Windows 7 Windows 8 Windows Mobile Windows XP WordPress XSS Youtube
false
ltr
item
OnSoni: 5 Efectos con CSS3 para imágenes de tu web
5 Efectos con CSS3 para imágenes de tu web
https://2.bp.blogspot.com/-jz5GSt1R-jY/WAZNQPlYYnI/AAAAAAAAIGM/zvfO5SkFpDkefeTLlMgTcjXCxIhpJfQAACLcB/s400/5efectoscss3-onsoni.jpg
https://2.bp.blogspot.com/-jz5GSt1R-jY/WAZNQPlYYnI/AAAAAAAAIGM/zvfO5SkFpDkefeTLlMgTcjXCxIhpJfQAACLcB/s72-c/5efectoscss3-onsoni.jpg
OnSoni
http://www.onsoni.com/2016/10/5-Efectos-con-CSS3-para-imagenes-de-tu-web.html
http://www.onsoni.com/
http://www.onsoni.com/
http://www.onsoni.com/2016/10/5-Efectos-con-CSS3-para-imagenes-de-tu-web.html
true
8818836675902573334
UTF-8
Not found any posts Not found any related posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU Etiqueta ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Contents Ver también Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copiar todo el codigo Seleccionar todo el Código Todo el código se ha copiado en el portapapeles Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy