06/06/2013

TUTORIAL - Efeito Pop Light


Hey Lindos! Como estão? Bem, eu espero! Ok, humm... vocês gostaram do novo membro? Bem, ele é meio novo nisso, sabe?! Então, peguem leve com ele, ok?! Então, vamos ao que interessa! Hoje eu vou ensinar a como fazer o efeito Pop Light. 



O tutorial, eu encontrei no blog Kawaii World, que do mesmo jeito que eu, achou o mesmo tutorial, em outro blog! O Single Themes, mais isso não vem ao caso - kkkk- Então, eu estava olhando o blog, procurando algum efeito bom, e tal, daí eu achei esse! Então, vamos começar?! 

1 - Vá até editar HTML e procure por "]]></b:skin>". Após encontrar, acima desta tag, cole:



sd {
width: LARGURApx;
height: ALTURApx;
margin: 10px;
float: center;
border: 5px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 1px 1px 4px #ccc;
cursor: default;
}
.sd .luv, .sd .content {
width: LARGURApx;
height: ALTURApx;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.sd img {
display: block;
position: relative;
}



.efeito img {
opacity:1;
-webkit-transition: all 0.3s ease-in;
margin-top: 0;
-webkit-transition-duration: .60s;
}
.efeito .luv {
cursor:pointer;
opacity:0.7;
visibility:visible;
border:85px solid #CORDOEFEITO;
box-sizing:border-box;
-webkit-transition-duration: .60s;
}
.efeito:hover .luv {
border:0px double #fff;
opacity:0;
visibility:hidden;
-webkit-transition: all 0.5s cubic-bezier(0.940, 0.850, 0.100, 0.620);
-webkit-transition-duration: .60s;
}
.efeito:hover img {
opacity:1;
-webkit-transition-duration: .80s;


}
 Na minha opinião, eu recomendo que você mude apenas duas coisas. O tamanho, que varia de imagem para imagem e a cor do efeito. As duas coisas estão em negrito, mude ambas do jeito que quiser e salve.



OBS: Repita a largura e a altura!



2 - Em um Gadget de HTML/JavaScript, cole o seguinte:



<div class="sd efeito">

<a href="SEU LINK"><img src="LINK DA IMAGEM" /></a>

<div class="luv"></div>


 Faça o mesmo, que você fez no primeiro passo e depois é só salvar!





12 comentários:

  1. Adoreii, depois vou tentar *0*

    vaonamala0ficial.blogspot.com

    ResponderExcluir
  2. Respostas
    1. http://mycuteblogue.blogspot.pt/2013/06/selinho.html#more

      Excluir
  3. Oi , aceita parceria?
    http://place-all.blogspot.com.br/
    responda emm um post meu? *--*

    ResponderExcluir
  4. Este comentário foi removido pelo autor.

    ResponderExcluir
  5. Este comentário foi removido pelo autor.

    ResponderExcluir
  6. Este comentário foi removido pelo autor.

    ResponderExcluir
  7. ~Oii-Hwong Yasmiin *-* .. Aqui é a dona do Pensamentos de uma Girl, que você segue.. Então meu blog deu problemas, então irei excluir,, Mas ai eu fiz outro blog com o mesmo nome,, Será que você pode seguiir novamente? Por favoor? o3o

    -
    http://pensamentos-de-1-girl.blogspot.com.br/

    -
    Kiss~ e obriigada desde já!! :)

    ResponderExcluir