Menu Out

Vamos ao primeiro tutorial do dia. Ele se chama "Menu Out", achei ele no KW então ai esta os merecidos créditos. Vamos ao menu? Ele e super fácil de fazer, o efeito e super simples mas é perfeito para menus de sidebar.

Brevia do efeito

1. Vá ate seu HTML e procure por ]]><b:skin , assim que o achar acima dele adicione esse código:

Códigos

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

2. Modifique as partes marcadas em vermelho, e salve. Vá ate seu layout e abra um gadget de HTML Java/Scripte dentro dele adicione:

Códigos

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

Arrume as partes em negrito, e prontinho. E ai gostaram?