Nuestros gravatars se levantan

@ 31 . marzo . 2010

Anoche estuve jugando un poco con el CSS del blog, y se me ocurrió dar un efecto a los gravatares en los comentarios.

Para ver bien el efecto, con sombra y todo necesitas estar con Firefox, Chrome, Safari o cualquier navegador que soporte CSS3 (no te sirve Internet Explorer).

Deja un comentario o visita otro post con comentarios, pon el cursor del mouse encima del gravatar y veras un pequeño efecto.

Para los interesados el CSS es:

.gravatar:hover { position: relative; top: -5px; left: -5px;}

Y para mejorar el efecto, cuando el gravatar se levanta alejo un par de pixeles la sombra y le dí un poco más de blur.

Las sombras en CSS3 son con box-shadow.

Y listo, nuestros avatares desde ahora estan flotando.

Autor del post: DanielSemper: @aeromental + Facebook

Aeromental Diseño
«
»
← 
Newer Comments  →
  • javier

    post de prueba XD

  • stockli

    Veremos con una prueba.

    Saludos

  • Luis

    apoco sí?

  • Fjeno

    Pensar que yo tengo gravatar hace rato D: !!! y no tenía idea, siempre me pregunte donde cambiar mi avatar :P …

    saludos!

    PD el textbox de Página Web sigue borrando el contorno cada vez que lo seleccionas con tabulador (TAB)

  • vlas

    viejo, al cargar tu pagina me esta dando este problema, no se si alguien mas lo tiene:

    la pagina empieza a cargar y el navegador se congela for unos segundos sin dejarme ir a ninguna otra pestana hasta que tu pagina se carge. no se si sea algun script.

    gracias

  • Raponchi

    Tengo opera 10.51 pero creo que el efecto no funciona, solo veo un borde gureso en la imagen y al poner el mouse encima se desplaza completa con el borde incluido..

  • Youtube videos

    La verdad es que queda super chulo. Ahora solo falta convencer a la gente que se haga su propio gravatar.

  • la vida se vive

    Vaya cool

  • Alex Rodríguez

    Saludooss!!

    No pss si se ve cool!!!!

  • Escribí Opera cuando en verdad pensé en Safari. Ya corregí.

    Raponchi, las sombras de CSS3 no funcionan en Opera 10, pero supuestamente si en Opera 10.5 que es tu versión, no lo tengo instalado así que no podría confirmarlo.

    vlas:

    ¿en serio?, a mi no me pasa (de hecho abro varias páginas a la vez en otras pestañas), espero que no le pase a nadie más. Hace tiempo que no instalo ningún nuevo plugin ni nada.

    Fjeno:

    Lo del Textbox de Página Web es intencional que sea sólo una línea horizontal, es para quitarle importancia ante los demás textboxs, por eso también lo puse a la derecha. Mucha gente pensaba que era obligatorio llenar ese campo y comentaban con google.com de página web o algún otro invento XD

  • Tomx

    A ver……

  • Andres Oso

    Probando!

  • iXMB

    Wow!! ya lo estuve probando antes de postear y si se ve chulo!
    Tendré que ponerme a leer un poco para hacer mis pruebas de todo esto, ya que me llama mucho la atención lo de paginas web y asi.

    Saludos y sigue asi.

  • Ahriman

    Me encanta el CSS sin JavaScript se pueden hace rmuchas cosas interesantes, debería aprender sobre esto =D

  • Nekromancer

    Avalancha de comentarios para ver levantarse el Gravatar Propio XD

←  
Newer Comments  →