Blog

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:

Iconos sociales con efecto hechos con CSS3

Sin efecto

Iconos sociales con efecto hechos con CSS3

Con efecto

Tambien pueden verlo funcionando en mi blog de diseño de interiores.

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:

?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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:

?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* 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)

Deja una respuesta