Men? horizontal tipo list?n hecho con CSS3

Este es un men? tipo horizontal list?n que est? hecho con CSS3 por completo, nada de im?genes, y da el aspecto de que estuviera envolviendo el blog. Queda bien en blogs que tienen los bordes del contendor definidos, y/o que tienen un color de fondo distinto al contenedor principal.

Un ejemplo de este men? puedes verlo a continuaci?n.

• ? Pesta?a 1
• ? Pesta?a 2
• ? Pesta?a 3
• ? Pesta?a 4

Para poner este men? tipo list?n en tu blog, entra a la Edici?n HTML de tu plantilla, y antes de
]]></b:skin> pega los estilos:

/* Men? List?n
----------------------------------------------- */
#menuListon:after, #menuListon:before {
content: '';
position: absolute;
}

#menuListon {
height:25px; /* Alto del men? */
text-align: center;
position: relative;
margin: 0 -30px 5px -30px;
padding: 10px 0;
background: #e5592e; /* Color del list?n */
background-image: -moz-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: -webkit-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
box-shadow: 0 2px 0 #bbb;
}

#menuListon:before, #menuListon:after {
border-style: solid;
border-color: transparent;
bottom: -10px;
}

#menuListon:before {
border-width: 0 20px 10px 0;
border-right-color: #8C3115; /* Color de la sombra del doblez */
left: 0;
}

#menuListon:after {
border-width: 0 0 10px 20px;
border-left-color: #8C3115; /* Color de la sombra del doblez */
right: 0;
}

#menuListon ul {
margin-top: 0px;
}

#menuListon li {
list-style: none;
display: inline;
padding-right:20px;
}

#menuListon li a {
text-shadow: 0 2px 1px rgba(0,0,0,0.5);
display: inline;
text-decoration: none;
color: #f0f0f0; /* Color del texto */
font-size: 18px; /* Tama?o del texto */
transition:all .1s linear;
-o-transition:all .1s linear;
-moz-transition:all .1s linear;
-webkit-transition:all .1s linear;
}

#menuListon li a:hover {
font-size:20px; /* Tama?o del texto al pasar el cursor */
transition:all .1s linear;
-o-transition:all .1s linear;
-moz-transition:all .1s linear;
-webkit-transition:all .1s linear;
}

Luego, SIN expandir los artilugios busca este c?digo:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Nombre de mi blog (cabecera)' type='Header'/>
</b:section>

Debajo de �l pega el HTML del men?:

<div id='menuListon'>
<ul>
  <li><a href='URL del enlace'> &#10029; Pesta?a 1</a></li>
  <li><a href='URL del enlace'> &#10029; Pesta?a 2</a></li>
  <li><a href='URL del enlace'> &#10029; Pesta?a 3</a></li>
  <li><a href='URL del enlace'> &#10029; Pesta?a 4</a></li>
  </ul>
</div>

Ah? agrega las URLs de tus enlaces y el nombre de tus pesta?as. Lo que est? en negrita son los caracteres de estrellas, los puedes eliminar si lo deseas.

En el primer c?digo, ver?s en color verde algunas ?reas que se pueden personalizar, tales como el color de fondo, del texto, etc.
Si el list?n quedara muy abierto entonces modifica los dos -30px que est?n en la parte azul, con un valor m?s cercano a cero se har? m?s reducida la abertura del list?n.

El men? estar? debajo de la cabecera, si deseas que est� arriba, entonces el c?digo del segundo paso, en lugar de pegarlo debajo de ese c?digo, p�galo arriba de �l.

No est? de m?s decir que como usa CSS3 s?lo se ver? bien en navegadores modernos, as? que navegadores con versiones antiguas abstenerse.
Como puedes ver, es un men? sencillo pero muy est�tico, y adem?s hecho s?lo con CSS.