miércoles, 25 de diciembre de 2013
Iconos Sociales que giran y cambian de color al pasar el cursor
Existen diferentes tipos de Iconos que giran, pero ninguno tan impresionante que estos, que no solamente giran sino que a la vez cambian de color al pasar el cursor. Puedes ver los gadgets en funcionamiento en este blog de pruebas el gadget está situado en la barra lateral del blog.
<style type="text/css">
.MilTrucosBlogger-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="MilTrucosBlogger-Social">
<!--Facebook--><a href="URL FACEBOOK" target="_blank"><img class="Facebook-Social" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_TNH9omGObsh91NRMPzwnIx2YAZ5agoknKNB05JYC_u_IWonPGh5la5FYNVvh08D41JGVYRQwo9vBzQr15h-dkloLMH-xEl1pO1rEE2xZD4F7vcX4369MhMUiBmPOrn2Xw6sdZl0sJjuI/s1600/Facebook.png" width="48" height="48"></a>
<!--Twitter--><a href="URL TWITTER" target="_blank"><img class="Twitter-Social" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvW5y6nEQfn4RfzgY2JoxdCnEbQ5wOSygPekpcwaWttMgaYXnFu3CUA6CHFAehLz0HU9HW4mC_fbFLJ2TAwUT5_W-Nyiuqml5WDi6FIWTs46QGmbeZtD4SPMPBlJuoRKJgAy0hPZ6PnXuw/s1600/Twitter.png" width="48" height="48"></a>
<!--Google Plus--><a href="URL GOOGLE PLUS" target="_blank"><img class="GooglePlus-Social" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_q9oEwaZip3Lgq83AQcR4JH1NxXJhiBJtKahVCkvKD3E5NzHqiwW0ZG4He90iGb1ti2wszS-5e6rkPQDBy_8y_Ws8O0mfz_ejaf2TNBj3onLUigx46FRiBkV7j5MbIEi1BDdDfNRHBLZ4/s1600/Google-plus.png" width="48" height="48"></a>
<!--Youtube--><a href="URL YOUTUBE" target="_blank"><img class="YouTube-Social" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbd5pafMjlWAxb_6jJUYE8pk5lU6h832l0kg2-eCuVOpPOWBQzvO9U6pJBlJIBby086cfiaAY59IwY4MTlzlxcAPEOwhY5E_5QvfRDN2hV3S1PrzYdVC_09zlf5uQtwoQ9ODtIAdYrJHBT/s1600/Youtube.png" width="48" height="48"></a>
<!--RSS--><a href="URL RSS" target="_blank"><img class="RSS-Social" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNoJDAFNWLJtSNwWOnx2iIF1tJcTB8-6LNfUxeWHOZATVtGTvfYitZRr2py_VtBfVbJ7EFcjICaDok7kNIfFnJ-AFNPY8H9BzNHN6VxBTbZbDghkGU0CLRp6MesCzRVPYTKAkfvhYd_qns/s1600/RSS.png" width="48" height="48"></a>
</div>
Reemplaza lo que está en rojo por lo que indica en cada caso.
Nota:
Si deseas que los iconos sean cuadrados, en el código anterior busca:
Y cambia el 50% por 0%
Nota:
Si deseas que los iconos sean cuadrados, en el código anterior busca:
border-radius: 50%
Y cambia el 50% por 0%
Suscribirse a:
Enviar comentarios
(Atom)
0 comentarios:
Publicar un comentario