10/12/2012

Tutorial: Efeito Circle

||

Achei um efeito super bonitinho! Para quem quiser ver aqui esta, e ai não é uma graxinha? Quer tentar, então vamos lá!
Primeiro abra o seu blog, e vá ate o HTML e usando o atalho Ctrl+F procure por:

]]></b:skin> 

 E abaixo cole:

/** EFEITO **/
.circle li {width: LARGURA DA IMAGEMpx; height: ALTURA DA IMAGEMpx; 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('URL DA IMAGEM1'); z-index: 3;}
.imagem-2 {background-image: url('URL DA IMAGEM2'); z-index: 2;}
.imagem-3 {background-image: url('URL DA IMAGEM3'); 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);}

Arrume o codigo como se pede, modifique a cor se quiser, aconselho as imagens o mesmo px de largura e altura ex: 100x100 em #61a0f2 e acor do fundo. Agora vamos ao layout e  lá abra um Gadget de HTML/JavaScript  e cole:

<ul class="circle"> <li><div class="efeito"><div class="hover"> <h3>Nome1</h3><p>urldoseutumblroublog</p></div> <div class="imagem imagem-1"></div></div></li> <li><div class="efeito"><div class="hover"> <h3>Nome2</h3><p>urldoseutumblroublog</p></div> <div class="imagem imagem-2"></div></div></li> <li><div class="efeito"><div class="hover"> <h3>Nome3</h3><p>urldoseutumblroublog</p></div> <div class="imagem imagem-3"></div></div></li> </ul>

Nenhum comentário:

Postar um comentário

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram