Crisant Projects: Iconos Sociales Blue Light

Widget / Redes Sociales

Aqui les traigo el primer widget para este blog espero y les guste.

Caracteristicas

Variacion de Colores
Simple
Moderno
Fácil de Adaptar

Aqui el Codigo HTML

<ul class="align-right social-icon">
              <li class="twitter"><a href="#"></a></li>
              <li class="facebook"><a href="#"></a></li>
              <li class="googleplus"><a href="#"></a></li>
              <li class="rss"><a href="#"></a></li>
              <li class="dribbble"><a href="#"></a></li>
            </ul>

Aqui el Codigo CSS

.social-icon {
margin:0;
padding:0;
list-style:none;
overflow:hidden
}

.social-icon li {
margin-left:10px;
line-height:39px;
float:left
}
.social-icon li:first-child {
margin-left:0
}

.social-icon li a {
display:block;
overflow:hidden;
width:30px;
height:31px;
background-repeat:no-repeat;
background-position:0 0
}
.social-icon .twitter a {
background-position:0 0
}

.social-icon .twitter a:hover{ 
background-position:0 -50px
}

.social-icon .twitter a:active{
background-position:0 -100px
}

.social-icon .facebook a{
background-position:0 -150px
}

.social-icons .facebook a:hover{
background-position:0 -200px
}

.social-icon .facebook a:active{
background-position:0 -250px
}

.social-icon .googleplus a{
background-position:0 -300px
}

.social-icon .googleplus a:hover{
background-position:0 -350px
}
.social-icon .googleplus a:active{
background-position:0 -400px
}

.social-icon .rss a{
background-position:0 -450px
}

.social-icon .rss a:hover{
background-position:0 -500px
}

.social-icon .rss a:active{
background-position:0 -550px
}

.social-icon .dribbble a{
background-position:0 -600px
}

.social-icon .dribbble a:hover{
background-position:0 -650px
}

.social-icon .dribbble a:active{
background-position:0 -700px
}

.social-icon li a {
background-image:url("/icons_social.png")
}

Descarga las imágenes