Tutorial: Efeito Awn

Ohayou Gozaimasu! O(≧∇≦)O. Como vão vocês, meus queridos? Eu estou bem., no possível. Na verdade eu estaria dormindo agora, mas resolvi dar uma passadinha aqui rapidinho só pra fazer mais uma postagem pra vocês. Andei percebendo que o blog não tem tanto conteúdo de efeitos, menus, essas coisas, então decidi que esse final de semana as nossas postagens vão ser focado nisso, ok? Caso queiram dar alguma sugestão ou pedir algum tutorial use os comentários que eu lhe responderei, certo?

Bom, o efeito é super fofo e leve, e eu acho que fica bem bonitinho quando usamos nas imagens da sidebar do welcome e do último gadget. A foto não vai ficar preta- e - branca, mas caso você queira pode adicionar uns códigos a mais ou apenas mudar a saturação na hora de personalizar a sua imagem, você que escolhe. (PREVIEW)


01- Abra o html do seu blog e procure por ]]></b:skin> e acima dele cole o seguinte código:
.efeito-awn-isa {
padding: 2px;
border: 1px solid #COR DA BORDA;
-webkit-transition-duration: 2s
}
.efeito-awn-isa:hover {
-webkit-transform: rotate(90deg) rotate(180deg);
-webkit-transition-duration: 2.5s
}
*A única coisa que você pode mudar é o que está negrito, ok?

02- Salve. Depois vá no layout do seu blog e adicione um novo gadget JAVA/SCRIPT e cole o seguinte código:
<a href="LINK" title="NOME"><img class="efeito-awn-isa" src="IMAGEM" /></a>
<a href="LINK" title="NOME"><img class="efeito-awn-isa" src="IMAGEM" /></a>
<a href="LINK" title="NOME"><img class="efeito-awn-isa" src="IMAGEM" /></a>
<a href="LINK" title="NOME"><img class="efeito-awn-isa" src="IMAGEM" /></a>
<a href="LINK" title="NOME"><img class="efeito-awn-isa" src="IMAGEM" /></a>
<a href="LINK" title="NOME"><img class="efeito-awn-isa" src="IMAGEM" /></a>
Mude o que está com letra maiúscula e salve!
créditos:

Nenhum comentário:

Postar um comentário