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.