20.7.14

Efeito change


Tadaima ^^

Não, o efeito de hoje não tem nada de espectacular. Na verdade, classifiquei-o como um dos mais simples do mundo. Mas fui eu que fiz, achei engraçadinho e portanto trouxe. Consiste em mudar algo por completo. O gadget não tem nada de extenso, e o próprio tutorial também não. Eu usei para imagens. Cria duas imagens diferentes, e a url é colocada com um background. É muito parecido com o efeito Before&After, mas bem mais fácil.

Prévia:


Tutorial:

Procure por:
/b:skin

Acima acrescente:
.change {
margin: 0px 0px 0px -20px;
width: 325px;
height: 325px;
background: url(http://3.bp.blogspot.com/-flunCIVP4-g/Ur88jUx05_I/AAAAAAAAQ94/Nok-9XwjzRI/s1600/baibai.png) no-repeat;
-webkit-transition-duration: .60s;
}
.change:hover {
background: url(http://2.bp.blogspot.com/-OriTtACAWdc/Ur9ChDo_r3I/AAAAAAAAQ-M/tfA2Ezxe8Jg/s1600/baibai2.png) no-repeat;
-webkit-transition-duration: .60s;
}

Substitua a url das imagens pelas que quiser.

Cole num gadget HTML/Javascript:
<div style="margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px; position: absolute;">
<div class="change">
</div></div>
Voilá ^^

Sem comentários:

Enviar um comentário