26 de setembro de 2013

Tutorial- Efeito Squeet

Trouxe para vocês mais um efeito para afiliados  ou se preferir aplicar em 
outro lugar fica a seu critério, peguei este efeito em um tumblr  I-LOVETHINGS.
Para ver o efeito x
Para colocar em seu blog, coloque o código abaixo, antes da tag ]]></b:skin>

/***** EFEITO ESQUET - POR I-LOVETHINGS/LOVERS-OF-DESIGNS/SPAZIOHTML *****/
.imagem {background: url('LINK-DA-IMAGEM'); -webkit-transition-duration: 1.0s; width: 116px; height: 136px;display: inline-block;}
.imagem:hover {background: url('LINK-DA-MESMA-IMAGEM-ESCRITA'); -webkit-transition-duration: 1.0s;}
.imagem2 {background: url('LINK-DA-IMAGEM'); -webkit-transition-duration: 1.0s; width: 116px; height: 136px;display: inline-block;}
.imagem2:hover {background: url('LINK-DA-MESMA-IMAGEM-ESCRITA'); -webkit-transition-duration: 1.0s;}
.imagem3 {background: url('LINK-DA-IMAGEM'); -webkit-transition-duration: 1.0s; width: 116px; height: 136px;display: inline-block;}
.imagem3:hover {background: url('LINK-DA-MESMA-IMAGEM-ESCRITA'); -webkit-transition-duration: 1.0s;}

Depois das alterações feitas salve, e vá em layout adicione um gadget de Html/Java Script e cole:

<div class="imagem1"></div>
<div class="imagem2"></div>
<div class="imagem3"></div>

Esse efeito as imagens são colocadas pelo html, também tem que configurar o tamanho, você vai fazer uma imagem normal, depois fazer a mesma imagem em preto e branco. Em width: 116px; height: 136px vc irá por o tamanho da sua imagem. Width - largura, Height - altura.


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