19 de maio de 2014

Efeito Tree

Trouxe para vocês o tutorial do efeito tree, que para quem não conhece é aquele efeito
  onde ao passar o mouse a linha se movimenta e desaparece. Pode ser usado nos autores e afiliados do blog. Fonte Kawaii World


Para usar este efeito em seu blog é muito fácil, copie o código abaixo e coloque no gadget
HTML/JAVA SCRIPT
<style>
#comida a img{
width:auto;
height:auto;
display:inline;
margin-right:2px;
margin-left:1px;
margin-top:1px;
margin-bottom:1px;
padding: 3px;
background: #ffc0c0;
border: 1px solid #ff8080;
outline: solid 1px #fff;
outline-offset: -5px;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
#comida a:hover img{
outline: solid 3px transparent;
opacity: 0.5;
outline-offset: -20px;
}
< /style>
< div id="comida">
< center>
< a href="http://www.blogger.com/" title="Exemplo"> <img src="URL DA IMAGEM" /></a>
< a href="http://www.blogger.com/" title="Exemplo"> <img src="URL DA IMAGEM" /></a>
< /center>
< /div>
Para mudar a cor da bordinha, basta trocar #ffc0c0 pela cor da primeira borda (a mais grossa) e #ff8080pela cor da borda mais externa. Troque "http://www.blogger.com/" pelo link do blog que deseja e "Exemplo" pelo nome. O resto é só futucar e vocês irão aprender.
Kissus
 

Nenhum comentário:

Postar um comentário

- Este espaço é todo seu. Tire suas dúvidas!

- Por favor, Não faça algum request pelos comentários,
para isso serve a Ask.

- Se não gostou de algo, não use palavras baixas. Ninguém precisa se rebaixar tanto para expressar uma opinião.

- Leio todos os comentários e retribuo todos.

-Thanks