Menú básico en CSS3

La llegada de las hojas de estilo CSS3 ha facilitado la forma de convertir un diseño gráfico a código HTML. Con las nuevas propiedades podemos añadir bordes redondeados, sombras internas y externas, sombras para texto, etc.

Para poder ir descubriendo estas nuevas propiedades, vamos a generar un menu de navegación con estilos en CSS3. Lo primero que necesitamos es la estructura HTML:

<div id="container">
	<ul>
		<li><a href="#">Inicio</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contacto</a></li>
	</ul>
</div>

Empezaremos dando estilo al contenedor del menú. El color de fondo lo colocamos en formato rgba para que tenga transparencia de .1 (10% del color).

Redondeamos las esquinas con border-radius, el valor de 100px nos asegura que las esquinas superiores e inferiores se junten. Con box-shadow aplicamos una sombra interna (inset) y un brillo externo, cada conjunto de valores separados por una coma.

#container{
	background:rgba(0,0,0,0.1);
	border-radius:100px;
	box-shadow: inset 0 1px 2px 0 rgba(0,0,0,.5), 0 1px 1px 0 rgba(255,255,255,.1);
	float:left;
	margin:0 auto;
	padding:5px;
}

Ahora quitamos los márgenes y estilo a la lista:

#container ul{
	list-style:none;
	margin:0;
	padding:0;
}

A cada elemento de la lista le colocaremos un borde a la derecha de un color claro y uno a la izquierda un poco mas obscuro, al igual que un brillo interno y una sombra externa, además de centrar el texto y cambiar el color de fondo cuando pasemos el puntero del mouse y hagamos click.

#container ul li{
	background: rgba(255,255,255,.1);
	border-right: 1px solid #666;
	border-left: 1px solid #444;
	box-shadow: inset 0px 1px 1px 0px rgba(255,255,255,.2), 0px 1px 2px 0px rgba(0,0,0,0.5);
	float:left;
	text-align: center;
}
#container ul li:hover {
	background: rgba(255,255,255,.3);
}
#container ul li:active {
	background: rgba(255,255,255,.4);
}

Con los pseudo-selectores :first-child y :last-child haremos que el primero y el último elemento de la lista sólo tengan bordes con otro elemento contiguo, así como redondear las esquinas externas.

#container ul li:first-child {
	border-left: none;
	border-radius: 100px 0 0 100px;
}
#container ul li:last-child {
	border-right: none;
	border-radius: 0 100px 100px 0;
}

Por último, los estilos para los vínculos dentro de cada elemento de la lista.

#container ul li a {
	color: #ddd;
	font: 11px Arial, sans-serif;
	float:left;
	padding:10px 30px;
	text-shadow: 0px 1px rgba(0,0,0,0.5);
	text-decoration: none;
}

Y así de fácil tenemos nuestro menú estilizado completamente en CSS.