Saiba como se faz: "Social Media botões sprites e transições de CSS3"
Autor: edilene bds | Publicado: 2014-06-11T13:17:00-07:00

traduzido: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

















"Saiba como se faz: "Social Media botões sprites e transições de CSS3"









"Social Media botões sprites e transições de CSS3"








Isso foi perguntado muitos leitores deste blog, e são os botões para as redes sociais usam hoje em dia, e como prometido, e agora eu não quero mais endividados, porque aqui vai.



Estes botões servem para ligar as suas redes sociais&nbsp;:&nbsp;Facebook&nbsp;,&nbsp;Twitter&nbsp;,&nbsp;Google+&nbsp;,&nbsp;RSS Feed&nbsp;e&nbsp;assinatura de e-mail&nbsp;.coisa que muitos acham atraente é o efeito quando o cursor passa sobre eles, como o ícone de movimentos se enquanto o fundo muda de cor.



Este gadget vai ser visto em duas versões, uma com cinco pequenos botões alinhados horizontalmente, e um 4 botões e alguns mais antigos alinhados em duas colunas.&nbsp;Eles são feitos com sprites e transições CSS3.&nbsp;Ou as versões que vão ser colocados em uma única etapa, ou seja, atingindo ambos os estilos como a estrutura HTML dentro de um gadget,&nbsp;por quê?&nbsp;preguiça ao redor, mas quem . estilos postas em prática o modelo que você pode fazê-lo sem qualquer problema&nbsp;, em seguida, para colocar em seu blog, ir paraDesign | Adicionar um Gadget | HTML / Javascript&nbsp;e cole o código lá botões que você gosta.
Esta é a primeira versão de 5 botões.













E este é o código que você deve colar no seu gadget:



