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.
|