Tutorial - Menu sombra colorido

Oi pessoas lindas *u*

Então como agora eu tenho mas criatividade vou trazer

mas tutoriais , utilitários, imagens e etc ..

vou tentar nunca mas deixar esse blog abandonado :3'

Clique em leia mais & vamos ao tutorial n_n

Exemplo de menu .

Coloque isso no seu CSS :

.menu {float: left; width:400px; margin-top: 10px; text-align: left; margin-left: 70px; position:absolute;}
.menu1 {float: left; margin-right: 1px; display: inline-block; width:60px; letter-spacing: 0px; font-family: tinytots; font-size: 8px; text-align: center; margin-bottom: 1px; background-color: #FFC0CB; color: #FFFFFF; text-decoration: none; text-transform: uppercase; height:15px; line-height: 15px; padding: 4px;opacity:0.8;-webkit-transition:All 2.9s ease-out 0.1s;}
.menu1:hover {font-weight: none;z-index:auto;color: #FFFFFF;opacity:1;height:75px;text-shadow:0px 65px 0px #E8E8E8;-webkit-transition:All 0.3s ease-out 0.3s;-moz-transition:All 0.3s ease-out 0.3s;}
.menu2 {float: left; margin-right: 1px; display: inline-block; width:60px; letter-spacing: 0px; font-family: tinytots; font-size: 8px; text-align: center; margin-bottom: 1px; background-color: #F08080; color: #FFFFFF; text-decoration: none; text-transform: uppercase; height:15px; line-height: 15px; -webkit-transition:All 2.9s ease-out 0.1s; padding: 4px;opacity:0.8;}
.menu2:hover {font-weight: none;z-index:auto;color: #FFFFFF;opacity:1;height:65px;text-shadow:0px 55px 0px #E8E8E8;-webkit-transition:All 0.3s ease-out 0.3s;-moz-transition:All 0.3s ease-out 0.3s;}
.menu3 {float: left; margin-right: 1px; display: inline-block; width:60px; letter-spacing: 0px; font-family: tinytots; font-size: 8px; text-align: center; margin-bottom: 1px; background-color: #EEE8AA; color: #FFFFFF; text-decoration: none; text-transform: uppercase; height:15px; line-height: 15px; -webkit-transition:All 2.9s ease-out 0.1s; padding: 4px;opacity:0.8;}
.menu3:hover {font-weight: none;z-index:auto;color: #FFFFFF;opacity:1;height:55px;text-shadow:0px 45px 0px #fff;-webkit-transition:All 0.3s ease-out 0.3s;-moz-transition:All 0.3s ease-out 0.3s;}
.menu4 {float: left; margin-right: 1px; display: inline-block; width:60px; letter-spacing: 0px; font-family: tinytots; font-size: 8px; text-align: center; margin-bottom: 1px; background-color: #6495ED; color: #FFFFFF; text-decoration: none; text-transform: uppercase; height:15px; line-height: 15px; -webkit-transition:All 2.9s ease-out 0.1s; padding: 4px;opacity:0.8;}
.menu4:hover {font-weight: none;z-index:auto;color: #FFFFFF;opacity:1;height:45px;text-shadow:0px 35px 0px #E8E8E8;-webkit-transition:All 0.3s ease-out 0.3s;-moz-transition:All 0.3s ease-out 0.3s;}
 .menu5 {float: left; margin-right: 1px; display: inline-block; width:60px; letter-spacing: 0px; font-family: tinytots; font-size: 8px; text-align: center; margin-bottom: 1px; background-color: #7CCD7C; color: #FFFFFF; text-decoration: none; text-transform: uppercase; height:15px; line-height: 15px; -webkit-transition:All 2.9s ease-out 0.1s; padding: 4px;opacity:0.8;}
.menu5:hover {font-weight: none;z-index:auto;color: #FFFFFF;opacity:1;height:35px;text-shadow:0px 25px 0px #E8E8E8;-webkit-transition:All 0.3s ease-out 0.3s;-moz-transition:All 0.3s ease-out 0.3s;}

Eu aconselho a mudar só o .menu, o resto já ta bonitinho !

Se quiser mudar algo, mude as cores.

Por último vá em Design  Layout  Adicionar um Gadget    HTML/JavaScript

E cole isso :

<div class=”menu”>
<a class=”menu1” href=”LINK” >TITULO</a>
<a class=”menu2” href=”LINK” >TITULO</a>
<a class=”menu3” href=”LINK” >TITULO</a>
<a class=”menu4” href=”LINK” >TITULO</a>
<a class=”menu5” href=”LINK” >TITULO</a>
</div>

Essa parte nem precisa explicar né ?

Espero que tenham gostado 3Beijo ;*