&lt;style&gt;
/* Botones de Redes Sociales - Ciudad Blogger */
.social_bookmarks_container {
width:100%;
height:65px;
padding:0;
position:relative;
}
.social_bookmarks {
position:relative;
float:left;
margin:0;
padding:0;
}
.social_bookmarks li {
margin:0 0 1px 1px;
height:57px;
width:57px;
list-style:none;
float:left;
padding:0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;&nbsp;
transition: all 0.4s ease-in-out;
}
.social_bookmarks li a {
float:left;
width:57px;
line-height:24px;
display: block;
text-indent: -99999px;
margin:0px;
outline: none;
padding:0;
min-height:57px;
height:100%;
text-decoration:none;
}
.social_bookmarks .iconrss{background:&nbsp;#A4A4A4&nbsp;url(//lh6.googleusercontent.com/-s8sIx3OX2WI/U4vC1nmgr0I/AAAAAAAALK4/W3Z3qXMwrCg/s114/icon-rss.png) top left no-repeat;}
.social_bookmarks .iconrssmail{background:&nbsp;#BDBDBD&nbsp;url(//lh5.googleusercontent.com/-H4iUybdCAyU/U4vC1yQWu1I/AAAAAAAALLE/fTpR7eN4cIw/s114/icon-rssmail.png) top left no-repeat;}
.social_bookmarks .icontwitter{background:&nbsp;#D8D8D8url(//lh6.googleusercontent.com/-4TshwJW7hIE/U4vC2JM25AI/AAAAAAAALLI/tcIkpheXrYU/s114/icon-twitter.png) top left no-repeat;}
.social_bookmarks .iconfacebook{background:&nbsp;#E6E6E6&nbsp;url(//lh5.googleusercontent.com/-nt-UdZG1ns0/U4vC1v57lwI/AAAAAAAALLQ/pAOWjEBSnSg/s114/icon-facebook.png) top left no-repeat;}
.social_bookmarks .icongplus{background:&nbsp;#F1F1F1&nbsp;url(//lh6.googleusercontent.com/-brT53y4GgMs/U4vC1UPpmFI/AAAAAAAALK8/vRxosS7GGKs/s114/icon-gplus.png) top left no-repeat;}
.social_bookmarks .iconfacebook:hover{background-position:center -57px; background-color:#37589b;}
.social_bookmarks .icontwitter:hover {background-position:center -57px; background-color:#46d4fe;}
.social_bookmarks .icongplus:hover {background-position:center -57px; background-color:#de5a49;}
.social_bookmarks .iconrss:hover{background-position:center -57px; background-color:#ff6600;}
.social_bookmarks .iconrssmail:hover{background-position:center -57px; background-color:#FFDE00;}
.social_bookmarks li:hover a{background: transparent url(//lh4.googleusercontent.com/-XNviZ_JqvyU/U4vDMDFAX8I/AAAAAAAALLk/E4VIJr1onlo/s57/icon-social-reflect.png) no-repeat;
}
&lt;/style&gt;
&lt;div class='social_bookmarks_container'&gt;
&lt;ul class='social_bookmarks'&gt;
&lt;li class='iconrss'&gt;
&lt;a href='/atom.xml'&gt;
RSS
&lt;/a&gt;
&lt;/li&gt;
&lt;li class='iconrssmail'&gt;
&lt;a href='http://feedburner.google.com/fb/a/mailverify?uri=NombreDelFeed'&gt;
RSS Mail
&lt;/a&gt;
&lt;/li&gt;
&lt;li class='icontwitter'&gt;
&lt;a href='http://twitter.com/usuario'&gt;
Twitter
&lt;/a&gt;
&lt;/li&gt;
&lt;li class='iconfacebook'&gt;
&lt;a href='http://facebook.com/usuario'&gt;
Facebook
&lt;/a&gt;
&lt;/li&gt;
&lt;li class='icongplus'&gt;
&lt;a href='http://plus.google.com/+usuario/about'&gt;
Google Plus
&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;

Esta é a outra versão, o botão 4.














..."você deve colar no seu


gadget&nbsp;HTML / Javascript&nbsp;.
...este é o código:



&lt;style&gt;
/* Botones de Redes Sociales - Ciudad Blogger */
.social_bookmarks_container {
width:176px;
height:176px;
padding:0;
position:relative;
}
.social_bookmarks {
position:relative;
float:right;
margin:0;
padding:0;
}
.social_bookmarks li{
margin:0 0 1px 1px;
height:77px;
width:77px;
list-style:none;
float:left;
padding:0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;&nbsp;
transition: all 0.4s ease-in-out;
}
.social_bookmarks li a {
float:left;
width:77px;
line-height:24px;
display: block;
text-indent: -99999px;
margin:0px;
outline: none;
padding:0;
min-height:77px;
height:100%;
text-decoration:none;
}
.social_bookmarks .iconrss{background:&nbsp;#A4A4A4&nbsp;url(//lh6.googleusercontent.com/-s8sIx3OX2WI/U4vC1nmgr0I/AAAAAAAALK4/W3Z3qXMwrCg/s000/icon-rss.png) top left no-repeat;}
.social_bookmarks .icontwitter{background:&nbsp;#D8D8D8url(//lh6.googleusercontent.com/-4TshwJW7hIE/U4vC2JM25AI/AAAAAAAALLI/tcIkpheXrYU/s000/icon-twitter.png) top left no-repeat;}
.social_bookmarks .iconfacebook{background:&nbsp;#E6E6E6&nbsp;url(//lh5.googleusercontent.com/-nt-UdZG1ns0/U4vC1v57lwI/AAAAAAAALLQ/pAOWjEBSnSg/s000/icon-facebook.png) top left no-repeat;}
.social_bookmarks .icongplus{background:&nbsp;#F1F1F1&nbsp;url(//lh6.googleusercontent.com/-brT53y4GgMs/U4vC1UPpmFI/AAAAAAAALK8/vRxosS7GGKs/s000/icon-gplus.png) top left no-repeat;}
.social_bookmarks .iconfacebook:hover{background-position:center -77px; background-color:#37589b;}
.social_bookmarks .icontwitter:hover {background-position:center -77px; background-color:#46d4fe;}
.social_bookmarks .icongplus:hover {background-position:center -77px; background-color:#de5a49;}
.social_bookmarks .iconrss:hover{background-position:center -77px; background-color:#ff6600;}
.social_bookmarks li:hover a{background: transparent url(//lh4.googleusercontent.com/-XNviZ_JqvyU/U4vDMDFAX8I/AAAAAAAALLk/E4VIJr1onlo/s000/icon-social-reflect.png) no-repeat;
}
&lt;/style&gt;

&lt;div class='social_bookmarks_container'&gt;
&lt;ul class='social_bookmarks'&gt;
&lt;li class='iconrss'&gt;
&lt;a href='/atom.xml'&gt;
RSS
&lt;/a&gt;
&lt;/li&gt;
&lt;li class='icontwitter'&gt;
&lt;a href='http://twitter.com/usuario'&gt;
Twitter
&lt;/a&gt;
&lt;/li&gt;
&lt;li class='iconfacebook'&gt;
&lt;a href='http://facebook.com/usuario'&gt;
Facebook
&lt;/a&gt;
&lt;/li&gt;
&lt;li class='icongplus'&gt;
&lt;a href='http://plus.google.com/+usuario/about'&gt;
Google Plus
&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;



E rápido, certo?&nbsp;A única coisa que resta a fazer é colocar os seus nomes de usuários de cada rede social onde indicado em&nbsp;vermelho&nbsp;.Pela primeira versão deve colocar o nome do seu feed Feedburner quando indicado, e, claro,&nbsp;ter a assinatura ativada Feedburner e-mail&nbsp;.



E se você não gostar das cores, você também pode alterá-los.&nbsp;Os códigos hexadecimais estão em&nbsp;negritocores estão em seu estado normal, e aqueles em&nbsp;laranja&nbsp;são as cores quando pairando.





fonte:
ciudadblogger












Botones de Redes Sociales con sprites y transiciones CSS3







Esto me lo han pedido muchos lectores de este blog, y son los botones para las redes sociales que actualmente uso, y como lo prometido es deuda, y ya no me quiero endeudar más, pues aquí va.



Estos botones son para enlazar tus redes sociales:&nbsp;Facebook,&nbsp;Twitter,&nbsp;Google+,&nbsp;RSS Feed, y&nbsp;suscripción por correo.
Lo que a muchos les resulta atractivo es el efecto que tienen cuando se pasa el cursor sobre ellos, ya que el ícono se mueve hacia arriba mientras el fondo cambia de color.



Este gadget lo veremos en dos versiones, uno con 5 botones pequeños alineados de forma horizontal, y otro de 4 botones un poco más grandecitos y alineados en dos columnas. Están hechos con sprites y transiciones CSS3.

Cualquiera de las dos versiones las vamos a colocar de un solo paso, es decir, pegando tanto los estilos como la estructura HTML dentro de un gadget,&nbsp;¿por qué?&nbsp;por pereza nada más, pero quien quiera poner los estilos en su lugar correspondiente de la plantilla podrá hacerlo sin ningún problema.
Entonces, para ponerlos en tu blog, entra en&nbsp;Diseño | Añadir un gadget | HTML/Javascript&nbsp;y ahí pega el código de los botones que más te gusten.

Este es la primera versión de 5 botones.















Y este es el código que has de pegar en tu gadget:

&lt;style&gt;
/* Botones de Redes Sociales - Ciudad Blogger */
.social_bookmarks_container {
width:100%;
height:65px;
padding:0;
position:relative;
}
.social_bookmarks {
position:relative;
float:left;
margin:0;
padding:0;
}
.social_bookmarks li {
margin:0 0 1px 1px;
height:57px;
width:57px;
list-style:none;
float:left;
padding:0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.social_bookmarks li a {
float:left;
width:57px;
line-height:24px;
display: block;
text-indent: -99999px;
margin:0px;
outline: none;
padding:0;
min-height:57px;
height:100%;
text-decoration:none;
}
.social_bookmarks .iconrss{background:&nbsp;#A4A4A4&nbsp;url(//lh6.googleusercontent.com/-s8sIx3OX2WI/U4vC1nmgr0I/AAAAAAAALK4/W3Z3qXMwrCg/s114/icon-rss.png) top left no-repeat;}
.social_bookmarks .iconrssmail{background:&nbsp;#BDBDBD&nbsp;url(//lh5.googleusercontent.com/-H4iUybdCAyU/U4vC1yQWu1I/AAAAAAAALLE/fTpR7eN4cIw/s114/icon-rssmail.png) top left no-repeat;}
.social_bookmarks .icontwitter{background:&nbsp;#D8D8D8url(//lh6.googleusercontent.com/-4TshwJW7hIE/U4vC2JM25AI/AAAAAAAALLI/tcIkpheXrYU/s114/icon-twitter.png) top left no-repeat;}
.social_bookmarks .iconfacebook{background:&nbsp;#E6E6E6&nbsp;url(//lh5.googleusercontent.com/-nt-UdZG1ns0/U4vC1v57lwI/AAAAAAAALLQ/pAOWjEBSnSg/s114/icon-facebook.png) top left no-repeat;}
.social_bookmarks .icongplus{background:&nbsp;#F1F1F1&nbsp;url(//lh6.googleusercontent.com/-brT53y4GgMs/U4vC1UPpmFI/AAAAAAAALK8/vRxosS7GGKs/s114/icon-gplus.png) top left no-repeat;}
.social_bookmarks .iconfacebook:hover{background-position:center -57px; background-color:#37589b;}
.social_bookmarks .icontwitter:hover {background-position:center -57px; background-color:#46d4fe;}
.social_bookmarks .icongplus:hover {background-position:center -57px; background-color:#de5a49;}
.social_bookmarks .iconrss:hover{background-position:center -57px; background-color:#ff6600;}
.social_bookmarks .iconrssmail:hover{background-position:center -57px; background-color:#FFDE00;}
.social_bookmarks li:hover a{background: transparent url(//lh4.googleusercontent.com/-XNviZ_JqvyU/U4vDMDFAX8I/AAAAAAAALLk/E4VIJr1onlo/s57/icon-social-reflect.png) no-repeat;
}
&lt;/style&gt;
&lt;div class='social_bookmarks_container'&gt;
&lt;ul class='social_bookmarks'&gt;
&lt;li class='iconrss'&gt;
&lt;a href='/atom.xml'&gt;
RSS
&lt;/a&gt;
&lt;/li&gt;
&lt;li class='iconrssmail'&gt;
&lt;a href='http://feedburner.google.com/fb/a/mailverify?uri=NombreDelFeed'&gt;
RSS Mail
&lt;/a&gt;
&lt;/li&gt;
&lt;li class='icontwitter'&gt;
&lt;a href='http://twitter.com/usuario'&gt;
Twitter
&lt;/a&gt;
&lt;/li&gt;
&lt;li class='iconfacebook'&gt;
&lt;a href='http://facebook.com/usuario'&gt;
Facebook
&lt;/a&gt;
&lt;/li&gt;
&lt;li class='icongplus'&gt;
&lt;a href='http://plus.google.com/+usuario/about'&gt;
Google Plus
&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;


Esta es la otra versión, la de 4 botones.














Y este es el código que pegarías en tu gadget&nbsp;HTML/Javascript.


&lt;style&gt;
/* Botones de Redes Sociales - Ciudad Blogger */
.social_bookmarks_container {
width:176px;
height:176px;
padding:0;
position:relative;
}
.social_bookmarks {
position:relative;
float:right;
margin:0;
padding:0;
}
.social_bookmarks li{
margin:0 0 1px 1px;
height:77px;
width:77px;
list-style:none;
float:left;
padding:0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.social_bookmarks li a {
float:left;
width:77px;
line-height:24px;
display: block;
text-indent: -99999px;
margin:0px;
outline: none;
padding:0;
min-height:77px;
height:100%;
text-decoration:none;
}
.social_bookmarks .iconrss{background:&nbsp;#A4A4A4&nbsp;url(//lh6.googleusercontent.com/-s8sIx3OX2WI/U4vC1nmgr0I/AAAAAAAALK4/W3Z3qXMwrCg/s000/icon-rss.png) top left no-repeat;}
.social_bookmarks .icontwitter{background:&nbsp;#D8D8D8url(//lh6.googleusercontent.com/-4TshwJW7hIE/U4vC2JM25AI/AAAAAAAALLI/tcIkpheXrYU/s000/icon-twitter.png) top left no-repeat;}
.social_bookmarks .iconfacebook{background:&nbsp;#E6E6E6&nbsp;url(//lh5.googleusercontent.com/-nt-UdZG1ns0/U4vC1v57lwI/AAAAAAAALLQ/pAOWjEBSnSg/s000/icon-facebook.png) top left no-repeat;}
.social_bookmarks .icongplus{background:&nbsp;#F1F1F1&nbsp;url(//lh6.googleusercontent.com/-brT53y4GgMs/U4vC1UPpmFI/AAAAAAAALK8/vRxosS7GGKs/s000/icon-gplus.png) top left no-repeat;}
.social_bookmarks .iconfacebook:hover{background-position:center -77px; background-color:#37589b;}
.social_bookmarks .icontwitter:hover {background-position:center -77px; background-color:#46d4fe;}
.social_bookmarks .icongplus:hover {background-position:center -77px; background-color:#de5a49;}
.social_bookmarks .iconrss:hover{background-position:center -77px; background-color:#ff6600;}
.social_bookmarks li:hover a{background: transparent url(//lh4.googleusercontent.com/-XNviZ_JqvyU/U4vDMDFAX8I/AAAAAAAALLk/E4VIJr1onlo/s000/icon-social-reflect.png) no-repeat;
}
&lt;/style&gt;

&lt;div class='social_bookmarks_container'&gt;
&lt;ul class='social_bookmarks'&gt;
&lt;li class='iconrss'&gt;
&lt;a href='/atom.xml'&gt;
RSS
&lt;/a&gt;
&lt;/li&gt;
&lt;li class='icontwitter'&gt;
&lt;a href='http://twitter.com/usuario'&gt;
Twitter
&lt;/a&gt;
&lt;/li&gt;
&lt;li class='iconfacebook'&gt;
&lt;a href='http://facebook.com/usuario'&gt;
Facebook
&lt;/a&gt;
&lt;/li&gt;
&lt;li class='icongplus'&gt;
&lt;a href='http://plus.google.com/+usuario/about'&gt;
Google Plus
&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;


Fácil y rápido, ¿no? Lo único que resta hacer es poner tus nombres de usuario de cada red social donde se indica en&nbsp;color rojo.
En el caso de la primera versión deberás poner el nombre de tu feed de Feedburner donde se indica, y por supuesto&nbsp;tener activada la suscripción por correo electrónico en Feedburner.



Y si no te gustan los colores, también puedes cambiarlos. Los códigos hexadecimales que están en&nbsp;negritas on los colores en su estado normal, y los que están en&nbsp;color naranja&nbsp;son los colores al pasar el cursor.