Morton 10 de abril de 2011 a las 07.38
   Imprimir artículo
elWebmaster.com

CSS3: Impactante efecto de transparencia para tus íconos sociales


css3wide1En la mayoría de los sitios web que visitamos a diario, a la hora de compartir algo que nos ha gustado en las redes sociales, veremos el mismo grupo de íconos dispuestos de una manera repetitiva y monótona. Si queremos que los íconos de nuestro sitio web se destaquen, podemos utilizar este sencillo e impactante efecto para lograrlo.

Fuente original del artículo: Marcofolio
Traducción realizada por
elWebmaster.com

Haz clic en este enlace para ver una demostración del efecto >>

Este truco funciona con todos los navegadores que utilizan webkit y en Firefox 4.  Tambien puedes ver la versión jQuery del efecto, en el caso de que necesites respaldar la compatibilidad (notarás que visualmente, los resultados son idénticos).

Lo primero es definir su estructura HTML, de la siguiente manera:

  1. <ul class="social">
  2.    <li class="delicious">
  3.       <a href="http://www.delicious.com/">
  4.          <strong>Delicious</strong>
  5.       </a>
  6.    </li>
  7.    <li class="digg">
  8.       <a href="http://digg.com/">
  9.          <strong>Digg</strong>
  10.       </a>
  11.    </li>
  12.    <!-- M√°s servicios -->
  13. </ul>

Como puedes ver, usaremos una lista no ordenada con items que contendran los enlaces. Habr√°s notado el uso del tag <strong>. Esto nos servir√° m√°s adelante…

Pasemos al CSS, empezando por el estilo b√°sico:

[CSS]
.social { list-style:none; }
.social li { display:inline; float:left; }
.social li a { display:block; width:48px; height:48px; position:relative; }
.social li a strong { position:absolute; left:20px; top:-1px;
text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7);
border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

li.delicious { background-image:url(“../images/delicious.png”); }
li.digg { background-image:url(“../images/digg.png”); }
[/CSS]

Y a continuación, crearemos nuestra animación utilizando puro CSS3:

[CSS]
.social:hover li { opacity:0.2; }

.social li { transition-property: opacity; transition-duration: 500ms; }
.social li a strong { opacity:0;
transition-property: opacity, top; transition-duration: 300ms;
}

.social li:hover { opacity:1; }
.social li:hover a strong { opacity:1; top:-10px; }
[/CSS]

Haremos objetivo una propiedad que deba ser incluida en la animación, en este caso la opacidad. Tambien configuramos la duración de la animación.

Ahora, en su estado hover, haremos que estas propiedades vean cambiados sus valores. Ya que transition-property ha sido configurado, ¡El navegador hará la animación por nosotros! Cuando sale del estado hover, las clases son revertidas, con su respectiva animación.

Y eso es todo. En el caso de que te encuentres con problemas de compatibilidad, puedes utilizar el siguiente código jQuery para realizar el mismo efecto:

  1. $("#jquery li").each(function() {
  2.    $("a strong", this).css("opacity", "0");
  3. });
  4.  
  5. $("#jquery li").hover(function() { // Mouse over
  6.    $(this)
  7.       .stop().fadeTo(500, 1)
  8.       .siblings().stop().fadeTo(500, 0.2);
  9.        
  10.    $("a strong", this)
  11.       .stop()
  12.       .animate({
  13.          opacity: 1,
  14.          top: "-10px"
  15.       }, 300);
  16.      
  17. }, function() { // Mouse out
  18.    $(this)
  19.       .stop().fadeTo(500, 1)
  20.       .siblings().stop().fadeTo(500, 1);
  21.      
  22.    $("a strong", this)
  23.       .stop()
  24.       .animate({
  25.          opacity: 0,
  26.          top: "-1px"
  27.       }, 300);
  28. });

¬°Esperamos que te sea de utilidad!

Haz clic en este enlace para ver una demostración del efecto >>

Fuente original del artículo: Marcofolio
Traducción realizada por
elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (3)

  1. CSS3: Impactante efecto de transparencia para tus √≠conos sociales … | Midia Social dice:

    […] Original post: CSS3: Impactante efecto de transparencia para tus √≠conos sociales … […]

  2. CSS3: Impactante efecto de transparencia para tus √≠conos sociales « ITecnoSolution dice:

    […] Lo primero es definir su estructura HTML, de la siguiente manera: PLAIN TEXT […]

  3. dhuertas dice:

    Muy impresionante, y la cantidad de usos tambi√©n es para explotarse… Gracias por el tip…

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder