Home » , , , , » Como crear un Menú 3D Animado con HTML5 y CSS3

Como crear un Menú 3D Animado con HTML5 y CSS3

Escrito Por Unknown el domingo, 20 de diciembre de 2015 | 10:19




Video Tutorial, sobre como crear un Menú 3D con animaciones HTML5 y CSS3. Para esto solo es de tener vinculado los códigos necesarios como el html y el css correspondiente.

A continuación se muestra el código HTML, para un archivo llamado: index.html:

<!DOCTYPE html>
<html>
<head>
 <title>MENU 3D</title>
 <link rel="stylesheet" type="text/css" href="estilos.css">
</head>
<body>
 <header>
  <section id="menu">
   <ul>
    <a href="#">Inicio</a>
    <a href="#">Acerca</a>
    <a href="#">Servicios</a>
    <a href="#">Contacto</a>
   </ul>
  </section>
 </header>
</body>
</html> 




Ahora el Código/Estilos CSS, para un archivo llamado: estilos.css:

*{
 margin:0;
 padding:0;
}

header{
 width:100%;
 height:50px;
 background:#01A9DB;
 border-top:4px solid #086A87;
 border-bottom:4px solid #086A87;
}

#menu{
 width:470px;
 padding-top:12px;
 margin:auto;
}
#menu ul a{
 text-decoration:none;
 color:#f2f2f2;
 font:bold 16px Verdana;
 padding:13px 17px 17px 17px;
 border:4px solid #086A87;
 margin-right:-8px;
 transition:background .5s, padding .5s;
}

#menu ul a:hover{
 background:#01A9DB;
 padding:17px 24px 25px 24px;

} 

0 comentarios:

Publicar un comentario