78
Maîtrise des CSS
.img-wrapper {
background: url(/img/shadow.gif) no-repeat bottom right;
float:left;
line-height:0;
}
.img-wrapper img {
background:#fff;
padding:4px;
border:1px solid #a9a9a9;
position:relative;
left:-5px;
top:-5px;
}
box-shadow
Les. précédentes. techniques. sont. utiles,. mais. elles. sont. tout. de. même. quelque. peu. fastidieuses..Ne.serait-il.pas.intéressant.que.les.navigateurs.puissent.créer.leurs.propres.ombres.
portées,. sans. avoir. besoin. de. filtres. Photoshop. ou. d’images. vectorielles  ?. Vous. l’aurez.
deviné :.la.CSS 3.le.permet,.avec.la.propriété.box-shadow..Cette.propriété.prend.quatre.
valeurs :.les.décalages.vertical.et.horizontal,.la.largeur.de.l’ombre.(et.donc.son.niveau.de.
flou).et.sa.couleur..Dans.l’exemple.suivant,.j’ai.décalé.l’ombre.de.3 pixels,.en.lui.donnant.
6 pixels.de.largeur.et.une.couleur.gris.clair.(voir.Figure 4.19)..
img {
box-shadow: 3px 3px 6px #666;
}
Figure 4.19
Une ravissante ombre
portée avec l’effet boxshadow.
Comme.il.s’agit.d’une.propriété.CSS 3.encore.expérimentale,.vous.devez.utiliser.les.extensions.Safari.et.Firefox.pour.l’instant..Il.ne.faudra.cependant.sans.doute.pas.attendre.bien.
longtemps.pour.qu’elle.soit.plus.largement.prise.en.charge..
img {
-webkit-box-shadow: 3px 3px 6px #666;
-moz-box-shadow: 3px 3px 6px #666;
box-shadow: 3px 3px 6px #666;
}
Cette. propriété. est. particulièrement. intéressante. parce. qu’elle. fonctionne. en. conjonction.
avec.la.propriété.border-radius.(voir.Figure 4.20)..Vous.pouvez.donc.maintenant.créer.