Tutorial - Efeito Shake


Boa Noite, gente.

Desculpe-me por eu não ter postado durante o dia, mas é que sempre posto melhor a noite, que é quando eu estou sentado na minhas cama, no meu ar-condicionado totalmente relaxado e sem barulho, já que quase todo o dia fico na casa da minha tia, e lá não é nem um pouco silencioso, tem uns cinco periquitos piando o dia inteiro, e agora nasceu mas uns dois e fica horrível de fazer qualquer coisa.

Bom mas esquecendo as besteiras da minha vida, hoje eu trouxe um efeito do Kawaii World (créditos), que pegou do tumblr CSS And HTML, é um efeito muito bom pra ser usado no blogroll ou na sua elite de afiliados, para ter um preview do efeito clique aqui, procure o gadget efeito shake, e então gostou do efeito ? Então vamos apender a fazer !


1. Vá no HTML do seu blog e pressione CTRL+F. Na caixa de pesquisa, procure por ]]></b:skin> e acima dessa tag, cole: 

@-webkit-keyframes shake {
0% {transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg);}
25% {transform: rotate(5deg); -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -o-transform: rotate(5deg); -ms-transform: rotate(5deg);}
50% {transform: rotate(-5deg); -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -o-transform: rotate(-5deg); -ms-transform: rotate(-5deg);}
75% {transform: rotate(5deg); -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -o-transform: rotate(5deg); -ms-transform: rotate(5deg);}
100% {transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg);}
}
.shake {-webkit-transition: .9s; border-radius: 5px;}
.shake:hover {-webkit-animation: shake .9s alternate ease;}

Não precisa editar nada no código, a não ser que você queira mudar alguma coisa no efeito, mas só modifique se souber HTML.

2. Em um gadget HTML/Java Script, cole o seguinte código. Repita-o para cada imagem a mais: 


<a href="URL" title="NOME"><img class="shake" src="URL da IMAGEM" /></a>

3 comentários:

Regras:
• Os comentários são moderados.
• Não xingue nada nem ninguém.
• Comentários como: "Seguindo, segue de volta ?" serão deletados.
• Se for fazer uma crítica faça com educação e bom senso.
• Pedidos feitos por comentário não serão realizados, pedidos só na ask.
• Obrigado por comentar!