282
Maîtrise des CSS
Il.est.maintenant.temps.d’utiliser.ce.remplissage.et.d’insérer.un.joli.cadre.et.une.image.de.
flèche. sous. les. vignettes.. J’ai. utilisé. pour. cela. le. fichier. elevation_marker_image_bg.png.
(voir.Figure 11.30)..Vous.remarquerez.que.l’ombre.est.ajoutée.à.l’image.dans.Photoshop.et.
exportée.sous.forme.de.PNG.transparent..
Figure 11.30
Un graphisme soigné
à insérer sous les
vignettes.
Il.ne.reste.maintenant.plus.qu’à.appliquer.cette.image.d’arrière-plan.aux.CSS,.comme.ceci :
div#route_elevation ul li a:hover img,
div#route_elevation ul li a:focus img {
display:block;
width:40px;
height:40px;
padding:4px 9px 10px 12px;
position:absolute;
top:-16px;
right:-65px;
background:url(../images/site/elevation_marker_image_bg.png) no-repeat 0 0;
}
Si.vous.procédez.de.la.même.manière,.il.se.peut.que.vous.deviez.ajuster.le.remplissage,.
le.positionnement.et.divers.autres.réglages,.mais.les.éléments.de.construction.sont.bien.en.
place..Tout.le.travail.de.cette.section.porte.maintenant.ses.fruits :.la.page.inclut.une.zone.
Your.latest.route,.avec.un.graphique.d’altitude.interactif.qui.affiche.des.images.de.Flickr.
(voir.Figure 11.31).
Figure 11.31
La section Your latest
route, finalisée, avec
de beaux survols
d’images.
Tout.cela.devrait.évidemment.se.trouver.adossé.à.un.puissant.système.de.gestion.de.contenu.
pour.créer.un.site.vraiment.exceptionnel,.mais.enfin,.ce.n’est.ici.qu’un.livre.sur.les.CSS..
En résumé
Et.voilà..Ce.moment.de.détente.aura.été.plus.studieux.qu’un.séjour.de.deux.semaines.au.
bord.de.la.mer,.mais.j’ose.espérer.qu’il.aura.aussi.été.productif..J’ai.particulièrement.apprécié.ce.travail.de.mise.en.application.des.concepts.du.site.CTM.pour.cette.seconde.édition.du.
livre,.notamment.parce.qu’il.était.possible.d’explorer.librement.de.nouvelles.fonctionnalités.
CSS 3.