94
Maîtrise des CSS
Soulignement de liens originaux
Vous.pouvez.créer.de.très.intéressants.effets.en.utilisant.des.images.pour.créer.les.soulignements.de.liens..Par.exemple,.j’ai.créé.une.image.de.soulignement.très.simple.constituée.de.
lignes.diagonales.(voir.Figure 5.1).
Figure 5.1
Image de
soulignement simple.
Vous.pouvez.ensuite.appliquer.cette.image.aux.liens.à.l’aide.du.code.suivant :
a:link, a:visited {
color:#666;
text-decoration: none;
background: url(/img/underline1.gif) repeat-x left bottom;
}
Le.résultat.mis.en.forme.est.présenté.à.la.Figure 5.2.
Figure 5.2
Soulignement de lien
personnalisé.
Vous.n’êtes.pas.limité.aux.styles.de.liens.ou.de.liens.visités..Dans.l’exemple.suivant,.j’ai.
créé.une.image.GIF.animée.pour.les.états.de.survol.et.de.sélection.que.j’applique.avec.ce.
code.CSS :
a:hover, a:focus, a:active {
background-image: url(/img/underline1-hover.gif);
}
Lorsque.vous.survolez.le.lien.ou.que.vous.cliquez.dessus,.les.lignes.diagonales.semblent.
défiler.de.gauche.à.droite,.ce.qui.crée.un.intéressant.effet.de.tournoiement..Tous.les.navigateurs. ne. prennent. pas. en. charge. les. animations. d’image,. mais. ceux. qui. ne. le. font. pas.
affichent. généralement. la. première. image. de. l’animation,. si. bien. que. l’effet. rétrograde.
. élégamment.sous.la.forme.d’un.style.plus.simple.dans.les.anciens.navigateurs.
Utilisez.les.animations.avec.prudence,.car.elles.peuvent.générer.des.problèmes.d’accessibilité.pour.certains..En.cas.de.doute,.vérifiez.toujours.les.directives.pour.l’accessibilité.aux.
contenus.web.(WCAG 1.0).à.l’adresse.www.w3.org/TR/WAI-WEBCONTENT.
Style de liens visités
Les.concepteurs.et.les.développeurs.oublient.souvent.le.style.des.liens.visités.auxquels.ils.
finissent.par.donner.le.même.aspect.qu’aux.liens.non.visités..Le.choix.d’un.style.de.lien.
visité.différent.peut.cependant.faciliter.l’orientation.des.utilisateurs.en.signalant.les.pages.
ou.les.sites.déjà.visités.afin.d’éviter.des.marches.arrière.inutiles.
Vous.pouvez.en.créer.un,.très.simple,.en.ajoutant.une.case.à.cocher.à.chaque.lien.visité :
Maîtrise des CSS
Soulignement de liens originaux
Vous.pouvez.créer.de.très.intéressants.effets.en.utilisant.des.images.pour.créer.les.soulignements.de.liens..Par.exemple,.j’ai.créé.une.image.de.soulignement.très.simple.constituée.de.
lignes.diagonales.(voir.Figure 5.1).
Figure 5.1
Image de
soulignement simple.
Vous.pouvez.ensuite.appliquer.cette.image.aux.liens.à.l’aide.du.code.suivant :
a:link, a:visited {
color:#666;
text-decoration: none;
background: url(/img/underline1.gif) repeat-x left bottom;
}
Le.résultat.mis.en.forme.est.présenté.à.la.Figure 5.2.
Figure 5.2
Soulignement de lien
personnalisé.
Vous.n’êtes.pas.limité.aux.styles.de.liens.ou.de.liens.visités..Dans.l’exemple.suivant,.j’ai.
créé.une.image.GIF.animée.pour.les.états.de.survol.et.de.sélection.que.j’applique.avec.ce.
code.CSS :
a:hover, a:focus, a:active {
background-image: url(/img/underline1-hover.gif);
}
Lorsque.vous.survolez.le.lien.ou.que.vous.cliquez.dessus,.les.lignes.diagonales.semblent.
défiler.de.gauche.à.droite,.ce.qui.crée.un.intéressant.effet.de.tournoiement..Tous.les.navigateurs. ne. prennent. pas. en. charge. les. animations. d’image,. mais. ceux. qui. ne. le. font. pas.
affichent. généralement. la. première. image. de. l’animation,. si. bien. que. l’effet. rétrograde.
. élégamment.sous.la.forme.d’un.style.plus.simple.dans.les.anciens.navigateurs.
Utilisez.les.animations.avec.prudence,.car.elles.peuvent.générer.des.problèmes.d’accessibilité.pour.certains..En.cas.de.doute,.vérifiez.toujours.les.directives.pour.l’accessibilité.aux.
contenus.web.(WCAG 1.0).à.l’adresse.www.w3.org/TR/WAI-WEBCONTENT.
Style de liens visités
Les.concepteurs.et.les.développeurs.oublient.souvent.le.style.des.liens.visités.auxquels.ils.
finissent.par.donner.le.même.aspect.qu’aux.liens.non.visités..Le.choix.d’un.style.de.lien.
visité.différent.peut.cependant.faciliter.l’orientation.des.utilisateurs.en.signalant.les.pages.
ou.les.sites.déjà.visités.afin.d’éviter.des.marches.arrière.inutiles.
Vous.pouvez.en.créer.un,.très.simple,.en.ajoutant.une.case.à.cocher.à.chaque.lien.visité :