<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<style type="text/css">
body{background-color:red}
.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:30px ; /* Taille de la police */
font-weight:bolder} /* police en gras épais */
.texte a { /* style du texte principale - lien avant survol */
text-decoration:none ; /* supprime le soulignement du lien
*/
color:white ; /* couleur du texte */
font-size:30px ; /* Taille de la police */
font-weight:bolder ; /* police en gras épais */
position:relative ; /* indique un décalage par rapport
à la position normale */
top:-2px ; /* décalage de 2 pixels vers le haut
*/
left:-99px ; /* décalage de 99 pixels vers la gauche
*/
padding: 0 2px 2px 0} /* Crée un marge intérieur
de 2 pixels à droite et en bas du texte */
.texte a:hover { /* style du texte principale - lien pendant survol
*/
padding: 0px 0px 0px 2px} /* Crée un marge intérieur de
2 pixels à gauche du texte */
</style>
</head>
<body>
<div class="texte">
<span class="ombre">LIEN 1<a href="#">LIEN
1</a></span> <!-- bouton 1 -->
<span class="ombre">LIEN 2<a href="#">LIEN
2</a></span> <!-- bouton 2 -->
<span class="ombre">LIEN 3<a href="#">LIEN
3</a></span> <!-- bouton 3 -->
</div>
</body>
</html>
COMMENTAIRES
On reprend l'exemple d'ombrage du texte avec effet de survol (ombrage 3), et on l'applique à un menu de bouton. On obtient ainsi un effet d'enfoncement du texte des liens.
Pour voir l'explication de l'effet de survol sur un ombrage, voir les explications d'ombrage 3.
Si on place ces ombrages avec effet de survol dans un tableau, cela ne marche plus sous IE5.5 (bug). Si on veut placer ce menu en vertical au lieu de le placer en horizontal, il suffit de remplacer les <span> par des <div> (div est une balise "block" qui crée un retour à la ligne automatique). Il faudra par contre changer les top:-2px ; left:-99px. En effet, ces fonction bouge l'une des 2 versions du texte de 2px vers le haut et de 99 px vers la gauche. Si le style est en vertical, il faudra plutôt remonter de 35 px (environ) vers le haut, et décaler de 2 px vers la gauche.
Ne marche pas dans Netscape 4 et IE 5.0. Marche dans IE 5.5 et plus.