12.11.12

Efeito circle



~ Hooooy gente!

À pedidos, hoje eu trouxe o tutorial desse efeito do gadget "Parceiros", que está no cabeçalho♥ Esse efeito é do Desgins For You, mas eu modifiquei o código todo e o transferi para o blogger. Então se for usar, credite ao Chovendo Diamantes também. 

O efeito está no cabeçalho, mas mesmo assim, caso queira ver a preview do efeito clique aqui. Como podem observar, a preview não está como aqui no CD, pois, como eu já disse, modifiquei o código. Enfim, clique em Leia Mais para ver o tuto. **Depois venho aqui e atualizo com a minha preview**



Primeiro, cole o seguinte código antes de 

/** EFEITO CIRCLE**/
.circle li {width: 80px; height: 80px; /* tamanho */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('http://3.bp.blogspot.com/-svcptvHT7hg/UKEp_X8qEmI/AAAAAAAADQU/l2nJXuQUeDY/s1600/z1.png'); z-index: 3;}
.imagem-2 {background-image: url('http://2.bp.blogspot.com/-EeaSbXozrEg/UKEqAPJBUKI/AAAAAAAADQc/qDgwDe_OslU/s1600/z2.png'); z-index: 2;}
.imagem-3 {background-image: url('http://3.bp.blogspot.com/-PZFLIIWuhZQ/UKEqAynCuXI/AAAAAAAADQk/Nlry6xnmyKk/s1600/z3.png'); z-index: 1;}
/** HOVER **/
.hover {position: absolute; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: #afe0d5 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: 10px; margin: 0 0px; padding: 15px 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: 0px; border-top: 1px solid rgba(255,255,255,0.5);}


Edite o número de width e height de acordo com o tamanho que quer. O que está em negrito são as url's das imagens. Eu já deixei 3, mas se você quiser pode substituir pelas suas. Lembre-se de fazer as imagens do tamanho que colocou em width e height. O que está de vermelho é o fundo quando passa o mouse.

Para colocar o efeito, adicione um gadget de HTML/javascript e cole:


<ul class="circle">
<li><div class="efeito">
<div class="hover">
<h3>
<a href="LINK">NOME</a></h3>
</div>
<div class="imagem imagem-1">
</div>
</div>
</li>
<li><div class="efeito">
<div class="hover">
<h3>
<a href="LINK">NOME</a></h3>
</div>
<div class="imagem imagem-2">
</div>
</div>
</li>
<li><div class="efeito">
<div class="hover">
<h3>
<a href="LINK">NOME</a></h3>
</div>
<div class="imagem imagem-3">
</div>
</div>
</li>
</ul>

Apenas edite onde está LINK e NOME, colocando o link do blog ou etc, e o nome que aparecerá quando passar o mouse. Salve.

Pronto! Espero que tenham gostado.




5 comentários:

  1. Eu achei o efeito lindérrimo *-*
    É um pouquinho complicado, mas vale muito à pena!
    Adorei! :D
    Beijos
    ill-helpyou.blogspot.com

    ResponderExcluir
  2. Eu ia pedir esse tuto pra você :3 O efeito é liiiindo demais *--*

    ResponderExcluir
  3. Muito obm o tutorial!

    http://manguitarosa.blogspot.com.br/

    beijoos

    ResponderExcluir
  4. Amei o efeito!Vou usar no proximo lay.
    rosa-chocado . blogspot . com

    ResponderExcluir
  5. OI TUDO BEM !!
    OI ADOREI SEU BLOG JÁ ESTOU SEGUINDOSEU BLOG, PODERIA POR GENTILEZA SEGUIR O MEU TAMBÉM , E CLICAR NO G+ . MEU BLOG É :- http://brechodosul.blogspot.com.br , VAI DAR UMA OLHADINHA SERÁ UM PRAZER EM RECEBER .
    OBRIGADA AGUARDO SUA GENTILEZA

    FICO GRATA AO ME SEGUIR , POIS JÁ ESTA SEGUIDA .

    MARCIA REGINA - DESCULPE-ME A LETRA GRANDE MAS SOU DEFICIENTE ESPECIAL

    ResponderExcluir