Menu "ganhando vida"

Segundo tutorial de hoje ^^

Não me perguntem porquê que chamei isto ao menu, creio que foi apenas porque a cor inicial é um cinza meio transparente e depois fica com uma cor mais avivada, e não consegui pensar em nada melhor. Para quem gosta de nomes em inglês, lamento ;) Sintam-se à vontade para, caso usem, lhe darem um nome mais aceitável, só não quero que retirem os créditos, pois é inteiramente meu. Uma coisinha simples e fácil de arrumar nos gadgets, mas espero que gostem.

Prévia: 

Tutorial:

Procure por:

/b:skin

Acima acrescente:

menu {
display: inline-block;
width: 45px!important;
font-family: silkscreen;
font-size: 8px;
text-align: center;
color: #9c8aa6;
text-shadow: 1px 1px 1px #fff;
background: rgba(0,0,0,0.03);
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.15), 0px 1px 1px rgba(255,255,255,0.35);
margin: 0px 1px 1px 0px;
padding: 2px 3px 2px 3px;
border-bottom: 3px solid #bea9c9;
opacity: 0.6;
-webkit-filter: grayscale(100%);
-webkit-transition-duration: .60s;
-moz-filter: grayscale(100%);
-moz-transition-duration: .60s;
filter: grayscale(100%);
transition-duration: .60s;
}
menu:hover {
opacity: 1;
background: #fff0bd;
box-shadow: inset 0px 1px 1px #edcc85, 0px 1px 1px #c7c2cf;
border-radius: 3px 3px 0px 0px;
-webkit-filter: grayscale(0%);
-webkit-transition-duration: .60s;
-moz-filter: grayscale(0%);
-moz-transition-duration: .60s;
filter: grayscale(0%);
transition-duration: .60s;
}

Para usar, adicione um gadget HTML/Javascript, e cole o código seguinte:

<a href="LINK" ><menu>NOME</menu></a>
<div style="margin-top: -22px; margin-left: 61px;">
<a href="LINK" ><menu>NOME</menu></a>
</div>
<a href="LINK" ><menu>NOME</menu></a>
<div style="margin-top: -22px; margin-left: 61px;">
<a href="LINK" ><menu>NOME</menu></a>
</div>
<a href="LINK" ><menu>NOME</menu></a>
<div style="margin-top: -22px; margin-left: 61px;">
<a href="LINK" ><menu>NOME</menu></a>
</div>

Sim, era só isto. Provavelmente entenderam a sequência nos gadgets, então caso precisem de adicionar mais, basta copiar e colar as últimas 4 linhas. Substituam nomes, links e essa coisa toda. Podem alterar as cores no hover, quando adicionam o efeito ao html do blog. As cores só são estas porque usei no meu ayout de halloween.