11 de mai de 2013

Tutorial - Efeito Fall



Um novo e diferente tutorial que vocês podem usar no gadget afiliados ou para menus, é o efeito fall. Achei no LTE, que achou no KW...
É bem fácil e deixa um efeito bem bonito.
Para ver a prévia clique aqui.
Read More.

1. Vá até modelo >> Editar HTML. Clique em qualquer lugar da caixinha com os códigos. Pressione ctrl + F e procure por <head> (deve se encontrar mais ou menos na quarta linha). Abaixo dessa tag, cole o seguinte:

<link href='http://static.tumblr.com/dlelfro/wZfml3zxq/fallingkw.css' media='screen' rel='stylesheet'/>
2. Desça até encontrar a primeira seta, onde tem <b:skin>...</b:skin>. Se preferir, use o ctrl + F e procure por ... e aí você encontrará a seta. Clique nela. Pressione ctrl + F. Depois, procure por ]]></b:skin>. Acima, cole o seguinte:

.efeitofall{
padding:2px;
border:1px solid #dcdbdb;
}
.efeitofall:hover{
-webkit-animation-name: fall;
-moz-animation-name: fall;
-o-animation-name: fall;
animation-name: fall;
-webkit-animation-duration: 1s;

}

3. Você já pode salvar. Para aplicar o efeito, utilize o código abaixo dentro de um gadget de HTML/JavaScript

<a href="LINK""><img src="LINK DA SUA IMAGEM" class="efeitofall"/></a>
Substitua tudo o que for necessário.
Gostaram?
Beijos! 

2 comentários:

  1. Ameii o Tuto!Parabens pelo blog e´lindo!Sucesso.

    meucupcakedeuvaa.blogspot.com

    ResponderExcluir
  2. Realmente, esse efeito é bem legal ^-^

    Purple Star

    ResponderExcluir