70
Maîtrise des CSS
Coins masqués
La.technique.des.coins.masqués.(en.anglais,."mountaintop.corners",.par.référence.aux.sommets. neigeux. qui. se. terminent. par. du. blanc). est. une. technique. simple. mais. très. efficace.
élaborée.par.Dan.Cederholm.(www.simplebits.com),.l’auteur.du.best-seller.Web Standards
Solutions.(Friends.of.ED,.2004,.réédition.2009)..Supposons.que.vous.souhaitiez.créer.une.
variété. de. boîtes. arrondies. de. différentes. couleurs..Avec. les. précédentes. méthodes,. vous.
seriez.contraint.de.créer.des.images.différentes.pour.chacun.des.thèmes.de.couleur..Vous.
pourriez.le.faire.avec.deux.ou.trois.thèmes.de.couleur,.mais.comment.faire.si.vous.souhaitez.
que.vos.utilisateurs.aient.la.liberté.de.créer.leurs.propres.thèmes ?.Vous.seriez.contraint.de.
créer.des.images.dynamiquement.sur.le.serveur,.ce.qui.deviendrait.très.compliqué..
Il.existe.heureusement.un.autre.moyen..Au.lieu.de.créer.des.images.de.coins.colorés,.vous.
pouvez.créer.des.masques.de.coins.(voir.Figure 4.10)..La.zone.masquée.correspond.à.la.
couleur.d’arrière-plan.utilisée.tandis.que.la.zone.du.coin.lui-même.est.transparente..Lorsque.
l’image. est. placée. sur. une. boîte. colorée,. elle. crée. alors. l’impression. que. ses. bords. sont.
arrondis.(voir.Figure 4.11).
Figure 4.10
Avec un masque
de coin, le masque
blanc couvre la
couleur d’arrière-plan
pour créer un effet
d’arrondi.
Comme. ces. masques. de. coin. doivent. être. des. images. bitmap,. mieux. vaut-il. utiliser. des.
courbes.subtiles..Si.vous.tracez.un.arrondi.trop.prononcé,.il.risque.de.sembler.édenté.ou.
disgracieux.
Le.code.de.base.est.analogue.à.celui.de.la.précédente.méthode..Il.requiert.quatre.éléments.
auxquels.appliquer.les.quatre.masques.de.coin :

Le.code.CSS.est.aussi.très.similaire :
.box {
width: 20em;