21/12/2012

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?




1. Para adicionar este efeito, vá em seu HTML e procure por ]]></b:skin>, e acima cole:

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

2. Abra um gadget de HTML/JavaScript, e dentro cole o seguinte:
Códigos
<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

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