08/03/2013

TUTORIAL-menu slow

*Sinto que estou arrasando com essas ilustrações*
Boa tarde!
Hoje não postei muito pois estava fazendo o novo lay do PRINCE OF HTML(ainda estou fazendo alias) e por incrível que pareça eu consegui ajeitar a largura do cabeçalho estilo brackround! Estou muito feliz por isso,mais não vou deixar no mesmo estilo do hora,vai parecer o mesmo blog,então comecei a fazer um novo lay,tendo como feat AVRIL LAVIGNE(entenderam o trocadilho com a ilustração de inicio de post?) e está ficando ótimo,e voltando ao nosso tuto,hoje vou ensinar um menu bem simples e super delicado,dá um tom de capricho ao blog,vejam:


Querem aprender a fazer? Clique em 'Leia Mais' ~  

1. Vá em Design >  Editar HTML e procure por "]]></b:skin>". Acima da tag, cole:


.Slowly {

width:210px;
}
Título {
background:#eaeaea;
color: #e2c1d2;
float:left;
padding:5px; 
text-align:center;
width:200px;
-webkit-transition-duration: .95s;
font: bold 14px tahoma;
letter-spacing:3px;
border-radius:3px 3px 0px 0px;
}
Back {
background:#eaeaea;
float:left;
padding:4px; 
width:202px;
-webkit-transition-duration: .95s;
border-radius:0px 0px 3px 3px;
}
Slow {
background:#fad0de;
color: #ffffff;
float:left;
width:206px;
padding:2px;
letter-spacing:2px;
text-align:center;
-webkit-transition-duration: .45s;
font: bold 11px georgia;
text-shadow: 2px 1px 2px #909090;
}
Slow:hover {
background:#e2e2e2;
-webkit-transition-duration: .50s;
text-shadow: 2px 1px 2px #bfabab;
}



- Entendendo o código:

Título { refere-se as configurações do título, aquela partezinha cinza do começo. 
Back { refere-se aparte cinza de baixo.
Slow { refere-se ao menu em si.
Slow:hover { refere-se ao menu quando passa o mouse.

Após configurar da forma que deseja, adicione um gadget de HTM/JavaScript e nele, cole:

<center><div class="Slowly">
<título>Navegue</título><a href="LINK"><slow>HOME</slow></a><a href="LINK"><slow>TUTORIAL</slow></a><a href="LINK"><slow>SOBRE</slow></a><a href="LINK"><slow>EXTRAS</slow></a><a href="LINK"><slow>QUEM SOMOS</slow></a><a href="LINK"><slow>AGRADECIMENTOS</slow></a><back><p></p></back>
</div></center>


 CRÉDITOS AO FAMOSO: KAWAII WORLD 

4 comentários:

  1. Esse menu fica muito lindo, amei...Mais para ser sincero, prefiro eles bem pequenos, o quanto menor, melhor, pois assim ocupo menos espaço...

    Abraços...
    Things Crazy

    ResponderExcluir
    Respostas
    1. esse é de usar na sidebar,eu também prefiro os pequenos,principalmente os que ficam no cabeçalho

      Excluir