quinta-feira, 27 de dezembro de 2012

Efeito Circle

Gostaram do novo modelo feito por mim?

Booa tarde leitoras! Quanto tempo! Voltei de viagem ontem, mas já não tinha cabeça para postar algo, já que nem tudo havia dado certo.
Então, sobre o concurso irei esperar mais um pouquinho para inscrição de mais candidatas.
Sem mais enrolação, vim trazer para vocês um efeito bem bacana para ser usado aonde você quiser!
Ele é bem bonitinho, você passa o mouse á imagem gira e aparece uma descrição.

Vamos ver?


Cole isto em ]]><b:skin

/** EFEITO **/
.circle li {width: LARGURApx; height: ALTURApx; display: inline-block;}
.circle {padding: 0px; list-style: none; display: block; text-align: center; 
width: 100%;}
.efeito {width: 100%; height: 100%; border-radius: 50%; 
position: relative; cursor: default; box-shadow: 0 1px 
3px rgba(0,0,0,0.2);}
.imagem {width: 100%; height: 100%; border-radius: 50%; 
overflow: hidden; position: absolute; 
box-shadow: inset 0 0 0 10px rgba(255,255,255, 0.5); 
-webkit-transform-origin: 95% 40%; -moz-transform-origin: 95% 40%; 
transform-origin: 95% 40%; -webkit-transition: all 1s ease-in-out; 
-moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
.efeito:hover .imagem {box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5),
 0 1px 3px rgba(0,0,0,0.2); 
-webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); 
transform: rotate(-180deg);}

/** IMAGENS **/
.imagem-1 {background-image: url('IMAGEM'); z-index: 3;}
.imagem-2 {background-image: url('IMAGEM'); z-index: 2;}
.imagem-3 {background-image: url('IMAGEM'); z-index: 1;}

/** HOVER **/
.hover {position: absolute; width: 100%; height: 100%; border-radius: 50%; 
overflow: hidden; background: #61a0f2 url('http://static.tumblr.com/ubiuxyg/5G4m9bgwy/noise.png'); 
box-shadow: inset 0 0 0 5px rgba(0,0,0,0.05);}
.hover h3 {color: #fff; text-transform: uppercase; position: relative; 
letter-spacing: 1px; font-size: 12px; margin: 0 0px; padding: 30px 0 0 0; 
height: 40px; font-family: 'Open Sans', Arial, sans-serif; 
text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3);}
.hover p {color: #fff; padding: 0px 5px; margin: -20px 10px; font-size: 10px;
 border-top: 1px solid rgba(255,255,255,0.5);}
Mexa só onde está em negrito. O código é grande, mas muito fácil.


Cole isto num gadget de HTML/Javascript
<ul class="circle"> <li><div class="efeito"><div class="hover"> <h3>Seu nome</h3><p>urldoseutumblr</p></div> <div class="imagem imagem-1"></div></div></li> <li><div class="efeito"><div class="hover"> <h3>Seu nome</h3><p>urldoseutumblr</p></div> <div class="imagem imagem-2"></div></div></li> <li><div class="efeito"><div class="hover"> <h3>Seu nome</h3><p>urldoseutumblr</p></div> <div class="imagem imagem-3"></div></div></li> </ul>
E prontinho!!! Dúvidas postem aqui.
Se repassarem creditem.
Créditos: (www)

Beijos e até mais!

11 comentários:

  1. Esse efeito é bem legal ^3^ seguindo aqui c::

    kawaii-expllosion.blogspot.com <~ visita?

    ResponderExcluir
    Respostas
    1. Muito fofo né? ^u^ Obriigada :3

      Visito sim ^0^ Bjs :3

      Excluir
  2. Gostei bastante do novo modelo, é seja bem-vinda de volta, gostei muito desse efeito, fica realmente muito lindo, acho que vou usá-lo no meu próximo Layout.
    Kisus...

    ResponderExcluir
    Respostas
    1. Awn obrigada *u* Que bom que gostou :3 Acho que também irei usa-lo. É muito fofo *o*

      Bjs ^_^

      Excluir
  3. Awwn muuito fooofo esse efeito!! Amei, ameei *O*

    Beeijos ;33

    Besteiroll's

    ResponderExcluir
    Respostas
    1. Nãao é mesmo? Que bom que gostou *U*

      Bjs ^_^

      Excluir
  4. Oii amei seu blog! flor minha amiga está fazendo um super concurso lá no blog dela >< corre lá
    http://meninadealegria.blogspot.com.br/2012/12/concurso-de-ano-novo.html#more

    Seguindo,me ajuda nas minhas metas ?? *--*
    Beijos,morango mordido/Crazy for candy

    ResponderExcluir
    Respostas
    1. Oii muito obrigada *u* Não estou mais participando de concursos no momento amre :\

      Já estou seguindo *u*
      Bjs ^_^

      Excluir
  5. Amei este efeito! *u*
    Mais coloca isso antes ou depois da tag?
    -Kissus

    ResponderExcluir
  6. Vou usar e te dar os créditos, muito perfeito esse efeito!!!
    bjs

    ResponderExcluir

- Comente a vontade, eu retribuo ^3^
- Palavras de baixo calão, xingamentos e outros tipos de ofensas não são permitidos. Para quê tanto ódio no coraçãozinho, gente? c: