ACTUALIZACIÓN: Puedes ver también 4 efectos con CSS3 para los textos 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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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; } |
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.
|
1 2 3 4 5 6 7 |
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) } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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; } |
4. Efecto Crooked photo
En este ejemplo rotamos la imagen hacia el lado izquierdo 7 grados, pero podemos personalizarlo completamente cambiando el valor «-7deg».
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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); } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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); } |
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.
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
Excelente post!!! me sirvio mucho!! saludos!
Muy útil, sin JS.
Muchas gracias.
Estaría bueno que en la descripción de cada efecto muestres un ejemplo en funcionamiento
Asi es mas rapido aún
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
Muchas gracias, excelentes y muy fácil de implementar.
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
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
Muy lindos efectos !! Felicidades y gracias.
hola una pregunta las cookies almacenan informacion para uno como dueño del sitio ? si es asi donde los almacena. gracias
Buenas tardes estoy interesada en mas códigos css3 para animaciones, muy buena tu publicacion
Existen muchos ejemplos funcionales y otros donde solo tienes que crear un proyecto ejemplo para ver su complementación.
muy interesante, gracias por el aporte…
excelent
Muchas gracias amigo, me ayudaste 🙂 ahora mi blog esta mejor, cuando publicaras mas efectos para html5, saludos amigo.
en el ejemplo dos te falto un punto y coma al final ! muy buenos los efectos
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
Saludos Jose A. como estas.,
Veo que eres experto en PHP.,
Me gustaria mucho contarte con un proyecto que estoy desarrollando y no tengo ni idea como hacer.,
Ya he realizado algunas consultas y formularios de registro en Php., pero estos son muy sencillos porque manejan el registro de la informacion en una Sola tabla
Pero He llegado a un puto en donde debo:
1) consultar informacion de varias tablas y mostrar la informacion de varias tablas y usando Tabs
2) grabar informacion en varias tablas pero manejando la informacion en un solo formulario
3) controla el ingreso por tipo de usaurio
4) la creacion e impresion de certificados en PHP online., (Me explico si tu asistes a un curso cuando se acaba este curso recibiras un certificado., queremos hacer la impresion digital., csa que puedas imrpimir el certificado varias veces sin tener que hacerlo varias veces cada vez que necesites)
5) Me gustaria saber si me puedes dar unos tipos o si te puedo enviar la descripcion de pryecto para ver que consejos me das o soluciones o ejemplo
Graciasy quedo a la espera de tu respuesta
Hola Willian,
si quieres puedes escribir a info@kidoestudio.com y así me cuentas en detalle todo lo que necesitas y puedo hacerte un presupuesto a medida.
Un saludo!
Gracias por el aporte.
Hola nesesito saber como puedo lograr ponerle una id o ndentificar a la imagen a la que le voy a poner los efectos es que se me ponen a todas las imagenes y deseo poner la id/class o el que sea en html osea que pondre el codigo directo el la wed con gracias espero que me ayudes.
Gracias por tu artículo, lo pondré en práctica
Gracias por esos efectos, tienes una bonita página web la verdad
Me da envidia ojala yo supiera como tu
¡Hola! Me ha encantado el artículo sobre los efectos CSS3 para imágenes, especialmente porque ofrece ejemplos simples pero muy efectivos para mejorar el diseño web. Personalmente, he encontrado ideas geniales para aplicar en mis proyectos.
Sin embargo, si estás buscando explorar aún más opciones, te recomendaría echar un vistazo a posicionamiento-web-barcelona.com. También tienen recursos excelentes sobre diseño web y efectos CSS3 que podrían complementar lo que has aprendido aquí. ¡No dudes en consultarlos y comparar!
¡Gracias por compartir este contenido útil! 😊