05/03/2013

Efeito 4 Shine

Boa noite, amores meus! <3

Fiz um calendário do blog, até para ficar mais organizado. Amanhã irei postar ele, é bem simples, só para não ficar o mesmo assunto todos os dias.
Hoje estou trazendo um efeito do Tumblr, que eu mesma transformei. Encontrei no tumblr, Queen Extras. Aqui está o exemplo ?! Acho muito lindo esse efeito e super diferente. Se eu usasse, usaria no gadgets de moderadoras ou em imagem de destaque no layout, pois ele dá um toque especial! *u*



1°. Procure por ]]></b:skin> e acima da tag cole:


/**************** SHINE POR HTML BOMB */
.DemoContainer {
    margin: 0px;
    width: 350px;
    height: 100px;
    color: #ccc;
    font-weight: bold;
    font-family: tahoma;
    text-align: center;
}
.image_shine{
    width:  101px;
    height: 101px;
    margin-right: 5px;
    margin-bottom: 5px;
    position: relative;
    float: left;
    border: 3px solid rgba(255,197,239,0.9);
}
.hover_shine{
    width:101px; height: 101px; 
    background-image: url(http://i.minus.com/iuvzYDPlYu8RR.png);
    position: absolute;
    /*initial position*/
    background-position: -265px 0; 
    left:0px; top:0px; 
    background-repeat:no-repeat;
}
.hover_shine:hover{
    /*Final position*/
    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;
}
O código é grande, mas não precisa você mudar nada.
Depois disso, vá em Adicionar Gadget > HTML/Java Script > e cole:

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

<div class="image_shine">
<center><img src="LINK DA IMAGEM" width="101"/></center>
<a href="LINK" title="TITULO"><div class="hover_shine"></div></a>
</div>
</div>
 O resultado é muito lindo! Vocês irão amar!
 Kisses! :*

5 comentários:

  1. Fica tão lindo, já usei o efeito uma vez ~ *u*

    ResponderExcluir
  2. Boa noite! como vai? então, estou a procura de novos blog para seguir, retribuo todas as visitas que fizer (mesmo se demorar um pouco, eu sempre virei!) se estiver interessada me avise que voltarei aqui para ler o post com calma, etc.
    Fique com Deus,
    http://maybe-i-smiled.blogspot.com.br/
    http://dicionario-feminino.blogspot.com.br/

    ResponderExcluir
  3. Adorei este efeito! *--*
    Nossa, lindo o lay daqui, com essas nuvens, hahaha, gamei aqui!
    Adoorei aqui, seguindo!
    Meu blog está no começo, estava fechado e reabri ontem, se quiser me ajudar seguindo, visitando e divulgando, ficarei muito, muito, grata! =D
    Beijinhos, Biti
    Biti's Place

    ResponderExcluir
  4. Ooooooooooooooooooomg, que efeito lindo!
    Você podia fazer o tutorial de como fazer as nuvens daquele blog se mecher né?
    Seguindo aqui, se retribuir, fico grata.
    www.justgirl-oficial.blogspot.com

    ResponderExcluir