02 setembro 2012

Menu de abas diferente!

Olá pessoal!Como estão?
Bom,se quiserem ver um exemplo,olhem no blog Kawaii World.
No gadget "Outros".
E aí,quer aprender a fazer?
Então leia mais!


1. Procure por ]]></b:skin> e antes da tag, cole:

.midnight{
background: #dfdbdb;
font-family: trebuchet ms;
font-size: 11px;
margin: 2px;
color: #000;
display: block;
-moz-box-shadow: inset 4px 0 0px 0 #a09aa3;
-webkit-box-shadow: inset 3px 0 0px 0 #fe79ab;
box-shadow: inset 3px 0 0px 0 #ee79b6;
padding: 3px 3px 3px 6px;
-moz-transition: all 0.4s ease-out;
-webkit-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
-ms-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;}
.midnight:hover
{-moz-box-shadow: inset 550px 0 0px 0 #d5e0c6;
-webkit-box-shadow: inset 550px 0 0px 0 #f192ba;
box-shadow: inset 550px 0 0px 0 #d5e0c6;
color: #818181;}

- Entendendo o código:

background: #dfdbdb; - Cor do seu fundo inicial.
font-family: trebuchet ms; - Fonte.
font-size: 11px;  - Tamanho da fonte.
margin: 2px; - Espaço entre cada linha do menu. 
color: #000; - Cor da fonte.
box-shadow: inset 3px 0 0px 0 #ee79b6; - Cor da linha quando menor.
E o resto você vê quando for trocando.




2. Para usar, vá em um gadget de HTML/JavaScript e cole:

<div class="midnight"> Seu texto </div>

Prontinho! 
Gostaram?
Beijos ^^
Créditos:(www)

Nenhum comentário:

Postar um comentário