OMBRAGE CSS SUR UN TEXTE

Exemple

TEXTE OMBRE
TEXTE OMBRE

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

.texte { /* texte principale */
  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 */

</style>
</head>

<body>

<div class="ombre">TEXTE OMBRE
  <div class="texte">TEXTE OMBRE</div>
</div>

</body>
</html>

 

Pour tester ce script


COMMENTAIRES

Il s'agit de créer une ombre sur un texte. Le principe est simillaire à l'ombrage des boites.
On crée 2 textes identiques, mais de couleurs différentes.
L'une des 2, au choix, servira d'ombre. Pour cela, il doit être caché derrière le 1er, en débordant un peu.

Tester les options de débordement en faisant varier les top et left, pour trouver ce qui vous convient.

Dans le code HTML, le style d'ombrage doit encadrer le style du texte principal.

Inconvénients : il faut mettre 2 fois le texte à ombrer dans le corps de la page HTML, ce qui alourdit le code.
De plus, un navigateur n'utilisant pas les CSS, comme un navigateur vocal, qui lit la page (en particulier utilisé par les internautes mal-voyants) lira 2 fois le texte, ce qui est énervant.
On utilise donc pas cette technique pour autre chose que des titres, à petite dose.

Marche à peu près dans Netscape 4.