Image Map

Efeito volume.


Olá amores, boa tarde e bom começo de aula para alguns de vocês, as minhas aulas só começam em março e ainda é meu ultimo ano graças a Deus.  Então sem mais distrações, trouxe o efeito Volume que foi disponibilizado no kw, e achei bem interessante para vocês. O efeito é lindo, super fácil de colocar. 
 Preview (www)

OBS : a unica coisa que alterei no efeito foi o tamanho da fonte, porque na minha opinião tava muito grande, e como diminuí para 13px dá pra colocar uma pequena descrição.


Vá em modelo/ editar html e procure por ]]> 
acima dele coloque

@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }
#volume{
background: #fccbd7;
box-shadow: inset 0 0 10px #ffa8bf, 0 0 6px #ffa8bf;
padding: 2px;
width: 150px;
height: 150px;
margin-top: -158px;
opacity: .01;
color: #f98fad;
text-shadow:0 1px #fff;
font-family: verdanaa;
font-size: 13px;
border-radius:500px 500px 500px 500px;
-webkit-transition: all .5s ease-in-out
}
#volume:hover{
opacity:0.99;
}
E salve. Depois vá em Layout e crie um gadget html/javascript 
e cole 
<center><img style=" padding: 2px; border: 1px solid #dddddd; width:150px; border-radius:500px 500px 500px 500px;" src="LINK DA IMAGEM" />
<div id="volume"><br /><br />PALAVRA</div> 



#Compartilhe esse post:

Nenhum comentário:

Postar um comentário

© Todos os Direitos Reservados | Theme Designed by Seo Blogger Templates | Adaptação completa por: Alan Calvin!
back to top
e e e
e e e