OMBRAGE CSS ET EFFET DE SURVOL SUR UN TEXTE

Exemple

LIEN A SURVOLER LIEN A SURVOLER

CODE SOURCE CSS ET HTML

<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>

Pour tester ce script

 

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.