21/12/2012

Tutorial: Efeito Light Cube

||

E ai meus bunnys curtindo muito as ferias? É eu pelo menos estou pulando muito por ai, mas trago um tutorial que achei no KW, o efeito se chama Light Cube. Eu achei ele estilo bem boate rsrs por causa daquelas luzes quadradas. (Dance) Mas bom querem tentar?

Para adicionar este efeito, vá em seu HTML e procure por ]]></b:skin>, e acima 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;
}

Abra um gadget de HTML/JavaScript, e dentro cole o seguinte:
<div class="sd efeito"> 
    <a href="SEU LINK"><img src="LINK DA IMAGEM" /></a>  
    <div class="luv"></div> 
Prontinho!

Nenhum comentário:

Postar um comentário

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