Menu Transform

Hey guy's! Hoje venho trazer um menuzinho muito legal! Eu encontrei lá no Chá com Anjos, e menu exclusivo do Tumblr Just Our HTML. Como achei uma gracinha decidi reblogar, com devidos créditos é claro! O menu possui um efeito super bacana! Se desejar ver basta clicar no link que está mais abaixo. Então sem mais delongas vamos ao tutorial!

Brevia do efeito

Ele é um menu com fundo, então é necessário que criem uma imagem no mesmo tamanho que o menu, como essa de exemplo:

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.

1. Escolha o blog qual deseja aplicar, e vá ate seu HTML. Chegando lá ative a pesquisa com o atalho Ctrl+U e pesquise por ]]></b:skin>, acima dele cole:

Códigos

.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"); }

Salve!

2. Agora vá ate Layout e abra um novo gadget/javascrit, dentro dele cole:

Códigos

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