74
Maîtrise des CSS
border-image
image..Cette.excellente.nouveauté.CSS.permet.d’indiquer.une.unique.image.comme.bordure.d’un.élément..À quoi.bon.utiliser.une.seule.image,.direz-vous ?.C’est.là.toute.la.magie.
de. cette. propriété :. elle. permet. de. découper. l’image. en. neuf. secteurs. distincts,. selon. de.
simples.règles.de.pourcentage,.en.laissant.le.soin.au.navigateur.d’utiliser.le.secteur.approprié.pour.la.partie.correspondante.de.la.bordure..Cette.technique.de."mise.à.l’échelle.en.neuf.
découpes".(en.anglais,.nine-slice scaling).permet.d’éviter.l’effet.de.distorsion.qu’on.obtient.
normalement.en.redimensionnant.des.boîtes.à.bords.arrondis..Pour.mieux.le.comprendre,.
prenons.un.exemple..
Vous.disposez.d’une.image.de.100 pixels.de.haut.représentant.une.boîte.à.bords.arrondis.
comme.celle.de.la.Figure 4.14..Si.vous.tracez.deux.lignes.à.25 %.en.partant.du.haut.et.du.
bas.de.la.boîte,.puis.deux.autres.à.25 %.de.la.gauche.et.de.la.droite,.vous.aurez.divisé.votre.
boîte.en.neuf.secteurs.
Figure 4.14
Le fichier source
pour notre image de
bordure avec, pour
l’illustration, ses lignes
de division.
La. propriété. border-image. utilise. automatiquement. les. images. de. chaque. secteur. pour.
créer.l’arrondi.ou.la.bordure.correspondants..L’image.du.secteur.supérieur.gauche.est.ainsi.
utilisée.pour.créer.l’arrondi.supérieur.gauche.et.l’image.du.secteur.droit.central.pour.créer.la.
bordure.latérale.droite..Je.veux.que.les.bordures.fassent.25 pixels.de.large :.c’est.la.largeur.
que.je.définis.donc.dans.les.CSS..Si.les.images.ne.sont.pas.suffisamment.grandes,.elles.sont.
automatiquement.répétées,.de.manière.à.créer.une.boîte.extensible.(voir.Figure 4.15)..Voici.
comment.procéder.dans.le.code :
.box {
-webkit-border-image: url(/img/corners.gif)
25% 25% 25% 25% / 25px round round;
}
Safari.prend.en.charge.cette.propriété.depuis.un.certain.temps,.avec.l’extension.–webkit,.
comme.le.montre.cet.exemple..Firefox 3.5.et.Opera 9.5.la.reconnaissent.maintenant.aussi,.
ce.qui.ouvre.considérablement.son.champ.d’application.
Maîtrise des CSS
border-image
image..Cette.excellente.nouveauté.CSS.permet.d’indiquer.une.unique.image.comme.bordure.d’un.élément..À quoi.bon.utiliser.une.seule.image,.direz-vous ?.C’est.là.toute.la.magie.
de. cette. propriété :. elle. permet. de. découper. l’image. en. neuf. secteurs. distincts,. selon. de.
simples.règles.de.pourcentage,.en.laissant.le.soin.au.navigateur.d’utiliser.le.secteur.approprié.pour.la.partie.correspondante.de.la.bordure..Cette.technique.de."mise.à.l’échelle.en.neuf.
découpes".(en.anglais,.nine-slice scaling).permet.d’éviter.l’effet.de.distorsion.qu’on.obtient.
normalement.en.redimensionnant.des.boîtes.à.bords.arrondis..Pour.mieux.le.comprendre,.
prenons.un.exemple..
Vous.disposez.d’une.image.de.100 pixels.de.haut.représentant.une.boîte.à.bords.arrondis.
comme.celle.de.la.Figure 4.14..Si.vous.tracez.deux.lignes.à.25 %.en.partant.du.haut.et.du.
bas.de.la.boîte,.puis.deux.autres.à.25 %.de.la.gauche.et.de.la.droite,.vous.aurez.divisé.votre.
boîte.en.neuf.secteurs.
Figure 4.14
Le fichier source
pour notre image de
bordure avec, pour
l’illustration, ses lignes
de division.
La. propriété. border-image. utilise. automatiquement. les. images. de. chaque. secteur. pour.
créer.l’arrondi.ou.la.bordure.correspondants..L’image.du.secteur.supérieur.gauche.est.ainsi.
utilisée.pour.créer.l’arrondi.supérieur.gauche.et.l’image.du.secteur.droit.central.pour.créer.la.
bordure.latérale.droite..Je.veux.que.les.bordures.fassent.25 pixels.de.large :.c’est.la.largeur.
que.je.définis.donc.dans.les.CSS..Si.les.images.ne.sont.pas.suffisamment.grandes,.elles.sont.
automatiquement.répétées,.de.manière.à.créer.une.boîte.extensible.(voir.Figure 4.15)..Voici.
comment.procéder.dans.le.code :
.box {
-webkit-border-image: url(/img/corners.gif)
25% 25% 25% 25% / 25px round round;
}
Safari.prend.en.charge.cette.propriété.depuis.un.certain.temps,.avec.l’extension.–webkit,.
comme.le.montre.cet.exemple..Firefox 3.5.et.Opera 9.5.la.reconnaissent.maintenant.aussi,.
ce.qui.ouvre.considérablement.son.champ.d’application.