274
Maîtrise des CSS
box-shadow
Les.CSS 3.proposent.une.méthode.sensiblement.plus.simple.de.créer.des.ombres.portées.
pour. Safari 3. et. Firefox 3.5. ainsi. que. leurs. versions. ultérieures.. La. propriété. prend. trois.
attributs.de.longueur.(le.décalage.horizontal,.le.décalage.vertical.et.le.rayon.de.flou).et,.pour.
finir,.une.couleur..
Si.une.valeur.positive.est.appliquée.au.décalage.horizontal,.l’ombre.apparaît.du.côté.droit.de.
l’élément..Un.décalage.négatif.place.l’ombre.du.côté.gauche.
Si.une.valeur.négative.est.appliquée.au.décalage.vertical,.l’ombre.apparaît.en.haut.de.l’élément..Avec.une.valeur.positive,.elle.apparaît.en.bas.
Le.rayon.de.flou.est.un.réglage.très.utile..Si.sa.valeur.est.fixée.à 0,.l’ombre.est.nette..Plus.sa.
valeur.est.élevée,.plus.l’ombre.devient.floue..
Dans. la. classe. polaroid,. les. quatre. valeurs. peuvent. être. utilisées. pour. créer. une. ombre.
portée.en.bas.à.droite.de.notre.image.illustrée,.avec.un.flou.de.5 pixels.en.gris.moyen :
.polaroid {
border:5px solid #fff;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-webkit-box-shadow:1px 1px 5px #999;
-moz-box-shadow:1px 1px 5px #999;
}
Intelligemment,.box-shadow.respecte.la.valeur.donnée.précédemment.à.border-radius..
On.obtient.ainsi.un.cadre.d’image.arrondi.et.son.ombre.portée.complémentaire.en.parfaite.
harmonie.(voir.Figure 11.17).
Figure 11.17
L’image possède
maintenant une
légende, un cadre et
des bords arrondis.
Malheureusement,.ce.n’est.pas.encore.le.cas.pour.Internet.Explorer.(voir.Figure 11.18)..
Figure 11.18
Internet Explorer
n’affiche pas les
propriétés CSS 3,
mais le résultat est
acceptable.
Comme.nous.l’avons.indiqué.précédemment,.Internet.Explorer.ne.prend.pas.en.charge.la.
transparence.RGBa.pour.la.légende.et.vous.pouvez.voir.aussi.que.notre.cadre.est.affiché.
dans.un.rectangle.gris.à.angles.droits..Il.possède.la.même.largeur.(5 pixels).mais.n’est.ni.
Maîtrise des CSS
box-shadow
Les.CSS 3.proposent.une.méthode.sensiblement.plus.simple.de.créer.des.ombres.portées.
pour. Safari 3. et. Firefox 3.5. ainsi. que. leurs. versions. ultérieures.. La. propriété. prend. trois.
attributs.de.longueur.(le.décalage.horizontal,.le.décalage.vertical.et.le.rayon.de.flou).et,.pour.
finir,.une.couleur..
Si.une.valeur.positive.est.appliquée.au.décalage.horizontal,.l’ombre.apparaît.du.côté.droit.de.
l’élément..Un.décalage.négatif.place.l’ombre.du.côté.gauche.
Si.une.valeur.négative.est.appliquée.au.décalage.vertical,.l’ombre.apparaît.en.haut.de.l’élément..Avec.une.valeur.positive,.elle.apparaît.en.bas.
Le.rayon.de.flou.est.un.réglage.très.utile..Si.sa.valeur.est.fixée.à 0,.l’ombre.est.nette..Plus.sa.
valeur.est.élevée,.plus.l’ombre.devient.floue..
Dans. la. classe. polaroid,. les. quatre. valeurs. peuvent. être. utilisées. pour. créer. une. ombre.
portée.en.bas.à.droite.de.notre.image.illustrée,.avec.un.flou.de.5 pixels.en.gris.moyen :
.polaroid {
border:5px solid #fff;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-webkit-box-shadow:1px 1px 5px #999;
-moz-box-shadow:1px 1px 5px #999;
}
Intelligemment,.box-shadow.respecte.la.valeur.donnée.précédemment.à.border-radius..
On.obtient.ainsi.un.cadre.d’image.arrondi.et.son.ombre.portée.complémentaire.en.parfaite.
harmonie.(voir.Figure 11.17).
Figure 11.17
L’image possède
maintenant une
légende, un cadre et
des bords arrondis.
Malheureusement,.ce.n’est.pas.encore.le.cas.pour.Internet.Explorer.(voir.Figure 11.18)..
Figure 11.18
Internet Explorer
n’affiche pas les
propriétés CSS 3,
mais le résultat est
acceptable.
Comme.nous.l’avons.indiqué.précédemment,.Internet.Explorer.ne.prend.pas.en.charge.la.
transparence.RGBa.pour.la.légende.et.vous.pouvez.voir.aussi.que.notre.cadre.est.affiché.
dans.un.rectangle.gris.à.angles.droits..Il.possède.la.même.largeur.(5 pixels).mais.n’est.ni.