L’avantage du CSS et de la balise DIV est de pouvoir créer des blocs extensibles de différents aspects ; bords arrondis ou ombres portées par exemple.

En imbriquant plusieurs balises DIV et en les positionnant via le CSS les possibilités peuvent s’avérer nombreuses…

1. Bloc avec bords arrondis

Dans cet exemple les seules images utilisées seront les 4 coins du bloc.

En HTML le but est de structuré les balises selon un certain ordre pour que les différents éléments s’étendent de manière cohérente en fonction du contenu et de la largeur du bloc.

<div class="box">
	<div class="box_tl">
		<div class="box_tr"></div>
	</div>
	<div class="box_content>
		Texte contenu dans le bloc.
	</div>
	<div class="box_bl">
		<div class="box_br"></div>
	</div>
</div>

En CSS

div.box {
	width: 150px;
	background-color: #ddd9d7;
}

div.box div.box_tl {
	background: url("images/box_tl.gif") no-repeat 0 0;
}

div.box div.box_tr {
	background: url("images/box_tr.gif") no-repeat 100% 0;
	padding-top: 12px;
}

div.box div.box_bl {
	background: url("images/box_bl.gif") no-repeat 0 100%;
}

div.box div.box_br {
	background: url("images/box_br.gif") no-repeat 100% 100%;
	padding-top: 12px;
}

Le padding de 12 pixels dans les classes « .box_tr » et « .box_br » permet de faire apparaître les 2 arrondis du le haut et le bas du bloc.

2. L’ombre portée

Globalement la mise en place d’un bloc avec une ombre portée est équivalente à celle d’un bloc avec bords arrondis.

Pour des raisons de clarté sur cet exemple je suis parti sur la base d’un carré à angles droits mais il est facile de cumuler bords arrondis et ombre portée, tout est question d’images et de découpage.

Le découpage de l’image va consister à ne « trancher » que ce qui est nécessaire, c’est-à-dire les 3 coins et les dégradés vertical et horizontal qui seront multiplié en CSS.

<div class="shadow">
	<div class="shadow_r">
		<div class="shadow_tr">
			<div class="shadow_content">
				Texte contenu dans le bloc.
			</div>
		</div>
	</div>
	<div class="shadow_b">
		<div class="shadow_bl">
			<div class="shadow_br"></div>
		</div>
	</div>
</div>

En CSS

div.shadow {
	width: 150px;
}

div.shadow div.shadow_content {
	background-color: #ddd9d7;
}

div.shadow div.shadow_r {
	background: url("images/shadow_r.gif") repeat-y 100% 0;
}

div.shadow div.shadow_tr {
	background: url("images/shadow_tr.gif") no-repeat 100% 0;
	padding-right: 12px;
}

div.shadow div.shadow_b {
	background: url("images/shadow_b.gif") repeat-x 0 100%;
}

div.shadow div.shadow_bl {
	background: url("images/shadow_bl.gif") no-repeat 0 100%;
}
div.shadow div.shadow_br {
	background: url("images/shadow_br.gif") no-repeat 100% 100%;
	padding-top: 12px;
}

Le padding de 12 pixels dans les classes « .shadow_tr » et « .shadow_br » permet de faire apparaître les ombres de droite et du bas du bloc et d’empêcher le recouvrement de la couleur du bloc de contenu.

Les panneaux coulissants

Une autre technique en HTML/CSS permet de réaliser des blocs personnalisés, il s’agit de la technique des panneaux coulissants qui s’avère très pratique car elle permet de réduire le nombre d’images pour réaliser le bloc. Cela fonctionne sur le principe du recouvrement d’images. Dans l’exemple de l’ombre portée, on ramène le nombre d’images à 3 au lieu de 5.

Ici, on découpera 4 tranches, 2 en haut et 2 en bas.

Celles qui nous intéressent le plus sont celles du haut.

Contrairement aux exemples précédent, la tranche de gauche est plus large que le bloc, permettant de dimensionner ce dernier à n’importe quelle taille sans avoir à ajuster l’image à chaque fois et celle de droite qui servira au recouvrement, viendra masquer le coin et faire illusion d’un bord arrondi.

Quelques exemples

Voici une liste d’exemples de blocs arrondis utilisant le principe des panneaux coulissants.