Iconos sociales que cambian de color y giran al pasar el cursor con css3

Ya el titulo les ha explicado todo lo que haremos esta vez. No hace mucho publicamos la entrada "Iconos sociales que cambian de color al pasar el mouse" en la cual las imágenes cambiaban de color al pasar el cursor, pero se utilizaban dos imágenes diferentes, esta vez gracias a CSS3 podemos conseguir un efecto similar pero pasando de tener una imagen en blanco y negro a que esta este a colores cuando coloquemos el cursor sobre esta y no solo eso sino también darles una forma circular o dejarlo en forma de cuadro. Por otra parte el estilo de los iconos nos simula una sombra, como si hubiera una luz en la esquina superior izquierda.

Lamentablemente el efecto  de cambio de color solo funciona con Google Chrome Opera y Safari, pero el giro 360 y la transformación de forma si funcionan en Mozilla Firefox, también hay que mencionar que con IE no funciona ninguno de estos lindos efectos.

Les traigo un demo también donde pueden ver trabajando estos iconos sociales en diferentes partes del blog.

Es muy fácil de añadir a nuestro blog estos iconos sociales.

Así que sin mas vamos al tutorial!!!

Primero que nada debemos saber donde lo queremos colocar, estos quedan perfecto en el pie de nuestra pagina web o también en una de las columnas,pero igual moviendole un poco el codigo podemos colocarlos para que estén flotando en alguna esquina del blog, esto lo veremos al final de la entrada.

Como pueden ver en la imagen del encabezado de la entrada vemos que hay dos tipos, primero veremos el código para los iconos redondos y luego para los cuadrados.

1.- Nos vamos a Diseño > Agregar Gadget > Elegimos HTML/JavaScript y dentro de este pegamos lo siguiente:

  <style type="text/css">

.Soldier-Social img{
border-radius: 50%;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;

}

.Facebook-Social{
-webkit-filter: grayscale(100%);

}

.Facebook-Social:hover{
-webkit-filter: grayscale(0%);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);

}


.Twitter-Social{
-webkit-filter: grayscale(100%);
}

.Twitter-Social:hover{
-webkit-filter: grayscale(0%);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);

}

.GooglePlus-Social{
-webkit-filter: grayscale(100%);
}

.GooglePlus-Social:hover{
-webkit-filter: grayscale(0%);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);

}

.YouTube-Social{
-webkit-filter: grayscale(100%);
}

.YouTube-Social:hover{
-webkit-filter: grayscale(0%);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);

}


.RSS-Social{
-webkit-filter: grayscale(100%);
}

.RSS-Social:hover{
-webkit-filter: grayscale(0%);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);

}

</style>

<div class="Soldier-Social">
<!--Facebook--><a href="https://www.facebook.com/" target="_blank"><img class="Facebook-Social" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi42pVJngX6jfC0qKrBJyDEmg4nmssfnr5kg2NXp0wU-IseHBBuxJXu_mNBBIN5A4Pp5SJAKIpXJs8uyW-X406AeAc9t6vAqrf8RXzMBuI2icPXg7CBIf9CHz5D4ZrpIJ3u1k7HYegg-aRO/s1600/Facebook.png" width="48" height="48"></a><!--Twitter--><a href="https://twitter.com/" target="_blank"><img class="Twitter-Social" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjenM-68XbN0mOa1B0J0q-x3LFHYYwY79DXPnuBQpuAX_WQqJzOjLEMBOBjPrUKab2Mx7ZZtYTeMwveZ5VFcZi1BU3kb5bFCPDhf_cW4SsPIwb1vGtfbCzSqZaD5KKubMRqKwZs9VwoEqQK/s1600/Twitter.png" width="48" height="48"></a><!--Google Plus--><a href="https://plus.google.com/" target="_blank"><img class="GooglePlus-Social" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNKMpBzp-uplmel8KEgbPoNHVcHyyJdlXJptVSLxAza_IEvhsdCtgdyt3Q74pRMiXFAsiA1T-f9xZvi-3lxhjZgrAi_e0BDS2JEYJpRlxUtykim0KpHc56kIsrxK5_FJCNwUOZ8ppzDUUS/s1600/Google-plus.png" width="48" height="48"></a><!--Youtube--><a href="http://www.youtube.com/" target="_blank"><img class="YouTube-Social" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgFj0v88V4YNdgmxyU5pq692f6v5tW-mEFL5kSabVZM3vSpc8AiZfptZBhCv80-bXulyooQKAyEMCyVPUQqVRZmWBowo9TMt9p55qvu-70PywrLGZs4rJMXsWcwLq8iJiUt3VeuTzni5ci/s1600/Youtube.png" width="48" height="48"></a><!--RSS--><a href="http://feedburner.google.com/" target="_blank"><img class="RSS-Social" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxYxIgtfVTIbIhLu6kIrz1UU3dTjzj89YZu8bzzGRCbrhJmqciDguSO42QadOSwnXanX_owiXDB-maGqsw3jXN0lMP5GViWSRgtEMo2LhmRBbIpp-HJCfk2Xe8VZEU3MXFUhp3pvHZ2i8e/s1600/RSS.png" width="48" height="48"></a> </div>

2.- Ahora solo debemos cambiar las URL de enlace en el código por las nuestras estas están en color Azul, acá se los pongo de nuevo:

