 |
| Personalizar ícones das redes sociais |
Boas pessoal! Bem vindos a mais um tutorial do Blogger Uncomplicated Works, e hoje irei ensinar a colocar efeitos CSS nos ícones das redes sociais no nosso blog.
Este tutorial vai ser um pouco mais complicado do que colocar apenas o ícone, contudo se estiverem concentrados facilmente irão perceber o efeito criado por cada código CSS, então vamos dar início ao nosso tutorial de como colocar efeitos nos ícones das redes sociais.
O primeiro efeito que irei ensinar hoje é como colocar rotação nos ícones das redes sociais, irá ficar desta forma:
O código HTML usado é:
<div class="efeito1">
<a href="URL_GOOGLE+" target="_blank"><img alt="Google +" src="http://icons.iconarchive.com/icons/land-of-web/social-coffee/64/google-plus-icon.png" /></a>
<a href="www.twitter.com" target="_blank"><img alt="Twitter" src="http://icons.iconarchive.com/icons/land-of-web/social-coffee/64/twitter-icon.png" /></a>
<a href="www.twitter.com" target="_blank"><img alt="Twitter" src="http://icons.iconarchive.com/icons/land-of-web/social-coffee/64/rss-icon.png" /></a>
<a href="https://www.facebook.com/uncomplicatedworks" target="_blank"><img alt="Facebook" src="http://icons.iconarchive.com/icons/land-of-web/social-coffee/64/facebook-icon.png" /></a>
</div>
Vocês devem alterar o código consoante os ícones que querem e devem fornecer o URL desejado, para que ao clicar sobre o ícone abra a página desejada, agora vamos ao primeiro código para personalizar os nossos ícones das redes sociais:
<style>.efeito1 img:hover {
-moz-transform: scale(1.1) rotate(360deg) translateX(1px) translateY(1px) skewX(1deg) skewY(1deg);
-webkit-transform: scale(1.1) rotate(360deg) translateX(1px) translateY(1px) skewX(1deg) skewY(1deg);
-o-transform: scale(1.1) rotate(360deg) translateX(1px) translateY(1px) skewX(1deg) skewY(1deg);
-ms-transform: scale(1.1) rotate(360deg) translateX(1px) translateY(1px) skewX(1deg) skewY(1deg);
transform: scale(1.1) rotate(360deg) translateX(1px) translateY(1px) skewX(1deg) skewY(1deg);}
.efeito1 img {-webkit-transition: all 500ms ease;
-moz-transition: all 750ms ease;
-ms-transition: all 750ms ease;
-o-transition: all 750ms ease;
transition: all 750ms ease;}
</style>
Se vocês quiserem colocar na sidebar através do esquema coloquem como está, se forem colocar no modelo do blog retirem <style> e </style>
Explicando um pouco o código:
Nós no código HTML colocámos <div class="efeito1"> então vamos usar efeito1 para personalizar o nosso ícone, depois onde esta a imagem começa por <img então vamos usar img, então colocamos .efeito1 img {} e dentro colocamos o efeito pretendido, neste caso, está o efeito transition que define o tempo de transição entre o rato estar sobre a imagem ou não e colocamos .efeito1 img:hover{}, acrescentamos :hover para quando o rato está sobre a imagem, neste exemplo está uma transformação de 360º. Espero que tenham percebido, se tiverem alguma dúvida deixem nos comentários.
O seguinte efeito provoca um aumento dos ícones:
<style>.efeito2 img:hover{
-webkit-transform: scale(1.1);
-o-transform: scale(1.1) ;
-ms-transform: scale(1.1) ;
transform: scale(1.1) ;
}
.efeito2 img {-webkit-transition: all 750ms ease;
-moz-transition: all 750ms ease;
-ms-transition: all 750ms ease;
-o-transition: all 750ms ease;
transition: all 750ms ease;
}</style>
<div class="efeito2">
<a href="https://www.blogger.com/URL_GOOGLE+" target="_blank"><img alt="MySpace" src="http://icons.iconarchive.com/icons/hopstarter/social-networking/64/MySpace-icon.png" /></a>
<a href="https://www.blogger.com/www.twitter.com" target="_blank"><img alt="Twitter" src="http://icons.iconarchive.com/icons/hopstarter/social-networking/64/Twitter-icon.png" /></a>
<a href="https://www.blogger.com/www.twitter.com" target="_blank"><img alt="Tumblr" src="http://icons.iconarchive.com/icons/hopstarter/social-networking/64/Tumblr-icon.png" /></a>
<a href="https://www.facebook.com/uncomplicatedworks" target="_blank"><img alt="Facebook" src="http://icons.iconarchive.com/icons/hopstarter/social-networking/64/Facebook-icon.png" /></a>
</div>
E por fim o último efeito torna colorido os ícones, quando o rato está sobre eles:
<div class="efeito3">
<a href="https://www.blogger.com/URL_GOOGLE+" target="_blank"><img alt="Google+" src="http://icons.iconarchive.com/icons/designbolts/3d-social/64/Google-plus-icon.png" /></a>
<a href="https://www.blogger.com/www.twitter.com" target="_blank"><img alt="Twitter" src="http://icons.iconarchive.com/icons/designbolts/3d-social/64/Twitter-2-icon.png" /></a>
<a href="https://www.blogger.com/www.twitter.com" target="_blank"><img alt="Blogger" src="http://icons.iconarchive.com/icons/designbolts/3d-social/64/Blogger-icon.png" /></a>
<a href="https://www.facebook.com/uncomplicatedworks" target="_blank"><img alt="Facebook" src="http://icons.iconarchive.com/icons/designbolts/3d-social/64/Facebook-icon.png" /></a>
</div>
<style>.efeito3 img:hover {
-webkit-filter: grayscale(0);
-moz-filter: grayscale(0);
-ms-filter: grayscale(0);
-o-filter: grayscale(0);
filter: grayscale(00);
}
.efeito3 img {
-webkit-transition: all 750ms ease;
-moz-transition: all 750ms ease;
-ms-transition: all 750ms ease;
-o-transition: all 750ms ease;
transition: all 750ms ease;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition: -webkit-filter 1s;
}</style>
Bem espero que tenham gostado dos códigos para personalizar os ícones das redes sociais, espero que tenham gostado do tutorial do Uncomplicated Works, qualquer dúvida deixem nos comentários até ao próximo tutorial.
Sem comentários:
Enviar um comentário