21/11/2012

Tutorial - Imagem com Reflexo - Exclusivo


Olá, boa noite, hoje eu trouxe um efeito de reflexo que você usa na imagem, achei muito bonito e adaptei o códigos do tumblr para o blog.

Créditos: greathelp.tumblr.com


Primeiro, vá no seu código HTML tecle CTRL+F e procure por: ]]></b:skin> e cole o seguinte código acima de ]]></b:skin> :


#popo img {
margin: 5px;
opacity: 0.5; /* Opacidade da Imagem */
border: 4px solid #4C627B; /* Largura da Borda e Cor */
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
transition: all 0.4s linear;
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.5)));
}
#popo img:hover {
opacity: 1; /* Opacidade */
 -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
}


Agora vá em Layout > Adicionar um Gadget > HTML/Javascript e cole esse código:


<div id="popo">
<div style="text-align: center;">
<img src="URL DA SUA IMAGEM" />
</div>
</div>


Pronto agora é só colocar o url da sua imagem onde esta destacado em rosa.

Nenhum comentário:

Postar um comentário