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.
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; }
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) }
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; }
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); }
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); }
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.
Con el paso de los años, CSS se está haciendo cada vez más potente y… Leer más
Al igual que un artista mejora su técnica con la práctica constante, un programador aprende… Leer más
WordPress es, probablemente, el mayor CMS para la creación de páginas web en el mundo.… Leer más
Guste más o menos, Wordpress está detrás de un alto porcentaje de las webs activas… Leer más
Hoy, la gente de Xataka ha publicado un artículo muy interesante hablando de Estonia. Parece… Leer más
Aunque todos lo conocemos, seguro que hay algún despistado al que lo de Google reCAPTCHA… Leer más
Ver Comentarios
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