Iconos de redes sociales solo con CSS

Buenas, este tutorial se trata de crear iconos a diferentes redes sociales pero usando sólo CSS un gran método de atraer a usuarios y más el estilo.

La idea es simple pero claro, las definiciones de cada modelo son muy complejas y sólo tienen como objeto destacar las cualidades de las nuevas propiedades del CSS3, comenzaremos indicando 3 pasos los cuales lograran integran estos iconos en tu blog o en tu web.

Paso #1 El html es una lista común:

<ul id="typo"> <li id="Trss"><a href="javascript:void(0);" title="Suscribirse via RSS ">RSS</a></li> <li id="Ttwitter"><a href="javascript:void(0);" title="Compartir en Twitter">Twitter</a></li> <li id="Tfacebook"><a href="javascript:void(0);" title="Compartir en Facebook">Facebook</a></li> </ul>

Paso #2 ahora para el siguiente paso ve a: 

Blogger>Plantilla>Editar HTML

Dentro de el editor preciona las teclas Ctrl+F para buscar lo siguiente:

</b:skin>

Y pega antes de ella el siguiente código:

ul#typo { font: 0.875em/1 Arial, sans-serif; list-style: none; overflow: hidden; padding: 0; margin: 0; } ul#typo li { float: left; height: 66px; margin: 20px 20px 0 0; width:66px; } ul#typo li a { border: 1px solid transparent; display: block; height: 64px; overflow: hidden; line-height: 64px; text-decoration: none; width: 64px; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } ul#typo li a:hover, ul#typo li a:focus, ul#typo li a:active { border-color: #000; opacity: 0.8; }

Paso #3 La parte sofisticada es la creación de cada uno de esos iconos y aquí hay tres ejemplos.

Igualmente pega este código antes de la etiqueta señalada en el Paso #2

#Tfacebook a { position:relative; border-color:#3c5a98; text-transform:lowercase; text-indent:34px; letter-spacing:10px; font-weight:bold; font-size:64px; line-height:66px; color:#fff; background:#3c5a98; -moz-box-shadow:0 0 4px rgba(0,0,0,0.4); -webkit-box-shadow:0 0 4px rgba(0,0,0,0.4); box-shadow:0 0 4px rgba(0,0,0,0.4); } #Ttwitter a { position:relative; border-color:#a8eaec; text-transform:lowercase; text-indent:20px; letter-spacing:40px; font:bold 60px/1 Tahoma, sans-serif; line-height:60px; color:#76DDF8; background:#daf6f7; text-shadow: 3px 3px 1px #fff, -3px -3px 1px #fff, 3px -3px 1px #fff, -3px 3px 1px #fff; -moz-box-shadow:0 0 4px rgba(0,0,0,0.4); -webkit-box-shadow:0 0 4px rgba(0,0,0,0.4); box-shadow:0 0 4px rgba(0,0,0,0.4); /* standards version last */ background:-webkit-gradient(linear, left top, left bottom, from(#dbf7f8), to(#88e1e6)); background:-moz-linear-gradient(top, #dbf7f8, #88e1e6); background:linear-gradient(top, #dbf7f8, #88e1e6); } #Trss a { position:relative; width:60px; padding:0 2px; border-color:#ea6635; text-transform:lowercase; text-indent:-186px; font-size:64px; font-weight:bold; color:#fff; background:#e36443; -moz-box-shadow:0 0 4px rgba(0,0,0,0.4); -webkit-box-shadow:0 0 4px rgba(0,0,0,0.4); box-shadow:0 0 4px rgba(0,0,0,0.4); /* standards version last */ background:-webkit-gradient(linear, left top, left bottom, from(#f19242), to(#e36443)); background:-moz-linear-gradient(top, #f19242, #e36443); background:linear-gradient(top, #f19242, #e36443); } #Trss a:before { content:"\00a0"; position:absolute; bottom:10px; left:10px; width:12px; height:12px; background:#fff; -moz-border-radius:12px; -webkit-border-radius:12px; border-radius:12px; } #Trss a:after { content:"\00a0"; position:absolute; bottom:10px; left:10px; width:22px; height:22px; border-style:double; border-width:24px 24px 0 0; border-color:#fff; -moz-border-radius:0 50px 0 0; -webkit-border-radius:0 50px 0 0; border-radius:0 50px 0 0; }

1.  Y listo! aquí el resultado:

• RSS
• Twitter
• Facebook

1. Comentar es Agradecer.

¡Compártelo!

Tweet