Oi meus amores!
um tutorial la pra simples no tumblr, eu achei efeitos para vocês, e porem são mais de 10 efeitos prestem atenção eles são gigantes!
<link href='http://fonts.googleapis.com/css?family=Electrolize' rel='stylesheet' type='text/css'>
Coloque o código abaixo no seu CSS
/*** efeito round by themes-for-all***/
.bola {margin: 20px 0 0 0;padding: 0;list-style: none;display: block;
text-align: center;width: 100%;-webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out}
.bola:after,
.bola:after {clear: both;}
.bola li {width: 220px;height: 220px;display: inline-block;margin: 20px;-webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out}
.bg {width: 90%;height: 90%;border-radius: 50%;position: relative;cursor: default;-webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out}
.bg:hover {box-shadow: inset 0 0 0 110px rgba(164,42,42, 0.4),inset 0 0 0 16px rgba(255,255,255,0.5),0 1px 2px rgba(0,0,0,0.1);-webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out}
.bg:before {content: '';display: table;}
.tit {position: absolute;width: 100%;height: 100%;border-radius: 50%;
overflow: hidden;opacity: 0;transition: all 0.4s ease-in-out;transform: scale(0);backface-visibility: hidden;-webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out}
.tit h3 {color: #fff;text-transform: lowercase;position: relative;
letter-spacing: 2px;font-size: 15px;margin:20 9px;padding: 80px 0 0
;height: 110px;font-family: 'Electrolize';
text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3);-webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out}
.tit h3 a {color: #fff}
.bg:hover .tit {opacity: 1;transform: scale(1); -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out }
/*** imagem do efeito ***/
.img-1 {background-image: url(https://static.tumblr.com/rgw2xus/lTLmebi3s/2.png);
}
.img-2 {background-image: url(https://static.tumblr.com/rgw2xus/Ettmebi3a/1.png);
}
.img-3 {background-image: url(https://static.tumblr.com/rgw2xus/bchmebi47/3.png);
}
Coloque o código abaixo depois de <body>
<ul class="bola">
<li>
<div class="bg img-1">
<div class="tit">
<h3><a href="http://LINK DO SEU TUMBLR/">NOME</a></h3>
</div>
</div>
</li>
<li>
<div class="bg img-2">
<div class="tit">
<h3><a href="http://LINK DO SEU TUMBLR/">NOME</a></h3>
</div>
</div>
</li>
<li><div class="bg img-3">
<div class="tit">
<h3><a href="http://LINK DO SEU TUMBLR/">NOME</a></h3>
</div>
</div>
</li>
</ul>
Código enorme espero que vocês tenham gostado, um beijos da Liih-Chan! duvias no comentário!
Nenhum comentário:
Postar um comentário