22 de set de 2013

Menu Zoomer

Navegando na net encontrei um menu super interessante, o menu Zoomer, ele tem
um efeito de 3d no hover. Esse menu foi feito por  Suelen Furhmann . Ele foi feito
para blogs tumblr, eu adaptei para o blogger.
Para ver o menu zoomer clique aqui

Para colocar em seu blog, copie o código abaixo e coloque antes da tag ]]></b:skin>

 #text {
font-family: 'Economica';
font-size:32px;
width: 100%;
text-align: center;
margin: 20px 0;
}
#text:first-of-type {
margin: 5px 0;
}
#text a {
text-decoration: none;
font-weight: bold;
color: #fff;
text-shadow: 0 2px 0 #721e1e, 0px 2px 5px rgba(0,0,0,0.5);
position: relative;
top: 0;
-webkit-transition: all 0.1s ease-in;
-moz-transition: top 0.1s ease-in, text-shadow 0.1s ease-in;
-ms-transition: top 0.1s ease-in, text-shadow 0.1s ease-in;
}
#text a:hover {
text-shadow: 0 2px 0 #d84f4f, 0 4px 0 #d54646, 0 6px 0 #ce3333, 0 8px 0 #b92e2e, 0 10px 0 #912525, 0 12px 0 #721e1e, 0px 12px 10px rgba(0,0,0,0.5); top: -12px;

Depois de personalizar, se quiser a fonte que está no menu, copie o código abaixo e coloque antes de </head>

<link href='http://fonts.googleapis.com/css?family=Economica' rel='stylesheet' type='text/css'/>

Para fazer o menu aparecer, pegue o código abaixo e cole no gadget html/java script

<div id="text">
<a href="#">HOME</a>
<a href="#">GODIES</a>
<a href="#">TUTORIAIS</a>
</div>


2 comentários :

  1. Olá, eu amei esse menu, mais quando eu tentei colocar ele apareceu 3 vezes um embaixo do outro e o fundo prata, o que faço ? Pode me ajudar também a colocar ele dentro de uma faixa que vai do inicio ao fim da tela ? Muito obrigada.
    -> Magia Teen ( reformas ) & Always Dreeam
    ask- leticiatt02

    ResponderExcluir
    Respostas
    1. Letícia, você deve estar colocando algum código errado ou duplicado.
      veja um exemplo neste meu blog:
      Orações e Salmos

      Excluir

Qualquer dúvida pergunte que
responderei com prazer.
Só peço que seu comentário
seja relacionado à postagem.

© Princess Tutoriais- Agradece sua visita
2014. Todos os direitos reservados
Pedidos? dúvidas? nos comentários ou na Ask.
imagem-logo