Boa noite, leitores.
Hoje trouxe para vocês um menu parecido com os menus do Tumblr. Os código foram todos achados no Kawaii World.
Visualize aqui o menu
1. Cole o seguinte código no seu html * acima de ]]></b:skin> *
.menu {width: 100px; font-size: 18px; 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á sublinhado
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.
<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. (:
Para cada nova página (ex. home, contato, goodies...) você cola o código acima.
0 leitores soltaram o verbo:
Postar um comentário
Leia, é importante!
✖ - Todos os comentários serão lidos e quando possível, respondidos;
✖ - Comentários com apenas "Oi, segue o meu blog?" não serão publicados;
✖ - No final do comentário deixe o link do seu site ou blog para que eu possa retribuir a visita;
✖ - Encomendas e pedidos deverão ser feitos na Ask (menu).
Obrigada por comentar e volte sempre!