76
Maîtrise des CSS
et.la.gauche.d’environ.4 ou 5 pixels.puis.appliquez.une.ombre.portée.de.la.même.taille.à.ce.
calque..Enregistrez.l’image.pour.le.Web.et.appelez-la.shadow.gif.(voir.Figure 4.16).
Figure 4.16
L’image shadow.gif
agrandie pour révéler
l’ombre portée de
5 pixels.
Le.code.pour.cette.technique.est.très.simple :

Pour.créer.l’effet,.vous.devez.commencer.par.appliquer.l’image.d’ombre.à.l’arrière-plan.de.
la.div.d’enveloppement..Comme.les.div.sont.des.éléments.de.niveau.bloc,.elles.s’étendent.
en.largeur.jusqu’à.occuper.tout.l’espace.disponible..Dans.le.cas.présent,.nous.souhaitons.
que.la.div.enveloppe.l’image..On.pourrait,.à.cette.fin,.définir.une.largeur.explicite.pour.la.
div,.mais.l’utilité.de.la.technique.s’en.trouverait.réduite..Au.lieu.de.cela,.vous.pouvez.la.faire.
flotter,.afin.qu’elle.se.rétrécisse.pour.envelopper.l’image.dans.les.navigateurs.modernes,.à.
l’exception.d’Internet.Explorer 5.x.sur.Mac..Vous.pouvez.éventuellement.masquer.ces.styles.
pour.cette.version.de.navigateur..Pour.plus.d’informations.sur.le.masquage.des.règles.selon.
les.différents.navigateurs,.consultez.le.Chapitre 8,.qui.traite.des.hacks.et.des.filtres..
.img-wrapper {
background: url(/img/shadow.gif) no-repeat bottom right;
clear: right;
float: left;
}
Pour. révéler. l’image. de. l’ombre. et. créer. l’effet. d’ombre. portée. (voir. Figure  4.17),. vous.
devez.décaler.l’image.en.spécifiant.des.marges.négatives :
.img-wrapper img {
margin: -5px 5px 5px -5px;
}
Figure 4.17
L’image avec son
ombre portée.