Dans cet article, nous allons voir comment réaliser des ombres entières réalisés en CSS. D'habitude la gestion de zone avec des ombres en CSS se réalisent avec des images de fond, ce qui implique forcement que la taille de la zone qui possède l'ombre est fixe (au moins sur un axe), et que chacune des zones du site qui possèdent une ombre et qui ont des tailles différentes ont des images de fond différentes.

Dans mon cas, il suffit d'avoir dans un calque positionné, deux calques, un pour le contenu et une autre pour l'ombre et le tour est joué. Voici le code HTML, on pourra remarque qu'il n'y a pas grand chose de compliqué...

<div id="conteneur">
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
	<div class="ombre">&nbsp;</div>
</div>

Et la feuille de style associée, ici il faut donc faire attention à ce que le calque conteneur ai un attribut de position (position:relatif; ou position:absolute;) afin que le calque qui possède l'ombrage soit étiré sous le contenu avec un positionnement en absolute en left, top, bottom et right. Attention, étant donné que l'ombrage est positionné de façon absolute et après le contenu de mon cadre, il faudra donner au contenu un positionnement relatif pour pouvoir lui associer un niveau d'ordre de calque (z-index). Ensuite, il faut juste appliquer des propriétés pour gérée une opacité réduite pour cet ombrage et le tour est joué.

#conteneur{
	background:#fff;
	width:350px;
	position:relative;
	border:1px soldi #555;
	margin:30px;
}
#conteneur p{
	padding:10px;
	margin:0;
	color:#555;
	background:#fff;
	position: relative;
	z-index:1;
}
.ombre{
	position: absolute;
	bottom:-5px;
	right:-5px;
	top:-5px;
	left:-5px;
	background:#000;
	filter : alpha(opacity=20);
	-moz-opacity : 0.2;
	opacity : 0.2; 
}