22 octubre, 2013 Jose Antonio Vila

5 efectos con CSS3 para las imágenes de tu web

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:

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.

Raiola Networks
Tagged: , , ,

Sobre mí

Jose Antonio Vila Desarrollando webs desde hace más de 10 años. Hace mucho que dejé atrás la vida en agencias y me abracé a la vida de freelance.
🖥 Si tienes algún proyecto en mente, contacta conmigo.
📖 Si quieres leer más cosas que escribo, echa un ojo a mi web personal

Comments (24)

  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

    • Johann

      Existen muchos ejemplos funcionales y otros donde solo tienes que crear un proyecto ejemplo para ver su complementación.

  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

  9. Willian Michel Vélez Candia

    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

  10. martin

    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.

Responder a Adolfo Cancelar respuesta

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