<div class="Soldier-Social">
<!--Facebook--><a href="https://www.facebook.com/" target="_blank"><img class="Facebook-Social" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi42pVJngX6jfC0qKrBJyDEmg4nmssfnr5kg2NXp0wU-IseHBBuxJXu_mNBBIN5A4Pp5SJAKIpXJs8uyW-X406AeAc9t6vAqrf8RXzMBuI2icPXg7CBIf9CHz5D4ZrpIJ3u1k7HYegg-aRO/s1600/Facebook.png" width="48" height="48"></a><!--Twitter--><a href="https://twitter.com/" target="_blank"><img class="Twitter-Social" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjenM-68XbN0mOa1B0J0q-x3LFHYYwY79DXPnuBQpuAX_WQqJzOjLEMBOBjPrUKab2Mx7ZZtYTeMwveZ5VFcZi1BU3kb5bFCPDhf_cW4SsPIwb1vGtfbCzSqZaD5KKubMRqKwZs9VwoEqQK/s1600/Twitter.png" width="48" height="48"></a><!--Google Plus--><a href="https://plus.google.com/" target="_blank"><img class="GooglePlus-Social" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNKMpBzp-uplmel8KEgbPoNHVcHyyJdlXJptVSLxAza_IEvhsdCtgdyt3Q74pRMiXFAsiA1T-f9xZvi-3lxhjZgrAi_e0BDS2JEYJpRlxUtykim0KpHc56kIsrxK5_FJCNwUOZ8ppzDUUS/s1600/Google-plus.png" width="48" height="48"></a><!--Youtube--><a href="http://www.youtube.com/" target="_blank"><img class="YouTube-Social" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgFj0v88V4YNdgmxyU5pq692f6v5tW-mEFL5kSabVZM3vSpc8AiZfptZBhCv80-bXulyooQKAyEMCyVPUQqVRZmWBowo9TMt9p55qvu-70PywrLGZs4rJMXsWcwLq8iJiUt3VeuTzni5ci/s1600/Youtube.png" width="48" height="48"></a><!--RSS--><a href="http://feedburner.google.com/" target="_blank"><img class="RSS-Social" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxYxIgtfVTIbIhLu6kIrz1UU3dTjzj89YZu8bzzGRCbrhJmqciDguSO42QadOSwnXanX_owiXDB-maGqsw3jXN0lMP5GViWSRgtEMo2LhmRBbIpp-HJCfk2Xe8VZEU3MXFUhp3pvHZ2i8e/s1600/RSS.png" width="48" height="48"></a> </div>

Segundo Diseño.

Ahora si queremos tener el otro diseño el que es cuadrado solamente tenemos que eliminar la linea border-radius: 50%; dentro del css que esta al principio del código, podemos ver esta linea a continuación en color naranja.

 <style type="text/css"> .Soldier-Social img{ border-radius: 50%; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; } .Facebook-Social{

Colocar iconos para que floten.

Si queremos que nuestros iconos sociales estén flotando solo debemos agregar el siguiente código en donde top es arriba y left es izquierda, si queremos cambiar la ubicación solo debemos remplazar el top por bottom si la quieres abajo, y  left por right si lo quieres a la derecha. 

Los 10px son la distancia, esto para que no quede tan pegado a la esquina donde lo ubiquemos.

<center style='position:fixed; top:10px; left:10px;' >

Este código lo agregaremos entre las lineas:

</style>
<div class="Soldier-Social">

quedando asi:

</style>
<center style='position:fixed; top:10px; left:10px;' >
<div class="Soldier-Social">

 y al final del código colocamos:

</center>

Quedaría así:

<center style='position:fixed; top:10px; left:10px;' >
<div class="Soldier-Social">
<!--Facebook--><a href="https://www.facebook.com/" target="_blank"><img class="Facebook-Social" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi42pVJngX6jfC0qKrBJyDEmg4nmssfnr5kg2NXp0wU-IseHBBuxJXu_mNBBIN5A4Pp5SJAKIpXJs8uyW-X406AeAc9t6vAqrf8RXzMBuI2icPXg7CBIf9CHz5D4ZrpIJ3u1k7HYegg-aRO/s1600/Facebook.png" width="48" height="48" /></a><!--Twitter--><a href="https://twitter.com/" target="_blank"><img class="Twitter-Social" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjenM-68XbN0mOa1B0J0q-x3LFHYYwY79DXPnuBQpuAX_WQqJzOjLEMBOBjPrUKab2Mx7ZZtYTeMwveZ5VFcZi1BU3kb5bFCPDhf_cW4SsPIwb1vGtfbCzSqZaD5KKubMRqKwZs9VwoEqQK/s1600/Twitter.png" width="48" height="48" /></a><!--Google Plus--><a href="https://plus.google.com/" target="_blank"><img class="GooglePlus-Social" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNKMpBzp-uplmel8KEgbPoNHVcHyyJdlXJptVSLxAza_IEvhsdCtgdyt3Q74pRMiXFAsiA1T-f9xZvi-3lxhjZgrAi_e0BDS2JEYJpRlxUtykim0KpHc56kIsrxK5_FJCNwUOZ8ppzDUUS/s1600/Google-plus.png" width="48" height="48" /></a><!--Youtube--><a href="http://www.youtube.com/" target="_blank"><img class="YouTube-Social" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgFj0v88V4YNdgmxyU5pq692f6v5tW-mEFL5kSabVZM3vSpc8AiZfptZBhCv80-bXulyooQKAyEMCyVPUQqVRZmWBowo9TMt9p55qvu-70PywrLGZs4rJMXsWcwLq8iJiUt3VeuTzni5ci/s1600/Youtube.png" width="48" height="48" /></a><!--RSS--><a href="http://feedburner.google.com/" target="_blank"><img class="RSS-Social" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxYxIgtfVTIbIhLu6kIrz1UU3dTjzj89YZu8bzzGRCbrhJmqciDguSO42QadOSwnXanX_owiXDB-maGqsw3jXN0lMP5GViWSRgtEMo2LhmRBbIpp-HJCfk2Xe8VZEU3MXFUhp3pvHZ2i8e/s1600/RSS.png" width="48" height="48" /></a> </div>
</center>