Menú con html5 y css3

#codigo{
background:#999;
color:#FFF;
padding:10px;
border-radius:5px;
border:solid 1px #DEDEDE;
}
#resultado{
padding:10px;
background:#C00;
}

menú con HTML5 y CSS3

Como los menú con html5 y css3 está siendo cada vez más usando en la creación de sitio web, podemos seguir explotando el html5 y el css3 y todas sus funcionalidades para implementarla en nuestra web. En este pequeño tutorial vamos a seguir creando menú con html5 y css3 para darle un toque más profesional a nuestro sitio web.

Algunos ejemplos de menu con HTML5 y CSS3 son los siguientes.
Menú dinamico con HTML5 y CSS3
Menú vertical con HTML5 y CSS3
Como Crear Un Menú
Como Crear Un Menú Parte 2
Menú en HTML5 y CSS3

Este menú con html5 y css3 va a consistir en crear una botonera utilizando solo html5 ya que podemos obtener efectos muy elegantes si lo combinamos con css3. En entradas anteriores creamos un menú dinámico con css3 y HTML5 pero en ese caso utilizamos algunas etiquetas que no eran del propio html5 ahora todo lo que aremos será con este lenguaje de programación web.

  • Que necesitamos para crear menú con HTML5 y CSS3?

Lo único que necesitamos es un editor de texto como siempre te digo que hasta en el simple bloc de notas lo puedes hacer, y por supuesto tener los navegadores actualizados para poder ver nuestro menú, ya que este nuevo estándar no soporta versiones viejas.
Y si quieres aprender más de estos dos lenguajes visita nuestro Curso de HTML5 y CSS3 donde explicamos todo al detalle

  • Puedo ver este menú con html5 y css3 si utilizo IE?.
  • Buena pregunta, si está leyendo este tutorial de como crear menú con HTML5 y CSS3 y estas utilizando IE te recomendamos que lo actualice a su última versión o sea la versión 10.0 que es la que soporta todos las etiquetas html5 que han salido y por consiguiente es la que utilizaremos para crear nuestros menú.

    Para empezar a crear nuestro menú en html5 y css3 lo primero que vamos e a crear son 2 documentos uno con el nombre de menú.html y el otro con el nombre menú-estilo.css con esto listo empezamos a crear el código html5.

    Archivo menu.html

    <!DOCTYPE html>
    <head>
    <meta charset=”utf-8″ />
    <title>Menu con HTML5 y CSS3</title>
    <link rel=”stylesheet” href=”menu-estilo.css” type=”text/css” />
    </head>
    <body>
    <header id=”botonera”>
     <nav id=”botonera-2″>
         <menu>Home</menu>
            <menu>Noticias</menu>
            <menu>Facebook</menu>
            <menu>Twitter</menu>
            <input placeholder=”Buscar… “type=”search” name=”buscar” id=”buscar”/>
            <input type=”submit” value=”Buscar” id=”submit” />   
        </nav>
    </header>
    </body>
    </html>

    Si te fijas en el código del archivo menú.html notaras que el código es muy reducido y que es 100% html5 en este código sustituimos las antiguas <ul> <li> para hacer menú y lo hacemos directamente con la etiqueta <menú> de html5, también identificamos la cabecera de la página web donde ira la la botonera con la etiqueta <header> y dentro del <header> colocamos la botonera aunque esta por lo regular va del lado debajo de la cabecera pero bueno para este tutorial así la utilizamos.

    body{
     background:#666;
     }
    #botonera{
     width:98%;
     margin:10px auto;
     height:60px;
     background:none;
     background-clip: padding-box;    
     -moz-background-clip: padding;    
     -webkit-background-clip: padding; 
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
     border-radius:10px;
     border: 10px solid rgba(255,255,255,0.3);
     }
    #botonera-2{
     border-radius:3px;
     width:100%;
     height:60px;
     margin:0px;
     background:linear-gradient(#CCC 0%, #333 100%);
     background:-moz-linear-gradient(#CCC 0%, #333 100%);
     background:-ms-linear-gradient(#CCC 0%, #333 100%);
     background:-o-linear-gradient(#CCC 0%, #333 100%);
     background:-webkit-linear-gradient(#CCC 0%, #333 100%);
     }
    menu{
     display:inline-block;
     width:100px;
     text-align:center;
     margin:10px auto;
     background:none;
     color:#fff;
     font:bold;
     padding:10px;
     }
    menu:hover{
      background:-moz-linear-gradient(#FFF 0%, #C4C4C4 100%);
     background:linear-gradient(#FFF 0%, #DEDEDE 100%);
     background:-ms-linear-gradient(#FFF 0%, #DEDEDE 100%);
     background:-o-linear-gradient(#FFF 0%, #DEDEDE 100%);
     background:-webkit-linear-gradient(#FFF 0%, #DEDEDE 100%);
     opacity:0.6;
    -moz-opacity:0.6;
    -o-opacity:0.6;
    -webkit-opacity:0.6;
    -ms-opacity:0.6;
     border-radius:5px;
     color:red;
     box-shadow:0 0 10px #FFf;
    -moz-box-shadow:0 0 10px #FFf;
    -ms-box-shadow:0 0 10px #FFf;
    -o-box-shadow:0 0 10px #FFf;
    -webkit-box-shadow:0 0 10px #FFf;
     }
    #buscar{
     background:#fff;
     border-bottom-left-radius:10px;
     border-top-left-radius:10px;
     border-right:0px;
     border:solid 0px #DEDEDE;
     color:#999;
     padding:6px;
     width:150px;
     position:relative;
     display:inline-block;
     margin-left:50px;
     margin-top:15px;
     vertical-align:top;

     }
     #buscar:focus{
      box-shadow:0 0 15px #09F;
    -moz-box-shadow:0 0 15px #09F;
    -ms-box-shadow:0 0 15px #09F;
    -o-box-shadow:0 0 15px #09F;
    -webkit-box-shadow:0 0 15px #09F;
      }
    #submit{
     padding:5px;
     width:70px;
     margin-top:15px;
     border-bottom-right-radius:10px;
     border-top-right-radius:10px;
     display:inline-block;
     position:absolute;
     border:0px;
     background:url(buscar.png);
     vertical-align:top;
     }

    Si te fijas en el código css3 es igual al que hemos trabajado en todos los tutoriales de este blog ahora bien lo que podemos encontrar nuevo en este tutorial son los border transparentes un efecto css3 muy bonito para cualquier sitio web, si te fijas twitter lo tiene implementado, para ver este border tienes que colocar un color de fondo o una imagen así se puede ver el efecto css3.

    En caso que quieras aprender a crear los border transparentes en la próxima entrada vamos a explicar como obtenerlo.

    Bueno con todo esto visto entonces les presentamos el resultado de pueden ponerle un color de fondo para ver como se resaltan los border transparentes.

    Menú-Con-Html5-Y-CSS3

    Si estas biendo el menú es porque es Responve Web Desing o más bien diseño web auto ajustable que se ajusta dependiendo el tamaño de la ventana por eso se ve chiquito en esta parte poque esta dentro del blog y tiene que ajustarse a su tamaño.

    Esta entrada ya fue actualizada ver en: Menú en HTML5 y CSS3

    Bueno amigos con esto termina este pequeño mini tutorial espero y les pueda servir para algo y nos vemos en la próxima entrada…

    Gracias por leer y un cordial saludo. 😀

    Posicionar mi web en google tips

    Comments

    1. By Anónimo

    2. By Anónimo

    3. By Anónimo

    4. By Anónimo

    5. By Anónimo

    6. By Anónimo

    Deja un comentario

    Tu dirección de correo electrónico no será publicada.