Tutorial - Menu zoom 3D

Oiiê gatonas & gatinhos :3
Novamente eu fiquei sem postar no blog :(
Bom, dessa vez teve um bom motivo ... Eu estava 
criando o novo Layout ; Eu gostei muito dele .
Vamos parar de enrolar e vamos logo ao tutorial ?





Legal né? Então, ele é muito fácil e simples. Isso é o CSS :

/*** Menu por BCoelho /JUST-OUR HTML ***/
.bc1 {background:transparent; color:#ff99cc; font-size: 24px; font-family:"economica"; text-align:center; padding-bottom:15px; padding-top:5px; float: left; margin-top:3px; width:100px; height: 16px; border-top:1px solid #eee; border-bottom:1px solid #eee; text-transform:uppercase;}
.bc1:hover {background:transparent; color:#ff99cc; padding-bottom:15px; padding-top:5px; margin-top:3px; width: 100px; height: 16px; text-transform:uppercase; filter:alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1;-webkit-transform: scale(1.5); text-shadow: 2px 2px 0 rgba(255,102,153,0.5); letter-spacing: 2px; }
@font-face {font-family: "economica"; src: url('http://static.tumblr.com/wch6kjp/R0Rmc3cnd/economica-regular-otf.otf');}

 Explicando: o bc1 é o menu lá, paradinho. Dá pra colocar background ? Sim, só trocar o "transparent" por uma cor em hex. Acho que o resto não tem nada que você nunca tenha visto. O bc1:hover tem os códigos do hover do menu, que é quando passa o mouse em cima. Então, tem as animações e eu tirei as bordas de cime e de baixo, gostei mais dele assim. E o font face embaixo é a font personalizada que eu usei. Da pra trocar ? Sim.

Agora vá em Design  Layout  Adicionar um Gadget  HTML/JavaScript
E cole isso :

<a href="LINK" class="Nome">LINK</a> <a href="LINK" class="Nome">LINK</a> 


Pronto (:

Nenhum comentário:

Postar um comentário