27 de jan. de 2013

Efeito Speed

Olá Anjos!

Desculpe não ter postado mais cedo, não consegui dormir essa noite e fiquei cansada a tarde toda. Estava morrendo de sono, mas não consegui dormir. Agora que é noite, o sono também não aparece. Desse jeito vou ficar igual a um zumbi!

Trouxe um tutorial bem legal que encontrei no blog World of Tutos, estou reblogando com a permissão da autora. O tutorial chama-se efeito Speed, quando você passa o mouse, a imagem balança de um lado para o outro. Sempre quis fazer um menu com um efeito parecido, vou tentar e se der certo, posto aqui.
Veja preview aqui.

No HTML do seu blog, procure por ]]></b:skin>, acima, cole:
@-webkit-keyframes rattle2 {
0% {-webkit-transform: translatex(10px);}
50% {-webkit-transform: translatex(-20px);}
100% {-webkit-transform: translatex(20px);}
}
.rattle2 {-webkit-transition: .1s; border-radius: 10px; box-shadow: 1px 1px #caebe6;}
.rattle2:hover {-webkit-animation: rattle2 .3s alternate infinite linear;}


Para aplicar o efeito, cole o seguinte código em um Gadget:
<img src="LINK DA IMAGEM" class="rattle2">


*sei que prometi mais utilitários, mas não me aguentei :)
Meus querides! Caso vocês gostem desse blog e queiram continuar me acompanhando, eu ainda escrevo, mas em outro blog. Não posto apenas tutoriais, mas continuo escrevendo e falando de vários assuntos, inclusive a blogosfera. Caso queira visitar (sério ótimo uma visita): clique aqui para ir ao blog Serenar

4 comentários:

  1. Yooo...
    Olha eu aqui de novo, mais dessa vez queria pedir para que trocasse o link de afiliação, pois mudei o nome do blog é a Url também.

    Nova url: http://wish-otaku.blogspot.com.br/

    ResponderExcluir
  2. Odeio quando não consigo dormir.
    Adorei o efeito!

    ResponderExcluir

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!