19/12/2012

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.

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

Códigos
.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;
}

2. Agora em seu Layout crie um gadget de HTML/JavaScript, cole:

Códigos
<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
  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

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345