saiba como é feito: "menu gradiente CSS3"
Autor: Edilene brandao da silva | Publicado: 2013-05-05T01:18:00-07:00



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




 Menú con gradient CSS3 



Este menú está creado con CSS3,&nbsp; consiguiendo un elegante efecto hover con gradient,&nbsp; 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:

 

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



Guardamos los cambios y en plantilla edición de HTML justo antes de ]]&gt;&lt;/b:skin&gt; 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&nbsp; # 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.


&lt;li&gt;&lt;a href="#"&gt;Enlace- 7&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;a href="#"&gt;Enlace- 8&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;a href="#"&gt;Enlace- 9&lt;/a&gt;&lt;/li&gt;


traduzido: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 



 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"&gt; &lt;div
class="container"&gt; &lt;div
class = "menu" rel="sam1"&gt; &lt;ul
&lt;li class="active"&gt; &lt;a href="#"&gt; Home &lt;/ a&gt; &lt;/ li&gt;
&lt;li&gt; &lt;a href = "#"&gt;Link-1&lt;/ A&gt; &lt;/ li&gt;
&lt;li&gt; &lt;a href = "#"&gt;Link-2&lt;/ A&gt; &lt;/ li&gt;
&lt;li&gt; &lt;a href = "#"&gt;Link-3&lt;/ A&gt; &lt;/ li&gt;
&lt;li&gt; &lt;a href = "#"&gt;Link-4&lt;/ A&gt; &lt;/ li&gt;
&lt;li&gt; &lt;a href = "#"&gt;Link-5&lt;/ A&gt; &lt;/ li&gt;
&lt;li&gt; &lt;a href = "#"&gt;Link-6&lt;/ A&gt; &lt;/ li&gt;
&lt;li&gt; &lt;a href = "#"&gt;Link-7&lt;/ A&gt; &lt;/ li&gt;
&lt;/ Ul&gt;
&lt;/ Div&gt;
&lt;/ Div&gt;




Salve as alterações e editar o HTML modelo antes ]]&gt;&lt;/ B: skin&gt;&nbsp;
adicionar estilos:

. Wrapper {
&nbsp;&nbsp;&nbsp;&nbsp;width: 100%;
&nbsp;&nbsp;&nbsp;&nbsp;height: 80px;
&nbsp;&nbsp;&nbsp;&nbsp;background: # 464646;
&nbsp;&nbsp;&nbsp;&nbsp;background:-webkit-gradiente (linear, inferior esquerda,&nbsp;
superior esquerdo, a partir de (rgb (168168168)),
&nbsp;a (rgb (69,69,69)));
&nbsp;&nbsp;&nbsp;&nbsp;background:-moz-linear de gradiente (de cima,&nbsp;
rgb (168168168) rgb (69,69,69));
&nbsp;&nbsp;&nbsp;&nbsp;border-top: 2px solid # 939393;
&nbsp;&nbsp;&nbsp;&nbsp;position: relative;
&nbsp;&nbsp;&nbsp;&nbsp;margin-bottom: 30px;
}
ul {
&nbsp;&nbsp;&nbsp;&nbsp;margin: 0;
&nbsp;&nbsp;&nbsp;&nbsp;padding: 0;
}

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

li {ul.menu
&nbsp;&nbsp;&nbsp;&nbsp;list-style: none;
&nbsp;&nbsp;&nbsp;&nbsp;float: left;
&nbsp;&nbsp;&nbsp;&nbsp;height: 79px;
&nbsp;&nbsp;&nbsp;&nbsp;text-align: center;
&nbsp;&nbsp;&nbsp;&nbsp;background:-webkit-gradiente (radial, 50% 100% 10 50% 50% 90,
&nbsp;a partir de (RGBA (31,169,244,1)), a (RGBA (0,28,78, 1)));
&nbsp;&nbsp;&nbsp;&nbsp;background:-moz-radial gradiente (45deg centro 80px, tampa círculo,
&nbsp;RGBA (31,169,244,1) 0%, RGBA (0,28,78, 1) 100%)
&nbsp;&nbsp;&nbsp;&nbsp;}

ul li {
&nbsp;&nbsp;&nbsp;&nbsp;color: # 363636;
&nbsp;&nbsp;&nbsp;&nbsp;font-size: 15px;
&nbsp;&nbsp;&nbsp;&nbsp;font-weight: bold;
&nbsp;&nbsp;&nbsp;&nbsp;text-decoration: none;
&nbsp;&nbsp;&nbsp;&nbsp;text-transform: uppercase;
&nbsp;&nbsp;&nbsp;&nbsp;display: block;
&nbsp;&nbsp;&nbsp;&nbsp;padding: 0 20px;
&nbsp;&nbsp;&nbsp;&nbsp;border-left: 1px solid RGBA (255,255,255,0.1)
&nbsp;&nbsp;&nbsp;&nbsp;border-right: 1px solid RGBA (0,0,0,0.1)
&nbsp;&nbsp;&nbsp;&nbsp;text-align: center;
&nbsp;&nbsp;&nbsp;&nbsp;line-height: 79px;
&nbsp;&nbsp;&nbsp;&nbsp;background:-webkit-gradiente (linear, inferior esquerda,&nbsp;
superior esquerdo, a partir de (rgb (168168168)), a (rgb (69,69,69)));
&nbsp;&nbsp;&nbsp;&nbsp;background:-moz-linear de gradiente (de cima, rgb (168168168)&nbsp;
rgb (69,69,69));
&nbsp;&nbsp;&nbsp;&nbsp;-Webkit-propriedade de transição: do fundo;
&nbsp;&nbsp;&nbsp;&nbsp;-Webkit-duração da transição: 700 ms;
&nbsp;&nbsp;&nbsp;&nbsp;-Moz-propriedade de transição: do fundo;
&nbsp;&nbsp;&nbsp;&nbsp;-Moz-duração da transição: 700 ms;
&nbsp;&nbsp;&nbsp;&nbsp;}

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

li.active ul {um
&nbsp;&nbsp;&nbsp;&nbsp;background:-webkit-gradiente (radial, 50% 100% 10 50% 50% 90,&nbsp;
a partir de (RGBA (31,169,244,1)), a (RGBA (0,28,78, 1)));
&nbsp;&nbsp;&nbsp;&nbsp;background:-moz-radial gradiente (45deg centro 80px,&nbsp;
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.


&lt;li&gt; &lt;a href = "#"&gt;Link-7&lt;/ A&gt; &lt;/ li&gt;

&lt;li&gt; &lt;a href = "#"&gt;Link-8&lt;/ A&gt; &lt;/ li&gt;

&lt;li&gt; &lt;a href = "#"&gt;Link-9&lt;/ A&gt; &lt;/ li&gt;