234
Maîtrise des CSS
box-shadow, RGBa et text-overflow
Au.centre.du.site.Roma.Italia,.vers.le.bas.de.la.page,.figure.un.petit.widget.intitulé.Voices.
Around.the.World..Si.ce.widget.était.réel,.il.afficherait.dans.la.carte,.les.mises.à.jour.sur.
Twitter.(tweets).de.tous.les.utilisateurs.qui.incluent.le.hashtag.#romaitalia.dans.leur.tweet,.
en.fonction.de.leur.emplacement.géographique.et.de.manière.aléatoire..Les.visiteurs.du.site.
pourraient.cliquer.sur.ces.citations.aléatoires.pour.accéder.à.la.page.du.tweet.complet,.sur.
le.nom.d’utilisateur.de.l’auteur.et.les.tweets.d’autres.fans.de.Roma.Italia.–.un.moyen.d’en.
apprendre.plus.sur.Rome.en.temps.réel.à.l’aide.de.mises.à.jour.Twitter..Les.tweets.affichés.
dans.l’étude.de.cas.sont.fictifs,.mais.vous.pouvez.suivre.@roma_italia,.un.véritable.compte.
Twitter.que.j’ai.configuré.pour.cette.étude.de.cas..
Figure 10.6
Les marqueurs
cartographiques
apparaissent et
disparaissent et
affichent du texte
supplémentaire quand
l’utilisateur les survole.
Les.marqueurs.qui.apparaissent.et.disparaissent.toutes.les.quelques.secondes.ont.un.code.
assez.complexe.(voir.Figure 10.6).et.nous.utiliserons.leur.balisage.pour.illustrer.le.fonctionnement.des.propriétés.CSS 3.box-shadow,.RGBa.et.text-overflow..
Chaque.marqueur.est.composé.de.trois.parties :.le.texte.du.tweet,.un.arrière-plan.blanc.avec.
une.ombre.portée.et.une.image.de.cercle.pour.le.marqueur.cartographique..Le.marqueur.est.
enveloppé.dans.un.élément.de.liste.(li),.lui-même.abrité.sur.une.liste.à.puces.(ul).contenant.
l’image.d’arrière-plan.de.la.carte.du.monde :
Nous.appliquons.un.style.à.la.liste.ul.avec.les.propriétés.suivantes :
#voices ul {
position: relative;
width: 310px;
height: 178px;
background: url(../img/bg-map.gif) no-repeat;
}
Vous.remarquerez.que.nous.avons.défini.un.positionnement.relatif..Il.permet.de.positionner.
de.manière.absolue.chaque.élément.de.liste.par.rapport.à.l’élément.ul..Sans.cela,.l’élément.de.liste.serait.positionné.de.manière.relative.à.un.autre.élément.parent.–.selon.toute.
vraisemblance,. l’élément.body.(voir. le. Chapitre 3. pour.un.rappel. sur. le.positionnement.
absolu).
Maîtrise des CSS
box-shadow, RGBa et text-overflow
Au.centre.du.site.Roma.Italia,.vers.le.bas.de.la.page,.figure.un.petit.widget.intitulé.Voices.
Around.the.World..Si.ce.widget.était.réel,.il.afficherait.dans.la.carte,.les.mises.à.jour.sur.
Twitter.(tweets).de.tous.les.utilisateurs.qui.incluent.le.hashtag.#romaitalia.dans.leur.tweet,.
en.fonction.de.leur.emplacement.géographique.et.de.manière.aléatoire..Les.visiteurs.du.site.
pourraient.cliquer.sur.ces.citations.aléatoires.pour.accéder.à.la.page.du.tweet.complet,.sur.
le.nom.d’utilisateur.de.l’auteur.et.les.tweets.d’autres.fans.de.Roma.Italia.–.un.moyen.d’en.
apprendre.plus.sur.Rome.en.temps.réel.à.l’aide.de.mises.à.jour.Twitter..Les.tweets.affichés.
dans.l’étude.de.cas.sont.fictifs,.mais.vous.pouvez.suivre.@roma_italia,.un.véritable.compte.
Twitter.que.j’ai.configuré.pour.cette.étude.de.cas..
Figure 10.6
Les marqueurs
cartographiques
apparaissent et
disparaissent et
affichent du texte
supplémentaire quand
l’utilisateur les survole.
Les.marqueurs.qui.apparaissent.et.disparaissent.toutes.les.quelques.secondes.ont.un.code.
assez.complexe.(voir.Figure 10.6).et.nous.utiliserons.leur.balisage.pour.illustrer.le.fonctionnement.des.propriétés.CSS 3.box-shadow,.RGBa.et.text-overflow..
Chaque.marqueur.est.composé.de.trois.parties :.le.texte.du.tweet,.un.arrière-plan.blanc.avec.
une.ombre.portée.et.une.image.de.cercle.pour.le.marqueur.cartographique..Le.marqueur.est.
enveloppé.dans.un.élément.de.liste.(li),.lui-même.abrité.sur.une.liste.à.puces.(ul).contenant.
l’image.d’arrière-plan.de.la.carte.du.monde :
Nous.appliquons.un.style.à.la.liste.ul.avec.les.propriétés.suivantes :
#voices ul {
position: relative;
width: 310px;
height: 178px;
background: url(../img/bg-map.gif) no-repeat;
}
Vous.remarquerez.que.nous.avons.défini.un.positionnement.relatif..Il.permet.de.positionner.
de.manière.absolue.chaque.élément.de.liste.par.rapport.à.l’élément.ul..Sans.cela,.l’élément.de.liste.serait.positionné.de.manière.relative.à.un.autre.élément.parent.–.selon.toute.
vraisemblance,. l’élément.body.(voir. le. Chapitre 3. pour.un.rappel. sur. le.positionnement.
absolu).