banner
hace 4 años
660 Views

Menú Css3 Difuminado

Autor:
banner

 
 
Hola amigos esta vez os muestro una manera de realizar un menú vertical simple con distintas funcionalidades Css3, con las cuales crearemos un diseño novedoso de manera fácil y sencilla.

 

En este menú utilizaremos ciertas características Css3 para crear animaciones, con las que daremos dinamismo al propio menú.

Empezando con el ejercicio en sí, explicaremos el código html primero ya que no tiene ninguna complicación.


<div class="content">
<ul class="menu">
<li><a href="#">Inicio</li>
<li><a href="#">Servicios</li>
<li><a href="#">Web Design </li>
<li><a href="#">Sobre Mi </li>
<li><a href="#">Portafolio </li>
<li><a href="#">Contacto </li>
</ul>
</div>

Como he comentado en las lineas de arriba, el código html es sencillo; una clase contenedora y dentro una lista con sus respectivos enlaces, le hemos dado un nombre al contenedor y a la lista, para poderles dar diseño después desde Css.

 

Con esto el código html estaría terminado y pasaríamos al Css

 

En este código nos encargaremos de diseño, en este caso vamos a hacer un efecto difuminado de los textos que no estén activados.Para realizar ese efecto utilizaremos la nueva función Css3; text_shadow.

body{
 background-color: transparent;
 background-repeat: repeat, no-repeat;
 background-position: center center;
 background-attachment: fixed;
 -webkit-background-size: auto, cover;
 -moz-background-size: auto, cover;
 -o-background-size: auto, cover;
 background-size: auto, cover;
 color: #fff;
 font-family: 'Josefin Slab', Arial, sans-serif;
 font-size: 13px;
}
.container{
 position: relative;
}
a{
 color: #fff;
 text-decoration: none;
}
.clr{
 clear: both;
}
 .content{
 position: relative;
 width: 580px;
 margin: 0 auto;
}
h1{
 margin: 0px;
 padding: 20px;
 font-size: 42px;
 color: #fff;
 text-align: left;
 font-weight: 400;
 text-align: left;
}
h1 span{
 font-size: 22px;
 color: #ddd;
 padding-top: 10px;
}


header{ 
font-family:'Arial Narrow', Arial, sans-serif; 
line-height: 24px; 
font-size: 11px; 
background: #000; 
opacity: 0.9; 
text-transform: uppercase; 
z-index: 9999;
 position: relative;
 -moz-box-shadow: 1px 0px 2px #000; 
-webkit-box-shadow: 1px 0px 2px #000; 
box-shadow: 1px 0px 2px #000; } 
header a{ 
padding: 0px 10px; 
letter-spacing: 1px; 
color: #ddd; 
display: block; 
float: left; } 
header a:hover{color: #fff; } 
header span.right{ float: right; } 
header span.right a{ float: none; display: inline; }
.more ul{
 text-transform: uppercase;
 font-size: 11px;
 padding: 50px 0px 30px 20px;
 height: 30px;
 clear: both;
 font-family: 'Arial Narrow', Arial, sans-serif;
 width: 830px;
 margin: 0 auto;
 color: #fff;
}
.more ul li{
 float: left;
 margin: 0px 2px;
}
.more ul li.selected a,
.more ul li.selected a:hover{
 background: #000;
 color: #fff;
 text-shadow: none;
}
.more ul li a{
 text-shadow: 1px 1px 1px #fff;
 color: #555;
 background: #f7f7f7;
 padding: 3px 6px;
 -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.6);
 -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.6);
 box-shadow: 1px 1px 2px rgba(0,0,0,0.6);
}
.more ul li a:hover{
 background: #000;
 color: #fff;
 text-shadow: none;
}

</pre>
<pre>.menu{
 padding: 0px;
 margin: 0 0 10px 0;
 position: relative;
 background-color:#8437a0;
 padding: 35px;
 width: 330px;
 box-shadow: 0 0px 2px #fff, 0 0 4px #fff inset;
}
.menu li{
 font-size: 50px;
 display: block;
}
.menu li a{
 color: transparent;
 display: block;
 text-transform: uppercase;
 text-shadow: 0px 0px 2px #542466;
 letter-spacing: 1px;
 -webkit-transition: all 0.3s ease-in-out;
 -moz-transition: all 0.3s ease-in-out;
 -o-transition: all 0.3s ease-in-out;
 -ms-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
}
.menu:hover li a{
 text-shadow: 0px 0px 10px #0d1a3a;
}
.menu li a: hover{
 color: #fff;
 text-shadow: 0px 0px 1px #fff;
 padding-left: 10px;
}
h1{
 font-family: Arial, Helvetica, sans-serif;
 font-style: italic;
 font-size: 36px;
 color: #FFF;
 text-align: center;
 margin-top: 3%;
 margin-bottom: 0%;
}
h2{
 font-family: Arial, Helvetica, sans-serif;
 font-style: italic;
 font-size: 33px;
 color: #FFF;
 margin-bottom: 6%;
 text-align: center;
}
h2.contacto{
 font-family: Arial, Helvetica, sans-serif;
 font-style: italic;
 font-size: 36px;
 color: #FFF;
 margin-top: 7%;
 margin-left: -0%;
}

 

Como podemos apreciar en el código utilizo el text-shadow para crear ese difuminado para los elementos no activados, así como las transiciones para mover un poco los elementos activados.Todo lo demás son códigos de diseño Css básico; como pueden ser tipografías, dimensiones, fondos, posiciones, …

Cualquier duda que tengáis ya sabéis

Comentármela !!!

Sendoa

Sendoa

¡Aúpa! Me llamo Sendoa y soy un apasionado del Diseño y Desarrollo Web.

Fundador de WebSdcStudio.es; mi blog personal, donde expongo diferentes contenidos de ayuda, consejos, trucos, recursos... sobre el mundo del Diseño y Desarrollo Web.
Sendoa

Latest posts by Sendoa (see all)

Articulos Relacionados

Artículos Categorías:
Css3 · Desarrollo Web
banner

Deja un Comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Left Menu Icon
Web Sdc Studio
Right Menu Icon