269
Étude de cas : Climb the Mountains
Transparence, ombres et bords arrondis
L’étude.de.cas.que.j’ai.proposée.dans.la.première.édition.de.ce.livre.s’appuyait.fortement.
sur.des.boîtes.à.bords.arrondis..Tout.le.monde.cherche,.à.un.moment.ou.un.autre,.à.créer.des.
bords.arrondis.par.souci.esthétique.et.pour.changer.des.ennuyeux.coins.carrés.
Parmi.les.nombreuses.méthodes.permettant.de.créer.des.bords.arrondis,.j’en.avais.choisi.
une.qui.utilisait.une.quantité.non.négligeable.de.code.JavaScript,.plusieurs.sprites.d’image.
d’arrière-plan. et. quelques. pincées. de. code. HTML. superflu.. C’était. lourd,. maladroit,. peu.
commode.et.il.n’y.avait.pas.vraiment.d’alternative.
Aujourd’hui,.tout.a.changé.et.je.n’ai.qu’une.envie,.c’est.de.crier."CSS 3 !".aussi.fort.que.je.le.
peux..On.a.fait.du.chemin :.les.attentes.se.sont.amplifiées.et.les.outils.ont.évolué..Évidemment,.
les.navigateurs.n’ont.pas.tous.suivi.(quoi.de.neuf.sous.le.soleil ?),.mais.nous.avons.gagné.en.
bravoure.et.sommes.prêts.à.travailler.avec.de.nouvelles.idées.et.à.faire.avancer.les.choses.
À.cette.section,.je.prendrai.une.simple.image.et.une.légende.de.la.page.d’accueil.du.site.
CTM.pour.réaliser.toutes.sortes.de.merveilles.en.CSS 3,.sans.utiliser.ni.JavaScript,.ni.autres.
images.ou.balisage.superflu..Vive.la.révolution !
Notre objectif
Nous.allons.commencer.par.une.image.JPEG.de.310 × 185 pixels.nommée.campsite.jpg.
(voir. Figure 11.13).. Ensuite,. nous. appliquerons. une. légende. avec. du. texte. blanc. sur. un.
calque.semi-transparent.gris.en.bas.de.l’image,.puis.nous.appliquerons.une.bordure.photo.
de.style.Polaroïd.autour.de.l’image,.en.veillant.à.y.ajouter.des.bords.arrondis.et.une.ombre.
portée.réaliste..Et.tout.cela,.grâce.aux.CSS..
Figure 11.13
L’image campsite.jpg
initiale.
Le.code.HTML.est.très.simple..L’image.et.la.légende.doivent.être.contenues.dans.une.div.
nommée.captioned_image.pour.les.besoins.de.cet.exemple..Le.paragraphe.se.voit.attribuer.
la.classe.caption,.afin.qu’on.puisse.le.cibler..Pour.l’instant,.voilà.tout..
Une.fois.le.code.HTML.en.place,.il.est.temps.d’expérimenter.trois.des.techniques.CSS 3.les.
plus.passionnantes.qui.existent.
Étude de cas : Climb the Mountains
Transparence, ombres et bords arrondis
L’étude.de.cas.que.j’ai.proposée.dans.la.première.édition.de.ce.livre.s’appuyait.fortement.
sur.des.boîtes.à.bords.arrondis..Tout.le.monde.cherche,.à.un.moment.ou.un.autre,.à.créer.des.
bords.arrondis.par.souci.esthétique.et.pour.changer.des.ennuyeux.coins.carrés.
Parmi.les.nombreuses.méthodes.permettant.de.créer.des.bords.arrondis,.j’en.avais.choisi.
une.qui.utilisait.une.quantité.non.négligeable.de.code.JavaScript,.plusieurs.sprites.d’image.
d’arrière-plan. et. quelques. pincées. de. code. HTML. superflu.. C’était. lourd,. maladroit,. peu.
commode.et.il.n’y.avait.pas.vraiment.d’alternative.
Aujourd’hui,.tout.a.changé.et.je.n’ai.qu’une.envie,.c’est.de.crier."CSS 3 !".aussi.fort.que.je.le.
peux..On.a.fait.du.chemin :.les.attentes.se.sont.amplifiées.et.les.outils.ont.évolué..Évidemment,.
les.navigateurs.n’ont.pas.tous.suivi.(quoi.de.neuf.sous.le.soleil ?),.mais.nous.avons.gagné.en.
bravoure.et.sommes.prêts.à.travailler.avec.de.nouvelles.idées.et.à.faire.avancer.les.choses.
À.cette.section,.je.prendrai.une.simple.image.et.une.légende.de.la.page.d’accueil.du.site.
CTM.pour.réaliser.toutes.sortes.de.merveilles.en.CSS 3,.sans.utiliser.ni.JavaScript,.ni.autres.
images.ou.balisage.superflu..Vive.la.révolution !
Notre objectif
Nous.allons.commencer.par.une.image.JPEG.de.310 × 185 pixels.nommée.campsite.jpg.
(voir. Figure 11.13).. Ensuite,. nous. appliquerons. une. légende. avec. du. texte. blanc. sur. un.
calque.semi-transparent.gris.en.bas.de.l’image,.puis.nous.appliquerons.une.bordure.photo.
de.style.Polaroïd.autour.de.l’image,.en.veillant.à.y.ajouter.des.bords.arrondis.et.une.ombre.
portée.réaliste..Et.tout.cela,.grâce.aux.CSS..
Figure 11.13
L’image campsite.jpg
initiale.
Le.code.HTML.est.très.simple..L’image.et.la.légende.doivent.être.contenues.dans.une.div.
nommée.captioned_image.pour.les.besoins.de.cet.exemple..Le.paragraphe.se.voit.attribuer.
la.classe.caption,.afin.qu’on.puisse.le.cibler..Pour.l’instant,.voilà.tout..
From the campsite bridge towards the village, Great Gable
„ and Lingmell.
Une.fois.le.code.HTML.en.place,.il.est.temps.d’expérimenter.trois.des.techniques.CSS 3.les.
plus.passionnantes.qui.existent.