YouTube Twitter

NO TE PIERDADAS DE NADA SIGUE A NEURONAGEEK

En el tutorial de esta semana vamos a crear algo muy importante hoy en día para mantener estilizada y actualizada nuestra página web.

Por eso para esta ocasión estaremos creando un menú completamente en CSS3 y HTML5, algo simple pero funcional, así que veamos:

Código HTML:

 

1
2
3
4
5
6
7
8
<ul class="menu">
	<li><a href="#incio">Inicio</a></li>
	<li><a href="#servicios">Servicios</a></li>
	<li><a href="#">Nosotros</a></li>
	<li><a href="http://www.solointeresante.com/">SoloInteresante</a></li>
	<li><a href="http://www.neuronageek.com/">NeuronaGeek</a></li>
	<li><a href="#contacto">Contanto</a></li>
</ul>

Código CSS:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
ul,li,a { margin:0; padding:0; } /*Para evitar que si nos descuadre los elementos en diferentes navegadores*/
 
ul.menu {
	width: 960px; /*El ancho*/
	height: auto; /*El alto , es auto para que se adapte a la altura de los li*/
	padding: 10px 0 10px 0; /*El sintaxis del padding se define según las manillas del reloj: 
 
        ////////////////////////////////////////
        padding: arriba derecha abajo izquierda;
        ///////////////////////////////////////
        */
 
	border:1px solid #333;
	box-shadow: 0 3px 1px rgba(0,0,0,.5);
 
	background: rgb(255,255,255); /* Navegadores antiguos*/
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* IE10+ */
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
     border-radius: 5px; /*Border redondeados*/
 
     overflow: hidden; /*No mostrar los elementos que se exedan*/
 
}
 
ul.menu li {
	list-style:none;
	float:left;
 
	border-radius: 5px;
	height:auto;
	margin: 0 10px 0 10px;
 
	width:auto;
 
	overflow: hidden;
	position: relative;
 
	text-align:center;
 
	padding: 5px;
 
	transition: background 500ms linear; /*Transición que durará¡ 500microSegundos y seguirá a la misma velocidad siempre [LINEAR]! */
	-webkit-transition: background 500ms linear; /*PARA WEBKIT*/
	-moz-transition: background 500ms linear; /*PARA MOZ*/
	-o-transition: background 500ms linear; /*PARA OPERA*/
	-ms-transition: background 500ms linear; /*MS Explorer*/
 
}
 
ul.menu li:hover {
	background:rgba(0,0,0,.8);
}
 
ul.menu li:hover a {
	color:white;
}
 
ul.menu li a {
	color: #000;
 
	text-decoration: none; /*No decorar el Texto*/
	text-transform: uppercase;
	text-shadow: 1px 1px 1px rgba(51,51,51,.5);
 
	user-select:none; /*Evitar seleccionamiento del texto*/
	-webkit-user-select:none;
	-moz-user-select:none;
}

DEMOSTRACIÓN

ARCHIVOS

 


Te gustó? compartelo!

Avatar de César Méndez

César Méndez

Soy un desarrollador de sistemas, fanático de la Ingeniería de Datos, curioso y explorador. CEO de www.servidoresactivos.com | www.gampinspira.com | www .neuronageek.com

Deja un comentario

404 Not Found
Please forward this error screen to www.sweetcaptcha.com's WebMaster.

The server can not find the requested page:

  • www.sweetcaptcha.com/api.php (port 80)

    Publicidad

    Patrocinadores

    Siguenos en facebook

    Siguenos en Twitter