Oii minhas fofuras, tudo bem!? Eu vim postar hoje, um tutorial mega útil e bonitinho, que é as letras se separando no hover, igual aqui, nos títulos das postagens e dos gadgets. Eu aprendi no Kawaii World, e é bem fácil, qualquer um consegue fazer. Ah, quem me pediu ajuda querendo saber o tuto foi a -Naah Chan okay?!
No título do gadget, você faz o seguinte.
Arrume seu código, do jeito que quiser, e vai ficar(exemplo), assim:
.sidebar h2 {
font-family: Sofia;
color:#000000;
background:#D3D3D3;
font-size: 18px;
text-align: center;
border-bottom: 1px solid #000000;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
Agora, antes de "}" você coloca:
-webkit-transition-duration: .40s;
E agora, você coloca:
.sidebar h2:hover {
letter-spacing: 3px;
}
Bem fácil né?! Seu código vai ficar assim:
.sidebar h2 {
font-family: Sofia;
color:#000000;
background:#D3D3D3;
font-size: 18px;
text-align: center;
border-bottom: 1px solid #000000;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.sidebar h2:hover {
letter-spacing: 3px;
-webkit-transition-duration: .40s;
}
letter-spacing: 3px;
-webkit-transition-duration: .40s;
}
Entenderam pessoal?
Ali, é só um exemplo de personalização que eu usei, mas vocês podem usar qualquer um :)
Alguma dúvida? Vocês também podem aprender mais sobre personalizar os gadgets bem aqui.
Qualquer coisa me avisem por comentário.
Um beijicoo :3
Super fácil e o efeito dele é muito fofis! ^-^
ResponderExcluirBjos...
- SammySacional -
- Dando Uma de Escritora -
Amei , o tutorial provavelmente irei usalo :).Seguindo
ResponderExcluirBody Eletric
Adoreeei o tutorial e o blogger tbm ,alem de facil o tutu é otimoo , amei , bejooones :*
ResponderExcluir-----------♥♥♥-------------------
http://girlstolive.blogspot.com.br
Eu estava louca atrás do tutorial. Favoritei aqui e com certeza vou usá-lo!
ResponderExcluirBeijos || cupcakeofshine.blogspot.com