jQuery: aggiungere un'ombra all'elemento body

Molti sviluppatori hanno provato ad aggiungere un'ombra all'elemento body usando la proprietà CSS3 box-shadow ma senza ottenere risultati soddisfacenti. Di seguito vedremo una soluzione che fa uso dei CSS e di jQuery per ottenere appunto questo effetto.

Aggiungeremo quattro elementi vuoti posizionati in modo fisso con altrettante immagini di sfondo. Ecco il codice CSS:

* {
	margin: 0;
	padding: 0;
}

#top, #bottom, #left, #right {
	background: #000;
}

#left, #right {
	position: fixed;
	top: 0; bottom: 0;
	width: 88px;
}
		
#left { 
	left: 0;  
	background: url(img/left.png) left center repeat-y;
}
		
#right { 
	right: 0; 
	background: url(img/right.png) right center repeat-y;
}
		
#top, #bottom {
	position: fixed;
	left: 0; 
	right: 0;
	height: 88px;
}
		
#top { 
	top: 0px; 
	background: url(img/top.png) top center repeat-x; 
}

#bottom { 
	bottom: 0px; 
	background: url(img/bottom.png) bottom center repeat-x; 
}

jQuery si limiterà invece ad inserire i quattro elementi nella pagina:

$(function() {

	$('<div id="left"></div><div id="right"></div><div id="top"></div><div id="bottom"></div>').
	appendTo('body');

});

Potete visionare l'esempio finale in questa pagina.