6.12.12

Efeito Cool Shadow

amo essa banda confere ela aqui[www]
Olá Pessoal**

Trouxe um efeito super bonitinho e diferente 
confere ele aqui[www], achei que ele deve ser
feito para gadget de divulgação, autores ou qualquer
outro que você deseja.

Vá no seu HTML >> aperte f3 e procure por /b:skin
acima dessa tag cole isso:
.view {
   width: 160px;
   height: 160px;
   margin: 10px;
   float: left;
   border: 5px solid #fff;
   overflow: hidden;
   position: relative;
   text-align: center;
   box-shadow: 0px 0px 5px #aaa;
   cursor: default;
}
.view .mask, .view .content {
   width: 160px;
   height: 160px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view img {
   display: block;
   position: relative;
}
.oefeito img {
   opacity:0.2;
   transition-duration: 60s; -webkit-transition-duration: .60s;
}
.oefeito .mask {
   cursor:pointer;
   opacity:1;
   visibility:visible;
   border: 80px solid rgba(0,0,0,0.7);
   box-sizing:border-box;
   transition-duration: 60s; -webkit-transition-duration: .60s;
}
.oefeito:hover .mask {
   border:0px double rgba(0,0,0,0.7);
   opacity:0;
   visibility:hidden;
}
.oefeito:hover img {
   opacity:1;
}
 Agora vá em Layout >> Adicionar Gadget >> HTML/Javascript
e adicione isso:

<div class="view oefeito">
    <a href="#"><img src="URL DA IMAGEM" /></a>
    <div class="mask"></div>
</div><center/>

8 comentários:

  1. Já conhecia, é lindo mesmo...
    Flor, você foi até meu blog pedir afiliação, e eu ainda não estou na lista, se não colocar, eu te retiro de lá.

    Boa noite.
    http://candytown-blog.blogspot.com.br/

    ResponderExcluir
  2. Não conhecia, e é lindo !
    Vou colocar no meu próximo layout (com o seus devidos créditos)
    Beijos
    nobodyslistenvei (blogspot)

    ResponderExcluir
  3. Adorei esse efeito, não o conhecia. Acho que vou usá-lo mais tarde :D
    Kisses!

    PS:. O seu blog é afiliado do meu, eu mudei o link e já te coloquei na elite. Você poderia atualizar por favor? Agradeço desde já. Desculpe se encomodei.
    http://productions-ofdreams.blogspot.com/

    ResponderExcluir
  4. Suuuuuuper legal o efeito! E também amo Nirvana huahuea, tenho uma camisa igual a da imagem (2ª)
    Beijos,
    Sim Senhorita (Clique no perfil)

    ResponderExcluir
  5. Oi, Ana Clara !
    Nossa que efeito mais lindo, vou usar no
    próximo Layout c:
    Seu blog é perfeito, adoro blogs de HTML, não é atoa que já
    te favoritei, hahaha ;3
    Amiga, já estou seguindo aqui ! Será que você poderia retribuir ? Obrigada!

    Beijos -

    uniiverso-teen.blogspot.com

    ResponderExcluir

Antes de comentar siga essas regrinhas:
- Aceito segue,segue de volta
- Quando Pedir alguma coisa especifique
- Retribuo todos os comentários
- Pedidos de Afiliação só na Página de Afiliações
- Não use palavras ofensivas
- Não me peça para Divulgar porque não aceito Divulgações