68
Maîtrise des CSS
Lorsque.la.taille.de.la.boîte.augmente,.une.portion.plus.large.de.l’image.est.révélée,.ce.qui.
crée.l’illusion.que.la.boîte.s’étend..C’est.la.technique.des."portes.coulissantes" :.une.image.
coulisse.au-dessus.de.l’autre.en.la.masquant..Il.faut.plus.d’images.pour.cette.technique.et.il.
faut,.en.outre,.ajouter.deux.éléments.non.sémantiques.dans.le.code.

Cette.méthode.requiert.quatre.images.en.tout :.deux.qui.composent.l’arrondi.du.haut.et.deux.
qui.composent.celui.du.bas.(voir.Figure 4.8)..Les.images.du.bas.doivent.être.aussi.hautes.
que.la.hauteur.maximale.de.la.boîte..Nous.nommerons.ces.images.top-left.gif,.top-right.gif,.
bottom-left.gif.et.bottom-right.gif.
top-left.gif
top-right.gif
bottom-left.gif
bottom-right.gif
Figure 4.8
Les images requises pour créer la boîte flexible à bords arrondis. .
Pour. commencer,. vous. devez. appliquer. l’image. bottom-left.gif. à. la. div. principale. de. la.
boîte.et.bottom-right.gif.à.la.div.externe..Ensuite,.appliquez.top-left.gif.à.la.div.interne.et.
top-right.gif.au.titre..Pour.finir,.ajoutez.un.remplissage.pour.espacer.légèrement.le.contenu.
de.la.boîte..
.box {
width: 20em;
background: #effce7 url(/img/bottom-left.gif) no-repeat left bottom;
}
.box-outer {
background: url(/img/bottom-right.gif) no-repeat right bottom;