<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<style type="text/css">
.ombre { /* texte d'arrière plan dont le débordement
crée l'ombrage */
color:black ; /* couleur du texte, donc de l'ombre */
font-size:50px ; /* Taille de la police */
font-weight:bolder} /* police en gras épais */
a.texte { /* style du texte principale - lien avant survol */
display:block ; /* retour à la ligne après
le style */
text-decoration:none ; /* supprime le soulignement du lien
*/
color : red ; /* couleur du texte */
font-size : 50px ; /* Taille de la police */
font-weight : bolder ; /* police en gras épais */
position : relative ; /* indique un décalage par
rapport à la position normale */
top:-60px ; /* décalage de 60 pixels vers le haut
*/
left:-3px ; /* décalage de 3 pixels vers la gauche
*/
padding: 0 2px 2px 0} /* Crée un marge intérieur
de 2 pixels à droite et en bas du texte */
a.texte:hover { /* style du texte principale - lien pendant survol
*/
padding: 2px 0 0 2px} /* Crée un marge intérieur
de 2 pixels en haut et à gauche du texte */
</style>
</head>
<body>
<div class="ombre">LIEN A SURVOLER <!--
texte principal -->
<a href="#" class="texte">LIEN A SURVOLER</a>
<!-- applique les 2 styles de lien : avant et pendant le survol -->
</div>
</body>
</html>
COMMENTAIRES
On reprend l'exemple précédent d'ombrage du texte, et on y rajoute un effet de survol. On obtient ainsi un effet d'enfoncement du texte du lien.
En théorie, on devrait pouvoir changer par a.texte:hover les fonctions top et left. En pratique, cela marche dans Mozilla et dans Opéra, mais pas dans Internet explorer (encore un de ses bugs). On triche en faisant varier la marge intérieure (padding) pour décaler quand même le texte.
Ne marche pas dans Netscape 4.