273
Étude de cas : Climb the Mountains
border-radius
Dans.la.précédente.édition.de.ce.livre,.Andy.et.moi-même.avions.présenté.une.technique.
utile.mais.assez.laborieuse.pour.ajouter.des.cadres.et.des.ombres.aux.images..Elle.nécessitait.deux.div.et.des.images.d’arrière-plan.qu’il.fallait.mettre.en.forme.et.positionner.très.
soigneusement..Bon,.d’accord,.c’était.il.y.a.bien.longtemps,.en.2005.
Aujourd’hui,.la.propriété.border-radius.permet.d’ajouter.des.bords.arrondis.aux.éléments.
grâce.à.de.simples.déclarations.CSS..Malheureusement,.Internet.Explorer.(tiens,.ce.nom.
me.dit.quelque.chose…).ne.prend.pas.du.tout.en.charge.cette.propriété.et.affiche.des.coins.
carrés.(ce.qui.reste.acceptable,.selon.moi)..Il.en.va.pour.le.moment.de.même.avec.le.navigateur.Opera.
À.ce.jour,.aucun.navigateur.populaire.ne.prévoit.de.prendre.en.charge.la.propriété.standard.
border-radius..S’il.est.important.d’inclure.la.déclaration.pour.voir.à.long.terme.et.aller.
de.l’avant,.il.faut.cependant.aussi.ajouter.deux.déclarations.supplémentaires.à.court.terme :.
l’une.pour.les.navigateurs.Mozilla,.comme.notre.adoré.Firefox,.et.l’autre.pour.les.navigateurs.
WebKit,.comme.notre.cher.Safari.(qui.prend.d’ailleurs.aussi.en.charge.les.bords.elliptiques)..
Pour.plus.d’informations,.des.exemples.et.quelques.astuces.utiles,.consultez.les.descriptions.
et.les.exemples.à.l’adresse.http://www.the-art-of-web.com/css/border-radius/.
Les.trois.déclarations.sont.clairement.définies.ici :
.polaroid {
border:5px solid #f00;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
}
Considérant.que.le.blanc.sur.blanc.n’était.pas.idéal.pour.une.démonstration,.vous.remarquerez.que.j’ai.spécifié.une.bordure.rouge.temporaire.afin.que.vous.puissiez.voir.ce.qui.se.passe.
à.la.Figure 11.16..Vous.verrez.que.chaque.coin.est.arrondi,.suivant.un.rayon.de.courbure.
d’environ.5 pixels..Il.s’agit.en.fait.du.rayon.d’un.quart.d’ellipse.définissant.le.coin..Comme.
avec.les.marges,.le.remplissage.et.les.bordures,.il.existe.quatre.propriétés.border-radius.
individuelles.(une.pour.chaque.coin.de.l’élément).et.une.propriété.raccourcie..
Figure 11.16
La bordure rouge
temporaire fait
clairement apparaître
les bords arrondis.
Comme.vous.pouvez.le.voir,.cette.méthode.est.bien.plus.simple.que.celle.de.la.première.
édition.du.livre !.Maintenant.que.les.bords.sont.arrondis,.on.peut.ajouter.une.ombre.portée.
simple.pour.donner.à.l’image.un.peu.plus.d’attrait.
Étude de cas : Climb the Mountains
border-radius
Dans.la.précédente.édition.de.ce.livre,.Andy.et.moi-même.avions.présenté.une.technique.
utile.mais.assez.laborieuse.pour.ajouter.des.cadres.et.des.ombres.aux.images..Elle.nécessitait.deux.div.et.des.images.d’arrière-plan.qu’il.fallait.mettre.en.forme.et.positionner.très.
soigneusement..Bon,.d’accord,.c’était.il.y.a.bien.longtemps,.en.2005.
Aujourd’hui,.la.propriété.border-radius.permet.d’ajouter.des.bords.arrondis.aux.éléments.
grâce.à.de.simples.déclarations.CSS..Malheureusement,.Internet.Explorer.(tiens,.ce.nom.
me.dit.quelque.chose…).ne.prend.pas.du.tout.en.charge.cette.propriété.et.affiche.des.coins.
carrés.(ce.qui.reste.acceptable,.selon.moi)..Il.en.va.pour.le.moment.de.même.avec.le.navigateur.Opera.
À.ce.jour,.aucun.navigateur.populaire.ne.prévoit.de.prendre.en.charge.la.propriété.standard.
border-radius..S’il.est.important.d’inclure.la.déclaration.pour.voir.à.long.terme.et.aller.
de.l’avant,.il.faut.cependant.aussi.ajouter.deux.déclarations.supplémentaires.à.court.terme :.
l’une.pour.les.navigateurs.Mozilla,.comme.notre.adoré.Firefox,.et.l’autre.pour.les.navigateurs.
WebKit,.comme.notre.cher.Safari.(qui.prend.d’ailleurs.aussi.en.charge.les.bords.elliptiques)..
Pour.plus.d’informations,.des.exemples.et.quelques.astuces.utiles,.consultez.les.descriptions.
et.les.exemples.à.l’adresse.http://www.the-art-of-web.com/css/border-radius/.
Les.trois.déclarations.sont.clairement.définies.ici :
.polaroid {
border:5px solid #f00;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
}
Considérant.que.le.blanc.sur.blanc.n’était.pas.idéal.pour.une.démonstration,.vous.remarquerez.que.j’ai.spécifié.une.bordure.rouge.temporaire.afin.que.vous.puissiez.voir.ce.qui.se.passe.
à.la.Figure 11.16..Vous.verrez.que.chaque.coin.est.arrondi,.suivant.un.rayon.de.courbure.
d’environ.5 pixels..Il.s’agit.en.fait.du.rayon.d’un.quart.d’ellipse.définissant.le.coin..Comme.
avec.les.marges,.le.remplissage.et.les.bordures,.il.existe.quatre.propriétés.border-radius.
individuelles.(une.pour.chaque.coin.de.l’élément).et.une.propriété.raccourcie..
Figure 11.16
La bordure rouge
temporaire fait
clairement apparaître
les bords arrondis.
Comme.vous.pouvez.le.voir,.cette.méthode.est.bien.plus.simple.que.celle.de.la.première.
édition.du.livre !.Maintenant.que.les.bords.sont.arrondis,.on.peut.ajouter.une.ombre.portée.
simple.pour.donner.à.l’image.un.peu.plus.d’attrait.