26.12.12

Tutorial - Image transition

Yoo~
Estou trazendo um tutorial super fácil e legal,de um efeito lindo!!
Talvez até possa usar neste layout,para por a Nathália como postadora!!
Vamos ver??
1.Vá em editar HTML e procure por ]]></b:skin>.Após encontrar a tag cole acima:
.transivi{background:url('IMAGEM'); width:LARGURApx; height:ALTURApx; color:transparent;
-webkit-transition: all 0.7s ease-out; -moz-transition: all 0.7s ease-out; transition: all 0.7s ease-out; -webkit-transition-duration:0.7s;
box-shadow: inset 0 0 0 50px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.1);}
.transivi:hover{background:url('IMAGEM'); width:LARGURApx; height:ALTURApx; color:#000;
-webkit-transition: all 0.7s ease-out; -moz-transition: all 0.7s ease-out; transition: all 0.7s ease-out; -webkit-transition-duration:0.7s;
box-shadow: inset 0 0 0 16px rgba(255,255,255,0.1), 0 1px 2px rgba(0,0,0,0.0); }
.outvic{background:#fff; padding:16px; width:LARGURA2px;  border:1px double #ececec; outline:1px double #cdcdcd; outline-offset:5px; }
Em LARGURA2 você põe a largura da sua imagem, mais 1,por exemplo,a minha imagem mede 120 de largura, em largura 2 ponho 121.

2.Em um gadget HTML/Javascript cole:

<div class="outvic">
<div class="transivi">
</div>
</div>
E já está!!

2 comentários:

  1. Ficou lindo o efeito! Adorei! Estou seguindo o blog, muito perfeito!

    Beijos.
    bubbles-candy|blogspot

    ResponderEliminar

✖ - Não insulte - senão seu comentários irá ser removido
✖ - Comente sempre que puder!!Ficamos sempre feliz quando comentam :)
✖ - Se está querendo comentar mas tem preguiça, faz esforcinho xD

Atentamente,

O time.