Menu Transform

Olá Anjos!

Hoje trouxe novamente um tutorial do Tumblr. Eu admito que não gosto de blogs muito parecidos com o um Tumblr, mas adoro os menus de lá. Para quem não sabe, ensinei a converter códigos aqui no blog, para ver o tutorial é só clicar aqui.

O menu de hoje é um menu bem legal exclusivo do Tumblr Just Our HTML, eu achei o menu muito fofo e fácil de fazer, porque não usa scripts, é tudo HTML. Ele tem um fundo bem legal e bilha quando passa o mouse.
Para ver o menu clique aqui. 

A primeira coisa a fazer é um fundo no Photoshop. O fundo usado no meu blog de testes é o mesmo disponibilizado no Tumblr, que é esse:

Ele tem 300px de largura e 100px de altura. Para fazer um fundo dividido em dois assim é só fazer duas imagens com 50px de altura e juntar depois em uma só.

Os styles usados são esses aqui.

Com seu fundo, procure por ]]></b:skin> e acima, cole:

.bczinha1 {background: #f5f5f5; padding: 3px 10px 3px 10px; color: #fff; margin: 2px; -webkit-border-radius: 2px 2px 2px 2px; font-family: 'Enigmatic';font-size: 24px;overflow: hidden; background: url('http://static.tumblr.com/wch6kjp/Inbmgf9qu/fundo_wish.png') top left no-repeat; display: inline-block; width: auto; height: auto; -webkit-transition:All 0.5s ease-in-out; -moz-transition:All 0.5s ease-in-out; -o-transition:All 0.5s ease-in-out;}

.bczinha1:hover {border-left: none; -webkit-border-radius: 2px 2px 2px 2px;-webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; color: #fff; background-position: bottom left; background: url('http://static.tumblr.com/wch6kjp/Ohumgfapw/brilho.png')no-repeat center center; opacity: 0.8; -webkit-transition: all 1s ease; -moz-transition: all 1s ease;-o-transition: all 1s ease; transition: all 1s ease;}

@font-face {font-family: "Enigmatic"; src: url('http://static.tumblr.com/wch6kjp/Igbmgfagl/enigmau_2.ttf'); format("truetype"); }

Mude o que está em negrito. A segunda URL é o brilho que aparece quando passa o mouse, se quiser, mude.

Agora cole em um Gadget de HTML/Javacript:

<div class="bczinha1"><a href="/"><font color="#fff">Home</font></a></div>

<div class="bczinha1"><a href="/"><font color="#fff">About</font></a></div>

Para adicionar mais links é só acrescentar depois de </div>:

<div class="bczinha1"><a href="URL DO LINK"><font color="#COR DA FONTE DO LINK">NOME DO LINK</font></a></div>

Só para lembrar, o brilho não aparece quando o fundo onde está o menu é branco, por isso eu recomendo usar esse menu embaixo do cabeçalho. Você pode fazer modificações como deixar o menu rodar em hover e etc. Use a criatividade!