12/24/2014

Mais Um Tutorial:Efeito Shine *-*.

Oi meus pudins de leite,tudo bom??Hoje estou trazendo mais um Tutorial e Goodie!!Hoje é um tutorial para você que gosta de colocar efeitos em imagens do seu bloguito,espero que goste.Eu vi lá no site muito bom e que amo Bunny Crazy
                                       
Hi ursinhos,tudo certinho com vocês??Hoje trago mais um tutorial que achei super legal,o efeito Shine que é bem criativo para fazer várias coisas!!E aqui estão os créditos ao Kawaii World e ao Bunny Crazy.
Espero que de certo e ajude a vocês.
1-Passo:
Vá em modelo-editar HTML e aperte as teclas Ctrl+f e vai abrir uma caixinha de pesquisa lá procure por:
]]></b:skin>
E acima desse código cole isso:
 .image_shine{ width: largurapx; height: alturapx; margin-right: 5px; margin-bottom: 5px; position: relative; float: left; border: 3px solid #cordaborda; } .hover_shine{ width:115px; height: 115px; background-image: url(http://i.minus.com/iuvzydplyu8rr.png); position: absolute; background-position: -265px 0; left:0px; top:0px; background-repeat:no-repeat; } .hover_shine:hover{ background-position: 10px 0; -webkit-transition: background-position .9s ease; -moz-transition: background-position .9s ease; -o-transition: background-position .9s ease; transition: background-position .9s ease; }

Agora ok,vá no seu layout e adicone uma gadget HTML/Java Script e cole dentro:
 <div class="image_shine"> <img src="link da imagem"/> <a href="link" title="titulo"><div class="hover_shine"></div></a> </div>
Aonde está escrito ''Link da imagem'' é para você colae a Url da imagem que você quer que fique com esse efeito.
É isso eu achei super legal esse efeito,tanto que usei no cabeçalho do blog *0* espero que tenham curtido!!
~Kisses.
Ver postagem original.


Nenhum comentário :

Postar um comentário