Tutorial - Menu com Hover Gradiente

Yoo!

Trouxe mais um tutorial de menu pra vocês. Dessa vez é um menu com o fundo de gradiente que muda ao passar o mouse. Não é tão simples como os anteriores, mas também não é tão chamativo quanto o menu Tracks.

Você pode colocar em qualquer lugar do template, eu escolhi um somente para testes.

Na hora de analisar o código você pode ver que o gradiente nada mais é que um fundo, ou seja: Você pode colocar patterns normais também.

Querem aprender? Já sabem onde clicar.

1. Procure por ]]></b:skin> e acima da tag, cole:

.menugradiente {

background: url('http://i1234.photobucket.com/albums/ff411/SweetLG/16-3.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://i1234.photobucket.com/albums/ff411/SweetLG/17-2.png');

text-shadow: 0 1px 4px #737070;

-webkit-transition-duration: .60s;

}

- Entendendo o código:

background: url('http://i1234.photobucket.com/albums/ff411/SweetLG/16-3.png'); - No lugar da url coloque o seu background normal ou gradiente.

display: inline-block;  - Troque inline por outline se quiser que o menu fique um link abaixo do outro e não lado a lado.

text-align: center; - Define o alinhamento do texto. Recomendo que deixe onde está, mas você pode trocar por 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. A mesma coisa do alinhamento do texto.

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. Se você aumentar, ele fica maior.

width: 100px; - Largura do quadradinho.

2. Cole isso onde você quiser que o menu apareça:

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

<a href="LINK2" alt="­" ><div class="menugradiente">NOME DO LINK 2</div></a>

<a href="LINK3" alt="­" ><div class="menugradiente">NOME DO LINK 3</div></a>

Espero que tenha dado certo para quem tentou.