CSS - Un texte en 3D

Vous pensiez que des titres d'articles affichables automatiquement en 3D n'existaient que dans vos rêves ?
Eh bien détrompez-vous ! En CSS3, c'est possible et même sur Eklablog :

Une ombre, plus une ombre, plus une ombre… = 3D !

L'astuce est fort simple à comprendre : il suffit d'utiliser la propriété CSS3 text-shadow, et de décliner les ombres, pixel par pixel, pour former le volume. Car, oui, il est possible de déclarer plusieurs ombres dans un seul et même text-shadow !

Note : Dans un article précédent, j'explique où ajouter votre code CSS pour votre blog Eklablog.

Petit rappel, donc de l'écriture de la propriété text-shadow :

text-shadow: NlargeurMesure NhauteurMesure NflouMesure Couleur;

Le premier chiffre concerne la largeur, le second la hauteur, le troisième l'amplitude du flou (toujours en unité de longueur). Pour ces chiffres, la mesure doit être précisée (em, rem, px…) sauf pour un zéro, et ils peuvent être négatifs (un - devant) pour les ombres vers le haut ou la gauche. Et pour terminer, on note la couleur de l'ombre (fonction rgba acceptée pour la transparence si besoin).

Mais pour notre 3D, point besoin de flou ! Toutes nos ombres devront rester nettes, le flou restera donc toujours à zéro.

Essayons, je vous prie, un effet 3D en bas à droite sur ce titre de couleur orange :

Futur titre 3D

Je crée donc ma première ombre, qui sera plus foncée que la couleur de mon titre :

text-shadow: 1px 1px 0 #873900;

Futur titre 3D

J'ajoute une seconde ombre, un peu plus claire et 1 pixel plus profonde, et je sépare les deux suites de valeurs par une virgule :

text-shadow: 1px 1px 0 #873900, 2px 2px 0 #963F00;

Futur titre 3D

Et je continue comme cela jusqu'à un résultat satisfaisant :

text-shadow: 1px 1px 0 #873900, 2px 2px 0 #963F00, 3px 3px 0 #A74600;

Futur titre 3D

Eh bien rien qu'avec 3 ombres, voilà déjà un titre qui ne manque pas de volume !

Petite leçon de dessin sur les ombres (c'est cadeau ! )

Je me permet cependant de vous rappeler quelques notions d'éclairage :

Le dégradé de votre ombre dépend, non-seulement de l'orientation de votre éclairage, mais aussi de la clarté de votre fond.

Si nous avons un fond sombre, le dégradé de l'ombre propre ira de clair à foncé comme ceci :

Si au contraire, nous avons un fond clair, l'ombre propre sera éclaircie par le fond. Il sera donc plus approprié d'inverser le dégradé :

Voilà ! C'était le chapitre de monsieur-j'étalle-mon-savoir-inutile.

Un générateur de code CSS en ligne

Trop compliqué de coder soi-même ? Faites appel à un générateur  :

Sur celui-ci, cliquez sur le bouton "Realistic 3D" et choisissez vos couleurs avant de copier le code généré.

Et quid des blocs ?

Les zones HTML aussi peuvent être transformés en 3D : bloc, bouton, etc.

Il suffit d'utiliser la propriété box-shadow ! Je vous laisse étudier l'affaire tout seuls comme des grands.

Amusez-vous bien !