19/12/2012

Tutorial: Efeito Shine

||

Como vão pessoal? Trago mais um tutorial que achei bem legal o efeito Shine, sendo criativo da pra fazer umas coisas bem maneiras com ele, como na elite de postadores ou nos afiliados, acho que fica muito lindo e vale a pena dar um espacinho pra ele em um layout. Fica muito cutie alguém passar o mouse sobre a imagem e aparecer aquele brilhinho. Preview Aqui. Ae antes que me esqueça os créditos são do KW.

Vá até editar HTML e então procure por ]]></b:skin>. Acima dessa tag, cole:

.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 em seu Layout crie um gadget de HTML/JavaScript, cole:

<div class="image_shine">
<img src="LINK DA IMAGEM"/>
<a href="LINK" title="TITULO"><div class="hover_shine"></div></a>
</div>

4 comentários:

  1. Que fofooooo, vou usar :3

    ResponderExcluir
    Respostas
    1. Hihi que bom, que gostou. <3

      Excluir
  2. Não está funcionando o efeito

    ResponderExcluir
    Respostas
    1. Você colocou as cores? Pois está sem as cores e a imagem, assim o efeito não vai funcionar. ^^

      Excluir

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram