CSS: ombre retrocompatibili sui box

La proprietà CSS3 box-shadow è supportata solo dalle più recenti versioni dei browser. Browser come Internet Explorer 8 e inferiori non la supportano. Tuttavia è possibile ottenere un effetto molto simile utilizzando elementi vuoti e bordi CSS. Vediamo come fare.

Abbiamo il seguente menu di navigazione:

<ul id="navigation">
	<li><a href="#">Home<span class="shadow"></span></a></li>
	<li><a href="#">Articoli<span class="shadow"></span></a></li>
	<li><a href="#">About<span class="shadow"></span></a></li>
</ul>

Per creare l'ombra assegneremo degli stili all'elemento con classe shadow che verrà mostrato quando l'utente passerà con il mouse sopra un link:

#navigation {
	margin: 2em auto;
	padding: 0;
	list-style: none;
	width: 50%;
	font: 90% Verdana, sans-serif;
	height: 2em;
}

#navigation li {
	float: left;
	height: 100%;
	margin-right: 1.5em;
}

#navigation a {
	float: left;
	height: 100%;
	line-height: 2;
	text-align: center;
	color: #000;
	text-decoration: none;
	border: 1px solid #ccc;
	background: #eee;
	position: relative;
	width: 5em;
}

#navigation a span.shadow {
	display: none;
	height: 95%;
	top: 0.2em;
	right: -0.9em;
	border-width: 0 12px 12px 0;
	border-style: solid;
	border-color: #999;
	position: absolute;
	width: 100%;
}

#navigation a:hover span.shadow {
	display: block;
}

L'elemento è stato posizionato in modo contestuale rispetto al link, in modo che il computo del suo box model e la sua posizione non influenzino il genitore. Potete visionare l'esempio finale in questa pagina.