saiba como é feito: "menu gradiente CSS3"

fonte e créditos deste presente post:
...grande amiga "Gema"
...do blog  fantático!:
"gemablog"

Menú con gradient CSS3

Este menú está creado con CSS3,  consiguiendo un elegante efecto hover con gradient,  la idea es de Insicdesigns. basándose en el menú de Dragon Interactive

Para añadirlo a nuestro blog editamos un gadget de HTML y en su interior añadimos:

<div class="wrapper">
<div class="container">
<ul class="menu" rel="sam1">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Enlace- 1</a></li>
<li><a href="#">Enlace- 2</a></li>
<li><a href="#">Enlace- 3</a></li>
<li><a href="#">Enlace- 4</a></li>
<li><a href="#">Enlace- 5</a></li>
<li><a href="#">Enlace- 6</a></li>
<li><a href="#">Enlace- 7</a></li>
</ul>
</div>
</div>

Guardamos los cambios y en plantilla edición de HTML justo antes de ]]></b:skin> añadimos los estilos:

.wrapper {
    width: 100%;
    height: 80px;
    background : #464646;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
    background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
    border-top: 2px solid #939393;
    position: relative;
    margin-bottom: 30px;
}
ul {
    margin: 0;
    padding: 0;
}

ul.menu {
    height: 80px;
    border-left: 1px solid rgba(0,0,0,0.3);
    border-right: 1px solid rgba(255,255,255,0.3);
    float:left;
}

ul.menu li {
    list-style: none;
    float:left;
    height: 79px;
    text-align: center;
    background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
    background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
    }

ul li a {
    color: #363636;
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    display: block;
    padding: 0 20px;
    border-left: 1px solid rgba(255,255,255,0.1);
    border-right: 1px solid rgba(0,0,0,0.1);
    text-align: center;
    line-height: 79px;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
    background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
    -webkit-transition-property: background;
    -webkit-transition-duration: 700ms;
    -moz-transition-property: background;
    -moz-transition-duration: 700ms;
    }

ul li a:hover {
    background: transparent none;
}

ul li.active a{
    background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
    background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}

Añadimos nuestro enlaces editando el gadget de HTML y sustituyendo el texto que hará de enlace por nuestro texto, la almohadilla  # la sustituimos por la url del sitio que vamos a enlazar.

Si deseamos añadir más enlaces bastará con añadir tantas lineas como enlaces deseamos añadir.

<li><a href="#">Enlace- 7</a></li>

<li><a href="#">Enlace- 8</a></li>

<li><a href="#">Enlace- 9</a></li>

traduzido:                                                      

menu gradiente CSS3

Este menu é criado com CSS3, recebendo uma multa, passe com gradiente, a idéia é Insicdesigns. com base no menu Dragon Interactive

Para adicionar ao nosso blog, editar um gadget dentro do HTML e adicionar:

class="wrapper"> <div
class="container"> <div
class = "menu" rel="sam1"> <ul
<li class="active"> <a href="#"> Home </ a> </ li>
<li> <a href = "#">Link-1</ A> </ li>
<li> <a href = "#">Link-2</ A> </ li>
<li> <a href = "#">Link-3</ A> </ li>
<li> <a href = "#">Link-4</ A> </ li>
<li> <a href = "#">Link-5</ A> </ li>
<li> <a href = "#">Link-6</ A> </ li>
<li> <a href = "#">Link-7</ A> </ li>
</ Ul>
</ Div>
</ Div>

Salve as alterações e editar o HTML modelo antes ]]></ B: skin> 
adicionar estilos:

. Wrapper {
    width: 100%;
    height: 80px;
    background: # 464646;
    background:-webkit-gradiente (linear, inferior esquerda, 

superior esquerdo, a partir de (rgb (168168168)),

 a (rgb (69,69,69)));
    background:-moz-linear de gradiente (de cima, 

rgb (168168168) rgb (69,69,69));
    border-top: 2px solid # 939393;
    position: relative;
    margin-bottom: 30px;
}
ul {
    margin: 0;
    padding: 0;
}

{Ul.menu
    height: 80px;
    border-left: 1px solid RGBA (0,0,0,0.3)
    border-right: 1px solid RGBA (255,255,255,0.3)
    float: left;
}

li {ul.menu
    list-style: none;
    float: left;
    height: 79px;
    text-align: center;
    background:-webkit-gradiente (radial, 50% 100% 10 50% 50% 90,

 a partir de (RGBA (31,169,244,1)), a (RGBA (0,28,78, 1)));
    background:-moz-radial gradiente (45deg centro 80px, tampa círculo,

 RGBA (31,169,244,1) 0%, RGBA (0,28,78, 1) 100%)
    }

ul li {
    color: # 363636;
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    display: block;
    padding: 0 20px;
    border-left: 1px solid RGBA (255,255,255,0.1)
    border-right: 1px solid RGBA (0,0,0,0.1)
    text-align: center;
    line-height: 79px;
    background:-webkit-gradiente (linear, inferior esquerda, 

superior esquerdo, a partir de (rgb (168168168)), a (rgb (69,69,69)));
    background:-moz-linear de gradiente (de cima, rgb (168168168) 

rgb (69,69,69));
    -Webkit-propriedade de transição: do fundo;
    -Webkit-duração da transição: 700 ms;
    -Moz-propriedade de transição: do fundo;
    -Moz-duração da transição: 700 ms;
    }

ul li a: hover {
    background: none transparente;
}

li.active ul {um
    background:-webkit-gradiente (radial, 50% 100% 10 50% 50% 90, 

a partir de (RGBA (31,169,244,1)), a (RGBA (0,28,78, 1)));
    background:-moz-radial gradiente (45deg centro 80px, 

tampa círculo, RGBA (31,169,244,1) 0%, RGBA (0,28,78, 1) 100%)
}

Nós adicionamos nossos links, editando o gadget HTML e substituir o texto do link que vai fazer o nosso bloco de texto # substituí-lo com a URL do site que apontam para.

Se você quiser adicionar mais links basta adicionar quantas linhas que nós queremos adicionar links.

<li> <a href = "#">Link-7</ A> </ li>

<li> <a href = "#">Link-8</ A> </ li>

<li> <a href = "#">Link-9</ A> </ li>