Ecrire en 3D avec CSS3

Puisque c'est la période des fêtes de fin d'année, je vous propose d'apprendre en nous amusant un peu avec les propriétés CSS3. Et vous allez voir que l'on peut faire des choses assez sympa ! Vous pourrez terminer l'année 2014 en beauté avec un message en 3D à destination de vos amis. Rassurez-vous, rien de très compliqué ;)

En design, pour rendre l'effet de relief, on utilise la technique de l'ombre portée. Il existe 2 propriétés CSS3 qui permettent d'ajouter une ombre au texte :text-shadow et box.shadow. Les deux font à peu près la même chose : nous utiliserons ici text-shadow. Étudions d'abord comment fonctionne ces propriétés avant de passer à une mise en pratique plus ludique.

Ecrire en 3D avec CSS3

Le déplacement horizontal

Dans l'exemple qui suit, l'ombre du texte a un très petit déplacement vertical (1px). Ainsi, le déplacement horizontal (positif: 10px; négatif: -10px) est très marqué.

#exemple1 {
 text-align: center;
 text-shadow: 10px 1px 1px #ccc;
 }
#exemple1 .negatif {
 text-shadow: -10px 1px 1px #ccc;
 }

Ce qui nous donne :

Bonjour
Au revoir

Pour simuler le mouvement horizontal, nous pouvons utiliser aussi bien des valeurs positives que négatives.
Les valeurs positives déplacent l'ombre vers la droite tandis que les valeurs négatives déplacent l'ombre vers la gauche.

Le déplacement vertical

Dans l'exemple suivant, l'ombre du texte a un très petit déplacement horizontal (1px). Ainsi, le déplacement vertical (positif: 10px; négatif: -10px) est très évident.

#exemple2 {
 text-align : center;
 text-shadow : 1px -10px 1px #333162;
 }
#exemple2 .negatif {
 text-shadow : 1px 10px 1px #333162;
 }
 

Ce qui nous donne :

Bonjour
Au revoir

Pour simuler le déplacement vertical, nous pouvons utiliser des valeurs à la fois positives et négatives.
Les valeurs positives déplacent l'ombre vers le bas tandis que les valeurs négatives déplacent l'ombre vers le haut.

Le floutage (blur)

Essayons d'ajouter un peu de flou (5px). Voilà qui brouille l'ombre. Cette fois, l'ombre est décalée horizontalement ou verticalement de 10px.

#exemple3 {
 text-align : center;
 text-shadow : 10px 10px 5px#333162;
 }
 

Ce qui nous donne :

Exemple

Les couleurs

En ce qui concerne les couleurs, nous pouvons utiliser les codifications couleurs hex, rgb, hsl ou le noms des couleurs (grey, yellow, black, etc).

#exemple4 {
 text-align : center;
 text-shadow :rgb(255,0,31) 10px 10px 5px;
 }
 

Ce qui nous donne :

Exemple

Deux ombres ou plus

Si vous le voulez, vous pouvez appliquer plusieurs ombres à votre texte (question de goût, je ne suis pas fan). Dans ce cas, vous veillerez à séparer les codes par une virgule ",".

#exemple5 {
 text-align : center;
 text-shadow : #f00 10px 10px 5px , -10px -10px 5px #00f;
 }

Ce qui nous donne :

Exemple

Et pour terminer...

Comme prévu, nous terminons ce tutoriel par un exemple un peu plus complet et ludique. Je vous laisser d'abord regarder le code CSS3 pour comprendre son fonctionnement à la lumière de ce que nous venons de voir. Vous pouvez le reprendre et le modifier selon vos besoins !

#exercice
    {display:block; width:750px; margin:100px auto;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:120px;
	text-align:center;
text-shadow:
	/*relief*/	 
     0 1px 0 rgb(200,200,200),
     0 2px 0 rgb(190,190,190),
     0 3px 0 rgb(180,180,180),
     0 4px 0 rgb(175,175,175),
     0 5px 0 rgb(180,180,180),
     0 6px 0 rgb(190,190,190),
	/*ombre*/
     6px 7px  5px  rgba(0, 0, 0, .40),
     6px 12px 10px rgba(0, 0, 0, .30), 
     6px 17px 20px rgba(0, 0, 0, .20),
     6px 22px 30px rgba(0, 0, 0, .10);
color: white;
	/*-webkit-transform: rotateY(20deg) rotateX(30deg);*/
	}

Ce qui nous donne (ceci n'est pas une image !) :

Conclusion

Voilà, avouez que ce n'était pas très compliqué ! Amusez-vous également à faire varier la hauteur du relief avec celle de l'ombre. Cela vous permettra d'appréhender la manière dont réagit la propriété text-shadow et de vous en servir à votre tour ;)
Passez d'excellentes fêtes de fin d'année et à l'année prochaine !


Daniel Dubois

Daniel Dubois

Passionné par le Web depuis 2007, Daniel défend la veuve et l'orphelin du web en créant des sites respectueux du W3C. Fort d'une expérience de plusieurs années, il partage ses connaissances dans un état d'esprit open source.
Très impliqué dans la communauté Joomla depuis 2014, il est actif au sein de plusieurs projets, conférencier et fondateur du JUG Breizh.