Iconos sociales con efecto hechos con CSS3

La mayoria sabra lo mucho que consumen los plugins de wordpress. Es bien sabido que mientras menos tengas mejor sera el rendimiento de tu blog. Por eso hoy les quiero mostrar como hacer una sencilla barra de iconos sociales con un lindo efecto realizada con CSS3, de esta manera se ahorran tener que usar un plugin para mostrar solo para mostrar unos simples iconos, y por el otro lado, si ya estaban mostrando imagenes de iconos , ahora podran agregarle un agradable efecto.

Antes de comenzar vean como queda terminado:

Sin efecto
Con efecto

Lo que necesitan hacer es sencillo y son unos pocos pasos:

Paso 1- Buscar las imagenes que van a usar. Les recomiendo que sean imagenes sencillas, livianas y elegantes.

Paso 2- En un widget de texto agregan lo siguiente:

<ul class="social" id="css3">
   <li class="rss">
      <a rel="nofollow" href="http://feeds.feedburner.com/ProyectoCasa">
         <strong>RSS</strong>
      </a>
   </li>
   <li class="twitter">
      <a rel="nofollow" href="http://twitter.com/sefsinalas">
         <strong>Twitter</strong>
      </a>
   </li>
   <li class="facebook">
      <a href="http://www.facebook.com/proyectocasa">
         <strong>Facebook</strong>
      </a>
   </li>
   <li class="delicious">
      <a rel="nofollow" href="http://del.icio.us/post?url=proyectocasa.info/">
         <strong>Delicious</strong>
      </a>
   </li>
</ul>
<br/><br/>
<div class="clear"></div>

Obviamente cambiando los enlaces por los correspondientes a su blog.

Paso 3- En el archivo style.css de su blog copian lo siguiente al final del archivo:

/* SOCIAL ICONS - GENERAL */
.social { list-style:none; margin:10px auto; width:464px; }
.social li { display:inline; float:left; background-repeat:no-repeat; }
.social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; }
.social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999;
 text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7);
 -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

li.delicious { background-image:url("imagenes/delicious.png"); }
li.facebook { background-image:url("imagenes/facebook.png"); }
li.twitter { background-image:url("imagenes/twitter.png"); }
li.rss { background-image:url("imagenes/rss.png"); }

#css3:hover li { opacity:0.2; }

#css3 li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;
 -moz-transition-property: opacity; -moz-transition-duration: 500ms; }
#css3 li a strong { opacity:0;
 -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms;
 -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }

#css3 li:hover { opacity:1; }
#css3 li:hover a strong { opacity:1; top:-10px; }

Eso es todo La verdad no se si funciona en Internet Explorer (ni me interesa), pero si funciona en Opera, Chrome, Firefox y en todos los navegadores decentes.

No hay nada dificil, es solo copiar y pegar. Lo unico que ustedes tienen que cambiar a mano son las urls de los servicios sociales y las imagenes.

Visto en marcofolio (ingles)

perro

Ingeniero en Informática. Programador en PHP y Angular. Lo que mas adoro en el mundo es el conocimiento. Y el anime....y Japón...y el running...y bloguear claro y algunas otras cientos de cosas. Sigo buscando la manera de hacer mi primer millón.

2
Comenta!

avatar
trackback

[…] unos dias les mostraba como hacer una barra social con CSS3, pero un lector del blog me mando un mail preguntandome como hice ese widget social que tengo a la […]

Carlos

Muy buen aporte con esto de las barras sociales, implementare uno en mi sitio y te paso el dato.

Saludos.