Menu com Hover Gradiente

Olá anjos!

Pediram para eu ensinar o menu que usei no Template do meu blog, o LIC. Eu sempre ensino tudo que uso nos meus Templates, afinal, a maioria das coisas eu aprendo em outros blogs. Então não tem porque ficar escondendo.

Esse menu é um com Gradiente, mas o gradiente não passa de uma imagem, que pode ser feita no Photoshop ou em qualquer programa. Claro que também pode ser usado no Menu algum background ou pattern, fica legal.

Veja um preview aqui.

Exemplo

Live Preview

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

.menugradiente {

background: url('http://i.imgur.com/QtiFr.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://i.imgur.com/Hnunx.png');

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

-webkit-transition-duration: .60s;

}

- Entendendo o código:

background: url('http://i.imgur.com/Hnunx.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(Gadet ou no HTML do blog):

<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>

Caso queira adicionar mais links é só acrescentar mais um código:

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

Meus querides! Caso vocês gostem desse blog e queiram continuar me acompanhando, eu ainda escrevo, mas em outro blog. Não posto apenas tutoriais, mas continuo escrevendo e falando de vários assuntos, inclusive a blogosfera. Caso queira visitar (sério ótimo uma visita): clique aqui para ir ao blog Serenar