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.
<li><a href="#">Enlace- 7</a></li>
<li><a href="#">Enlace- 8</a></li>
<li><a href="#">Enlace- 9</a></li>
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:
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.
<li> <a href = "#">Link-7</ A> </ li>
<li> <a href = "#">Link-8</ A> </ li>
<li> <a href = "#">Link-9</ A> </ li>
Postagens
