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)