Puisque c'est la période des fêtes de fin d'année, je vous propose d'apprendre en jouant avec les propriétés CSS3. Et vous allez voir dans ce tutoriel que l'on peut faire des choses plutôt sympa ! Vous pourrez terminer cette année en beauté avec un message en 3D à destination de vos amis. Rassurez-vous, ce n'est vraiment pas 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.
Comme ces deux propriétés font à peu près la même chose, nous utiliserons de préférence text-shadow. Étudions d'abord comment fonctionne ces propriétés avant de passer à une mise en pratique plus ludique.
Le principe du 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
Maintenant, si on cherche à 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). Cela aur pour effet de brouiller 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, il est possible d'utiliser les codifications couleurs hex, rgb, hsl ou même le nom 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 mais moi, 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 beaucoup plus amusant. Je vous laisser d'abord regarder le code CSS 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:Roboto, 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 (et non, ceci n'est pas une image !) :
Conclusion
Et 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 afin de pouvoir vous en servir à votre tour pour écrire en 3D avec CSS3.
Puisque c'est la période des fêtes de fin d'année, je vous propose d'apprendre en jouant avec les propriétés CSS3. Et vous allez voir dans ce tutoriel que l'on peut faire des choses plutôt sympa ! Vous pourrez terminer cette année en beauté avec un message en 3D à destination de vos amis. Rassurez-vous, ce n'est vraiment pas 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.
Comme ces deux propriétés font à peu près la même chose, nous utiliserons de préférence text-shadow. Étudions d'abord comment fonctionne ces propriétés avant de passer à une mise en pratique plus ludique.
Le principe du 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
Maintenant, si on cherche à 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). Cela aur pour effet de brouiller 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, il est possible d'utiliser les codifications couleurs hex, rgb, hsl ou même le nom 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 mais moi, 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 beaucoup plus amusant. Je vous laisser d'abord regarder le code CSS 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:Roboto, 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 (et non, ceci n'est pas une image !) :
Conclusion
Et 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 afin de pouvoir vous en servir à votre tour pour écrire en 3D avec CSS3.
A propos de Daniel
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 de son expérience, il partage ses connaissances dans un état d'esprit open source. Très impliqué en faveur du CMS Joomla depuis 2014, il est également conférencier et fondateur du Joomla User Group Breizh.
A propos
Liens rapides
- Foire aux questions
- Guidelines for guest blogging
Désolé, nous ne publions pas d'articles sponsorisés