24 de fev de 2013

Tutorial - Menu Invert

Oi Oi Gente!
Me desculpem por ter ficado esses dias sem postar é que eu tava estudando, fazendo trabalhos, sem vontade e passando por alguns problemas familiares nos quais não gostaria de comentar aqui, vale salientar que esse problemas podem interferir aqui na rotina do blog ex.: Como nos posts e etc.
O tutorial de hoje foi retirado do Birthday Cake ~Créditos


Vamos lá ~


 - Procure por ]]></b:skin> e acima dele cole: 
.menu {width: auto; color: #e6d3e9; 
text-shadow: -2px -1px -1px #cba0cf; 
filter: dropshadow(color=#cba0cf, offx=-2, offy=-1); 
font: 33px "Play"; letter-spacing: -3px; 
text-transform: lowercase; 
-webkit-transition: all 0.4s ease-out; 
-moz-transition: all 0.4s ease-out; padding: 8px; background: #f2f7f9; 
border-radius: 10px; margin: 5px;} 
.menu:hover {color: #cba0cf; 
text-shadow: -2px -1px -1px #e6d3e9; filter: 
dropshadow(color=#cba0cf, offx=-2, offy=-1);}
No “.menu”, você terá que mudar: color, text-shadow e background. Preste atenção, porque no text-shadow, você terá que colocar a mesma cor do ” dropshadow”, ok?
No “ .menu:hover”, você coloca como “color”, a cor do text-shadow à cima; e no “text-shadow”, coloque a cor da “color” de cima.

- Agora em uma Gadget HTML/Javascript cole:
<a href="URL_AQUI"><div class="menu">NOME</a></div>
No ''URL_AQUI'' coloque o link da pagina que você irá colocar no menu e em ''NOME'' coloque o que vai aparecer no menu.


2 comentários:

  1. Vou usar esse menu no próximo layout do meu blog !!!É muito legal !!!

    http://tennage-teen.blogspot.com.br/

    ResponderExcluir


- Antes de qualquer coisa, fale um pouco da postagem.
- Não desrespeite ninguém e nem o blog!
- Aceito criticas construtivas.
- NÃO aceito APENAS: Seguindo, segue de volta?