02/02/2013

Menu Out


Vamos ao primeiro tutorial do dia. Ele se chama "Menu Out", achei ele no KW então ai esta os merecidos créditos. Vamos ao menu? Ele e super fácil de fazer, o efeito e super simples mas é perfeito para menus de sidebar.


1. Vá ate seu HTML e procure por ]]><b:skin , assim que o achar acima dele adicione esse código:

Códigos

.menu {width: 100px; font-size: 15px;  font-family:'Stars From Our Eyes'; color: #fff;float:left;  letter-spacing:1px; text-align:center; margin:2px;-webkit-transition:All 1s ease;-moz-transition:All 1s ease;-o-transition:All 1s ease;-webkit-transform: rotate(0deg) scale(0.828) skew(1deg) translate(0px);-moz-transform: rotate(0deg) scale(0.828) skew(1deg) translate(0px);-o-transform: rotate(0deg) scale(0.828) skew(1deg) translate(0px); }
.menu:hover {-webkit-transform: rotate(0deg) scale(1.02) skew(1deg) translate(0px);-moz-transform: rotate(0deg) scale(1.02) skew(1deg) translate(0px);-o-transform: rotate(0deg) scale(1.02) skew(1deg) translate(0px);}
/** Fonte personalizada **/
@font-face {font-family: 'Stars From Our Eyes';src: url('http://static.tumblr.com/mmrynko/17Dm6e4ef/starsfromoureyes.ttf') format('truetype'); font-weight: normal; font-style: normal;}

2. Modifique as partes marcadas em vermelho, e salve. Vá ate seu layout e abra um gadget de HTML Java/Scripte dentro dele adicione:

Códigos
<a href="link" class="menu"> <div style="COLOR: #fff;">Home</div></a>

Arrume as partes em negrito, e prontinho. E ai gostaram?

4 comentários:

  1. Olá ~ ^^ Gostava de saber uma coisa <__< Quando terminei a edição, as letras ficaram brancas (e como o fundo é branco, não se consegue ler) e não consigo mudar a cor O__O Como posso mudar? o:

    ResponderExcluir
    Respostas
    1. É sómudar a cordafonte que esta no código como color: #fff;

      Excluir
  2. kkkk esqueça o: já consegui xD Obrigado pela atenção na mesma (:

    ResponderExcluir

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345