Les textes et entités en 3 dimensions

Couleurs et fantaisie dans une page ! Pourquoi pas ? Quelques exemples :

Etonnant, non !?
Etonnant, non !?
Etonnant, non !?
Et un effet sympa
Et un effet sympa
Et un effet sympa
Encore un autre !
Encore un autre !
Encore un autre !
Une autre couleur
Une autre couleur
Une autre couleur
Voyez celle-ci !
Voyez celle-ci !
Voyez celle-ci !
Et encore ici ...
Et encore ici ...
Et encore ici ...
Voici le dernier !
Voici le dernier !
Voici le dernier !
¤
¤
¤
Ω
Ω
Ω
Π
Π
Π
ω
ω
ω
ت
ت
Ф
Ф
Ф
©
©
©
Δ
Δ
Δ
ш
ш
ш
п
п
п

Si la technique des feuilles de style permet de telles fantaisies, pourquoi s'en priver ? Certains esprits chagrins, ceux que l'on appelle puristes, s'offusqueront probablement de ce qu'ils appelleraient un "détournement" d'usage, partant du principe que les CSS ne sont pas un outil graphique. Je pense qu'ils ont tort car ce langage risque bien de le devenir : il en possède les atouts et comporte déjà certaines propriétés allant dans ce sens. Ne gâchons donc pas VOTRE plaisir et voyons ce qui est possible jusqu'aux CSS2 :

Vous avez déjà pu voir, dans un exposé de la rubrique "Html et JavaScript", un exemple simplifié de texte utilisant cette faculté de superposition aboutissant ainsi aux effets en 3 dimensions. Il s'agit naturellement d'un effet d'optique obtenu grâce au choix judicieux des couleurs et des retraits des calques superposés.

Dans cette première approche, l'écriture se limitait à deux calques et il était, à l'époque où cet exposé fut publié (en 1998), inutile de pousser plus loin : la majorité des navigateurs était incapable d'afficher correctement le résultat. Ce incapacité ne troublait pas outre mesure la mise en page puisqu'il ne s'agissait que d'un décalage d'un pixel. Nous pouvons maintenant aller plus loin : plus de 95 % des navigateurs du W.W.W. interprétent maintenant cette propriété. Les exemples repris ci-dessus ont été réalisés au moyen de 3 calques pour chaque phrase (dans le "tableau" gauche) ou chaque signe (dans le "tableau" droit) qu'ils comportent.

L'écriture en est très simple : elle fait appel aux calques en position absolute. Voici un exemple :

#exemple1 {position:absolute; left:12px; top:2px; color:white}
#exemple2 {position:absolute; left:13px; top:3px; color:yellow}
#exemple3 {position:absolute; left:14px; top:4px; color:red}

Il s'agit donc de créer 3 calques sans couleur de fond (afin d'être transparents) qui seront installés dans un calque parent comme :

#cadre {position:relative; background:blue; width:250px; height:40px; font-family:verdana; font-size:26px}

écrits dans une feuille de style (externe : c'est mieux) et appelés dans la page de la manière suivante :

<div id="cadre">
<div id="exemple1"> la phrase choisie </div>
<div id="exemple2"> la phrase choisie </div>
<div id="exemple3"> la phrase choisie </div>
</div>

Voici le résultat :

la phrase choisie
la phrase choisie
la phrase choisie

Rien de plus facile, comme vous le voyez : un calque parent en position relative afin de s'inscrire dans le flux de la page et 3 calques en position absolue "inscrits" en transparence dans premier.

Le second "tableau", affiché à droite, comporte une série de signes empruntés à différentes tables de caractères reprises sous le code ISO-8559. Il ont été interprétés ici sous forme d'entités. Si vous avez suivi l'exposé à propos des "bulles de texte", vous aurez compris de quoi il s'agit. J'ai tout simplement emprunté quelques-uns de ces caractères et les ai installé dans des calques, de la même façon que ci-dessus. La différence de dimension (de 50 à 75 pixels) donne l'impression qu'il s'agit de dessins mais il n'en est rien. Le nombre important de ces entités (plusieurs centaines !) incluses dans le paramétrage de base de la majorité des navigateurs offre la possibilité de combinaisons telles que l'affichage de véritables "créations" ! Un exemple facile :

Π
Π
Π
ш
ш
ш

... qui pourra peut-être donner des idées aux esprits créatifs et artistiques : après tout, l'art graphique n'est que la transposition de formes, géométriques ou non, imbriquées ou non, plus ou moins colorées et mises en valeur pour former un tout ... qui s'appellera une oeuvre. Qu'elle soit appréciée ou non, cela est une autre histoire ! Reste un problème : la précision extrême que requiert cet exercice peut amener à des différences d'affichage. Cet exemple est presque parfait (on ne discutera pas des goûts et des couleurs ...) lorsqu'il est affiché par IE 5.0 et suivants mais décalé sous Mozilla : il faut donc tenter de "petits arrangements" si l'on veut être universel.

Pour ceux qui veulent aller plus loin dans cette voie, il existe encore une possibilité : les polices de caractères spéciales telles "Wingdings" et autres "Webdings" qui sont constituées de véritables dessins : elles offrent un terrain de jeu qui, s'il n'assure pas d'être "compatible à 100%" (bien que bon nombre de concepteurs proprosent le téléchargement de certaines polices en préalable à la lecture de leur site) n'en est pas moins ludique. Rien ne vous interdit de les afficher en proposant ce téléchargement et, peut-être, êtes-vous intéressé par cette possibilité pour un site "intranet". Dès lors, voici une série de ces graphismes :

e f i l m p v x y z 2
e f i l m p v x y z 2
e f i l m p v x y z 2
a d f i 0 1 2 4
a d f i 0 1 2 4
a d f i 0 1 2 4
6 7 8 9 z . : =
6 7 8 9 z . : =
6 7 8 9 z . : =
$ µ ) à ( ' " &
$ µ ) à ( ' " &
$ µ ) à ( ' " &

Vous voyez qu'il y a de la matière ! Le résultat peut être bien meilleur que celui que vous observez : je me suis borné ici à une écriture simple, une taille de police identique et des couleurs aléatoires. Vous trouverez, pour plus de facilité, les calques et leurs règles en code source de cette page. Celui identifié sous le nom cadre3 est réglé dans la feuille de style externe de la façon suivante :

#cadre3 {position:relative; background:black; width:660px; height:60px; font-size:39px; font-family:wingdings}

en ajoutant une bordure partielle (les autres sont dans la page) pour faire plus "joli". Ne vous y trompez pas : il est repris 4 fois à l'identique afin de ne pas devoir modifier les positionnements de chaque ligne de caractères, formant ainsi un empilement donnant l'impression qu'il n'existe qu'un "tableau".

Voilà : à vous de jouer maintenant !

retour