PRIMERO HACEMOS NUESTRO MENÚ EN HTML
<html>
<head>
<title> pagina</title>
<link rel="stylesheet" type="text/css"
href="css/estilos.css">
<meta charset="utf-8">
</head>
<body>
<nav>
<ul>
<li><a href="inicio.html">INICIO</a></li>
<li><a href="inicio.html">VISION</a></li>
<li><a href="inicio.html">MISIÓN</a></li>
<li><a href="inicio.html">NOVEDADES</a></li>
<li><a href="inicio.html">NOTICIAS</a></li>
</ul>
</nav>
</body>
</html>
_______________________________________________________
SEGUNDO APLICAMOS NUESTRO MENÚ CON CSS
body{
background: -webkit-linear-gradient(left, rgba(212,228,239,1) 0%, rgba(134,174,204,1) 100%);
}
nav{
/*Bordes redondeados*/
-webkit-border-radius:10px;/*Para chrome y Safari*/
-moz-border-radius:10px;/*Para Firefox*/
-o-border-radius:10px;/*Para Opera*/
border-radius:10px;/*El estandar por defecto*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#CCC));/*Para chrome y Safari*/
/*Degradados*/
background-image: -moz-linear-gradient(top center, #FFF, #CCC);/*Para Firefox*/
background-image: -o-linear-gradient(top, #FFF, #CCC);/*Para Opera*/
background-image: linear-gradient(top, #FFF, #CCC);/*El estandar por defecto*/
overflow:hidden;
padding:10px 10px;
width:1000px;
margin: 0 auto;
}
nav ul li{
/*Bordes redondeados*/
-webkit-border-radius:5px;/*Chrome y Safari*/
-moz-border-radius:5px;/*Firefox*/
-o-border-radius:5px;/*Opera*/
border-radius:5px;/*Estandar por defecto*/
float:left;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
margin-right:90px;
text-align:center;
/*Sombras para texto, los mismos parametros que box-shadow*/
text-shadow: 0px 1px 0px #FFF;
}
nav ul li:hover{
/*Degradado de fondo*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to( #E3E3E3));/*Chrome y Safari*/
background-image: -moz-linear-gradient(top center, #FFF, #E3E3E3);/*Firefox*/
background-image: -o-linear-gradient(top, #FFF, #E3E3E3);/*Opera*/
background-image: linear-gradient(top, #FFF, #E3E3E3);/*Estandar por defecto*/
/*Sombras*/
-webkit-box-shadow: 1px -1px 0px #999;/*Chrome y Safari*/
-moz-box-shadow: 1px -1px 0px #999;/*Firefox*/
-o-box-shadow: 1px -1px 0px #999;/*Opera*/
box-shadow: 1px -1px 0px #999;/*Estandar por defecto*/
border:1px solid #E3E3E3;
}
nav ul li a{
color:#999;
display:block;
padding:10px;
text-decoration:none;
/*Transiciones*/
-webkit-transition: 0.4s linear all;
-moz-transition: 0.4s linear all;
-o-transition: 0.4s linear all;
transition: 0.4s linear all;
}
nav ul li a:hover {
color:#000;
}
No hay comentarios:
Publicar un comentario