Tutorial - Efeito Light Cube

 

Boa tarde, pessoal.

Como prometido estou aqui postando mais um tutorial. Quero deixar avisado que hoje teremos mais um daqueles debates com assuntos um tanto polêmicos por aqui, então fiquem de olho para participar. Dessa vez é um assunto que eu não pude deixar de notar e por isso acho que devemos discuti-lo. Claro que esse tem a ver com a blogosfera, então já devem até ter notado.

O tutorial que trago, encontrei no Single Themes e transformei para blogger. Como sempre, não foi difícil para mim, mas posto para os que tem dificuldade tanto de transformar, quanto de encontrar um efeito bom. Se pegar daqui, por favor, credite. Repasse se achar interessante, não tenho problemas com isso contanto que você diga na postagem que está reblogando daqui. O nome do efeito é Light Cube, é como uma versão mais avançada de uma transição que já postei. Clique aqui para visualizar, dirija-se ao gadget "Light Cube".

1. Vá até editar HTML e procure por ]]></b:skin>. Após encontrar, acima dessa 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;

}

Recomendo que mude apenas duas coisas: O tamanho, que varia de imagem para imagem e também a cor do efeito. Negritei as duas coisas, mude ambas e depois salve. Observe que você precisa repetir a largura e a altura, não se esqueça.

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>  

Troque as informações em negrito pelo que elas pedem e depois é só salvar. Certamente seu efeito terá sido aplicado.