CSS: menu con gradienti cross-browser

I CSS3 ora supportano il concetto di gradienti (sfumature) per gli sfondi degli elementi. Al momento, tuttavia, tale supporto viene conseguito mediante i prefissi proprietari dei browser o i filtri (per Internet Explorer 8). In questo esempio vedremo come realizzare un menu di navigazione con i gradienti CSS3 in modo cross-browser.

Partiamo da una semplice struttura HTML:

<ul id="navigation">

	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Contatti</a></li>

</ul>

Iniziamo col definire gli stili del contenitore delle voci del menu assegnandogli un gradiente di sfondo che parte dal colore nero ed arriva ad un grigio scuro (dall'alto in basso):

#navigation {
	height: 3em;
	margin: 0;
	padding: 0 1em;
	background: #000;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#444444');
	background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
	background: -moz-linear-gradient(top,  #000,  #444);
	background: -o-linear-gradient(top, #000, #444);
	list-style: none;
}

Quando si definiscono i gradienti di sfondo, la prima dichiarazione deve essere sempre una dichiarazione di ripiego per quei browser che non supportano i gradienti e che ignoreranno le dichiarazioni che seguono.

La stessa cosa viene fatta per i link del menu:

#navigation a {
	height: 2em;
	position: relative;
	top: 1em;
	float: left;
	bottom: 0;
	padding: 0 1em;
	line-height: 2;
	font-weight: bold;
	text-decoration: none;
	background: #d40;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dd4400', endColorstr='#ff9900');
	background: -webkit-gradient(linear, left top, left bottom, from(#d40), to(#f90));
	background: -moz-linear-gradient(top,  #d40,  #f90);
	background: -o-linear-gradient(top,  #d40,  #f90);
	color: #fff;
	border-radius: 8px 8px 0 0;
}

#navigation a:hover {
	background: #f90;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9900', endColorstr='#dd4400');
	background: -webkit-gradient(linear, left top, left bottom, from(#f90), to(#d40));
	background: -moz-linear-gradient(top,  #f90,  #d40);
	background: -o-linear-gradient(top,  #f90,  #d40);
	color: #fff;
}	

Qui abbiamo definito un gradiente che parte sempre dall'alto in basso ma che va dall'arancione chiaro ad un arancione più scuro. Inoltre abbiamo invertito il gradiente su :hover.

Potete visionare l'esempio finale in questa pagina.