18/09/2012

Tutorial: Menu com Hover Gradiente

||

Yo meus meu coelhinhos trago mais um menu para vocês hoje, um menu no estilo hover gradiente. Ele e mais simples mas da muito charminho para o seu layout. Ele não modifica o menu padrão do blog ele é dentro de um gadget   HTML/Javascript. Então quer tentar?  Mas abaixo esta o exemplo.

Quando pronto ele ficara assim, eu coloquei ele acima das postagens, onde colocar e opção sua.


Primeiro você ira precisar de duas imagens em gradiente ou normais como desejar, eu usei essas duas você pode usar se quiser também.



Agora vá para seu HTML e procure por ]]></b:skin>, e acima dessa tag você coloca

.menugradiente {
background: url('http://1.bp.blogspot.com/-F2dbtWwVmkE/UFi_vOV0r1I/AAAAAAAAacw/QDbz-ECmro0/s1600/24.png');
display: inline-block;
text-align: center;
font-size:14px;
color: #ffffff;
text-shadow: 0 1px 3px #b2b2b2;
float: center;
margin: 2px;
font-family: verdana;
padding: 6px;
width: 100px;
height: auto;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-transition-duration: .50s;
}
.menugradiente:hover {
background: url('http://4.bp.blogspot.com/-BEVDDp3TYrQ/UFi8n1VtZeI/AAAAAAAAacg/MBcL1IcH4Fw/s1600/23.png');
text-shadow: 0 1px 4px #737070;
-webkit-transition-duration: .60s;
}

Agora vá para seu layout e abra um gadget HTML/Javascript. Abriu? Agora dentro dele coloque esse código 

<a href="URL" alt="­" ><div class="menugradiente">NOME</div></a>
<a href="URL" alt="­" ><div class="menugradiente">NOME</div></a>
<a href="URL" alt="­" ><div class="menugradiente">NOME</div></a>


Mas sobre o codigo:

background: url('Sua imagem'); - No lugar de "Sua imagem" coloque a imagem que desejar.

display: inline-block;  - Mude inline por outline se quiser mudar o menu para um abaixo do outro não lado a lado.


text-align: center; - É o alinhamento do texto. Mude para right (direita) ou left (esquerda).

font-size:14px; - Tamanho da fonte. Quanto maior o número, maior ela fica e vice-versa.

color: #ffffff;  - Cor da fonte.

text-shadow: 0 1px 3px #b2b2b2;  - Cor da sombra.

float: center;  - Alinhamento do menu. Mude para right (direita) ou left (esquerda).


margin: 2px; - Espaço entre cada quadradinho do menu. Quanto maior o número, maior o espaço.

font-family: verdana; - Tipo da fonte.

padding: 6px; - Espaço entre as letras e o fim do quadradinho. Quanto maior o número, maior o espaço.

width: 100px; - Largura do quadradinho.

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