18 de jan de 2013

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!


4 comentários:

  1. AAAAAAAAAAAAAAAAAAAAAAAAAAA que lindo, OMG!
    Quero muito fazer, ta favoritado no meu navegador pro próximo lay!

    ResponderExcluir
    Respostas
    1. Também gostei dele, por isso trouxe pra cá rsrs'

      Excluir
  2. Este comentário foi removido pelo autor.

    ResponderExcluir
  3. gosteiii estou usando no meu bjus....muitooo lindooo

    ResponderExcluir

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!