Tutorial - Menu Out

 

Hoyyyyyy!!! 

Hj irei postar um tutorial de Menu Out eu achei super lindo!!

O tutorial e peguei no Kawaii World e eles pegaram  no 

tumblr extras4html.

Espero q vcs gostem!

Vamoos ver o tutorial?

Visualize aqui o menu

1. Cole o seguinte código no seu css [Acima de ]]><b:skin ]

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

Você muda somente o que está em negrito. 

Width equivale a largura do menu.
Font-size ao tamanho da fonte do menu.
Font-family é a fonte do menu. Se você não quiser essa, mude e apague de /**Fonte Personalizada **/ até o final.
Color é a cor do menu.
Float: left é o alinhamento, no caso está a esquerda. Pode por Rigth também.

2. Agora pra usar, é só ir em Adicionar HTML >> Java/Script e colar:

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

Em link você adiciona o link desejado, em color é a cor do menu e Home o que aparece. (:

Espero que tenham gostado, esse menu é super simples e fica muito perfeito. Dúvidas, comentem! #Steph