22/02/2013

TUTORIAL-efeito light cube

*Adore a fonte que coloquei nessa imagem*
Boa noite!
Hoje eu postei o dia inteiro,quero deixar o blog super atualizado,e também quero ver se consigo vaga pra postar em algum blog grande(mentirinha,não quero postar em nenhum blog)
Bom,vamos ao nosso tutorial,para visualiza-lo vá aqui e procure o gadget LIGHT CUBE.
GOSTOU DO EFEITO? JÁ SABE ONDE CLICAR!



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.
ONDE ACHEI O CÓDIGO:http://www.kawaii-world.net


                                                           *COMENTEM*

4 comentários:

  1. Que blog lindo, amo animes, amei esse blog, tá lindo mesmo!
    O efeito é lindo.

    Adolescente Nerd

    ResponderExcluir
    Respostas
    1. nossa,vc comentando aqui no blog, *.*
      que bom que curtiu o lay,e o efeito.

      Excluir
  2. doro este efeito!
    bem que eu queria ter vc lá no meu blog T^T

    ResponderExcluir
    Respostas
    1. hahaha,bem que eu gostaria de postar la *.*,mais estou muito atarefado com o hora,e tenho lays pra fazer T.T

      Excluir