Iconos sociales sólo con CSS

Este es otro experimento de Nicolas Gallagher. Se trata de crear íconos a diferentes redes sociales pero, usando sólo CSS.

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.

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>

Y ahora, las definciones. Primero que nada, las generales:

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;
}

La parte sofisticada es la creación de cada uno de esos íconos y aquí hay tres ejemplos.

• RSS
• Twitter
• Facebook

#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;
}