Réaliser un texte ombré

Tous les concepteurs de sites sont à l'affût de trucs et astuces qui peuvent distinguer leurs pages de celles des autres. Vous avez vu plus haut la possibilité d'installer un fond fixe sur lequel textes et images peuvent glisser, donnant une impression tridimensionnelle.

Je vous propose ici une autre astuce 3D. Simple à mettre en oeuvre, elle offre le résultat que vous observez dans ces phrases.
Je vous propose ici une autre astuce 3D. Simple à mettre en oeuvre, elle offre le résultat que vous observez dans ces phrases.

 

 

Vous remarquerez toutefois plus bas que ce système de mise en page a quelques petites restrictions, parfois un peu frustrantes ...
Vous remarquerez toutefois plus bas que ce système de mise en page a quelques petites restrictions, parfois un peu frustrantes ...

 

 

Nous entrons ici, d'un pas prudent, dans l'univers des calques.
Nous entrons ici, d'un pas prudent, dans l'univers des calques.

 

Voyons d'abord le script :
Voyons d'abord le script :

 

Nous écrirons, toujours en code source, dans le HEAD :

<style>div {position:absolute;} 

.ombre {top:+1; left:+0; color:black;} 

.texte {top:0; left:1; color:blue;}

</style>

D'une simplicité ... presque enfantine !

Et voici ce que l'on doit trouver dans le BODY :

<P>

<FONT FACE="Verdana"><div> <div class="ombre">

<B>Votre texte sera écrit ici</B></div> <div class="texte">

<B>Votre texte sera écrit ici</B></FONT>

</P>

<P></div> </div>&nbsp;</P>

Comme vous le voyez, ces scripts sont très courts. Il convient néanmoins de limiter leur usage car certains écrans ont des difficultés à afficher un texte lisible. Il faudra donc essayer plusieurs configurations en fonction des paramètres suivants :

TOP et LEFT permettront d'ajuster l'écart des deux textes, au pixel près.

COLOR permettra d'indiquer les couleurs d'avant et d'arrière-plan.

 FONT FACE permettra le choix de la police de caractères adéquate.

Il restera alors à définir la taille des caractères (attributs B,H, etc.) de sorte que l'effet escompté soit visible.

OMBRE et TEXTE sont les noms donnés aux deux textes (identiques, à l'espace près !) affichés.

L'utilisation d'un calque sur une page a des limites : la couleur des textes ne peut être définie qu'une seule fois puisque le script est obligatoirement inséré dans le HEAD et l'espacement du texte d'avant-plan et de son ombrage obéissent aux même restrictions : un seul réglage, en tête de page. On ne peut donc jouer que sur le choix et la taille de la police de caractères...

Il convient par ailleurs d'utiliser cet outil à bon escient car certains écrans en rendent la lecture assez pénible.