Les Ombrages

Salut !

Nous allons voir ici les "ombrages". Mais qu'est-ce donc ? Rien de bien mystérieux : nous allons voir comment ajouter des ombres aux textes et aux boîtes.


Pour mettre une ombre sur un texte, on utiliser la propriétés text-shadow. L'attribut CSS s'écrit de cette façon :

Code:

text-shadow: Xpx Ypx Zpx #couleur;

X = le décalage horizontal par rapport au texte
Y = le décalage vertical par rapport au texte
Z = la netteté de l'ombre (0 = net (comme un contour) ; plus on s'éloigne de 0, plus l'ombre est floue)
couleur = la couleur de l'ombre.


Pour une ombre rouge, très floue et assez "loin" du texte :

text-shadow:2px 3px 9px #FF0000

Code:

<p style="text-shadow:2px 3px 9px #FF0000;">text-shadow:2px 3px 9px #FF0000</p>

Pour une ombre très proche du texte et nette :

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

Code:

<p style="text-shadow:1px 1px 0px #000;color:#fff;">text-shadow:1px 1px 0px #000;</p>

Il est possible de mettre des valeurs négatives pour les décalages horizontaux et verticaux, pour que l'ombre soit sur la gauche et/ou le haut et non vers la droite et le bas :

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

Code:

<p style="text-shadow:-1px 1px 0px #000;color:#fff;">text-shadow:1px 1px 0px #000;</p>

Pour mettre des ombres sur les éléments (div, image, tableau, etc.), on va utiliser la propriété : box-shadow et le codage est le même que pour le text-shadow, à savoir :

Code:

box-shadow: Xpx Ypx Zpx #couleur;

X = le décalage horizontal par rapport à l’élément
Y = le décalage vertical par rapport à l’élément
Z = la netteté de l'ombre (0 = net (comme un contour) ; plus on s'éloigne de 0, plus l'ombre est floue)
couleur = la couleur de l'ombre.


On reprend les mêmes effets que sur les textes.

Code:

<div style="box-shadow:2px 3px 9px #FF0000;">box-shadow:2px 3px 9px #FF0000</div>

Code:

<div style="box-shadow:1px 1px 0px #000;background:#fff;">box-shadow:1px 1px 0px #000;</div>

Il est possible de mettre des valeurs négatives pour les décalages horizontaux et verticaux, pour que l'ombre soit sur la gauche et/ou le haut et non vers la droite et le bas :

Code:

<div style="box-shadow:-1px -1px 0px #000;background:#fff;">box-shadow:1px 1px 0px #000;</div>

Le spread est une valeur s'ajoutant entre le "flou" et la couleur : elle permet de redimensionner l'ombre. Par exemple on peut faire un cadre complet sur le texte ou sur une boite avec un "spread" à 2px :

Code:

<div style="box-shadow:0px 0px 0px 2px #FF0000;">box-shadow:2px 3px 9px #FF0000</div>

On peut aussi faire un contour complet sur du texte : pour cela on va ajouter 3 couches au text-shadow (il y en aura donc 4), séparées par une virgule, afin d'appliquer un contour de tous les cotés
Par exemple :

Mon texte avec une bordure

Code:

<p style="color: white; text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000,-1px -1px 0 #000">Mon texte avec une bordure</p>

Et on peut décider de mettre certains contour d'une couleur, d'autre d'une autre :

Mon texte avec une bordure

Code:

<p style="color: white; text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #FF0000 ,-1px -1px 0 #000">Mon texte avec une bordure</p>

Il est possible de mettre l'ombre à l'intérieur de l'élément : il suffit d'ajouter "inset" :

Code:

<div style="box-shadow:2px 3px 9px #FF0000 inset;">box-shadow:2px 3px 9px #FF0000</div>

Code:

<div style="box-shadow:1px 1px 0px #000 inset;background:#fff ;">box-shadow:1px 1px 0px #000;</div>

Tu as énormément de possibilité sur les ombres : tu peux faire des dégradés d'ombre par exemple. Pour cela, il te suffit d'ajouter les différentes couches les unes à la suite des autres, séparées par une virgule :

un texte en feu par exemple !

Code:

<p style="text-shadow: 0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200; color: #000;"> un texte en feu par exemple ! </p>

---

Et voilà, tu en sais déjà pas mal sur les ombrages maintenant
Ce n'est pas toujours facile de penser à tout. Il existe des générateurs pour ces ombres (qui en plus t'aide pour les effets) : ici pour le text-shadow et ici pour le box-shadow