Ainsi, nous allons pouvoir créer et utiliser les dégradés en CSS avec toutes les propriétés qui acceptent des images et notamment créer des dégradés en fond de nos éléments en utilisant la propriété background
.
Il existe deux types de dégradés en CSS :
- Les dégradés linéaires ou
linear-gradient
en anglais dont le principe va être de passer progressivement d’une couleur à une autre de manière linéaire c’est-à-dire selon un axe donné ; - Les dégradés radiaux ou
radial-gradient
en anglais pour lesquels le passage d’une couleur à une autre va se faire dans toutes les directions à partir d’un point central.
Dans cette leçon, nous allons nous intéresser à la création de dégradés linéaires seulement. Nous verrons comment créer des dégradés radiaux dans la leçon suivante.
Qu’est-ce qu’un dégradé linéaire ?
Un dégradé linéaire est un dégradé qui va se faire selon un axe ou une direction unique.
Nous allons pouvoir créer un dégradé linéaire en CSS en utilisant la syntaxe linear-gradient()
en valeur d’une propriété acceptant des images comme background
par exemple.
Voici un premier exemple de dégradé linéaire :
Direction et couleurs du dégradé
Pour créer un dégradé linéaire de manière effective, il va falloir préciser un axe ou une direction pour notre dégradé ainsi qu’au moins deux couleurs et éventuellement définir des « color stops » qui vont nous permettre d’indiquer qu’à un certain point le dégradé doit passer par une couleur donnée.
Définition de la direction d’un dégradé linéaire
Nous allons pouvoir préciser la direction du dégradé de deux manières différentes : soit en utilisant une notation sous forme d’angle en degrés deg
, soit avec les mots clefs to top
, to right
, to bottom
, to left
ou les combinaisons to bottom right
, to bottom left
, etc.
- Un angle de
0deg
indique que le dégradé se fera selon l’axe vertical à partir du bas vers le haut. L’équivalent de0deg
sous forme de mot clef va êtreto top
; - Un angle de
90deg
signifie que le dégradé se fera selon l’axe horizontal de la gauche vers la droite. L’équivalent de90deg
sous forme de mot clef va êtreto right
; - Un angle de
180deg
indique que le dégradé se fera selon l’axe vertical à partir du haut vers le bas. L’équivalent de180deg
sous forme de mot clef va êtreto bottom
; - Un angle de
270deg
signifie que le dégradé se fera selon l’axe horizontal de la droite vers la gauche. L’équivalent de270deg
sous forme de mot clef va êtreto left
;
De même, la valeur to top right
va être équivalente à 45deg
: le dégradé partira d’en bas à gauche de l’élément pour aller en haut à droite et etc.
A noter : Utiliser des notations sous forme d’angles en degrés va nous permettre d’ajuster la direction de nos dégradés de manière beaucoup plus précise qu’en utilisant les mots clefs.
Notez que si on ne précise pas de direction pour un dégradé linéaire, alors la direction du dégradé sera par défaut verticale du haut vers le bas c’est-à-dire to bottom
ou encore 180deg
.
Les “color stops” et l’avancement d’un dégradé
Les « color stops » vont être des points que nous allons définir au niveau desquels notre dégradé doit arriver à une couleur en particulier. Les « color stops » seront généralement situés entre le point de départ et le point d’arrivée de notre dégradé mais cela n’est pas obligatoire (on peut tout à fait définir un color stop en dehors de notre dégradé).
Pour définir un color stop, nous allons attribuer un pourcentage à une couleur. Ce pourcentage représente un niveau d’avancement du dégradé pour lequel il doit arriver à la couleur correspondante.
En effet, un dégradé linéaire se fait selon une direction. Vous pouvez imaginer cette direction sous forme d’une droite.
Le point de départ de notre dégradé linéaire ou le 0% va se trouver au point où la droite perpendiculaire à la direction du dégradé touche l’extrémité de la boite représentant l’élément dans lequel on crée notre dégradé et de manière identique pour le point d’arrivée de notre dégradé de l’autre côté de la boite.
Regardez plutôt le schéma suivant pour bien comprendre cela :
Exemples de création de dégradés linéaires
Maintenant que nous avons vu la théorie, il est temps de passer à la pratique et de créer nos premiers dégradés linéaires afin de voir comment cela va fonctionner en pratique. Dans les exemples suivants, je vais créer des dégradés linéaires en images de fond de mes éléments.
Création de dégradés linéaires simples
Commençons avec quelques exemples simples. Essayez de bien retenir la syntaxe des exemples suivants et notamment quand utiliser des virgules ou pas (pour faire simple, nous n’utilisons les virgules que pour séparer les couleurs entre elles et les séparer des autres valeurs à part des color stops qui leur sont associés).
See the Pen Cours HTML CSS 9.3.1 by Pierre (@pierregiraud) on CodePen.
Ici, mes cinq dégradés sont strictement identiques. En effet, je crée un dégradé en image de fond avec la propriété background
et la notation linear-gradient
pour mon premier div id="ex1"
en renseignant une couleur de départ, le jaune (yellow), et une couleur d’arrivée, le rouge (red). Dans ce premier exemple, je n’indique ni direction ni color stop. Les valeurs par défaut vont donc être utilisées à savoir to bottom
ou 180deg
pour la direction et 0%
en color stop pour ma couleur de départ et 100%
pour ma couleur d’arrivée.
Dans les dégradés suivants, je me contente de renseigner des valeurs qui sont ici superflues puisque ces valeurs sont les valeurs par défaut.
Notez que dans le cinquième exemple j’inverse à la fois la direction du dégradé et les couleurs de départ et d’arrivée ce qui fait que nous nous retrouvons une nouvelle fois avec le même dégradé !
Création de dégradés avec direction et color stops
Essayons maintenant de créer des dégradés linéaires avec plus de deux couleurs et en définissant des directions et color stops différents :
See the Pen Cours HTML CSS 9.3.2 by Pierre (@pierregiraud) on CodePen.
Dans le premier exemple, on définit un dégradé linéaire à trois couleurs : du jaune vers le rouge puis vers le violet sans préciser de color stop. La couleur jaune sera ainsi par défaut atteinte à 0% du dégradé puis le rouge à 50% et enfin le violet à 100% puisque les color stops sont distribués équitablement par défaut (dans le cas de 4 couleurs, les color stops par défaut seraient 0% 33.33% 66.66% 100%, dans le cas d’un dégradé à 5 couleurs on aurait 0% 25% 50% 75% 100% et etc.).
Dans les deuxième et troisième exemples, en revanche, on définit des color stop personnalisées. Dans le deuxième exemple, on demande à ce que la couleur jaune soit atteinte à 40% du dégradé. Comme le jaune est également la couleur de départ, notre dégradé sera jaune entre 0 et 40%.
Ensuite, on demande à ce que la couleur rouge soit atteinte à 60%. Il va donc y avoir dégradé du jaune vers le rouge entre 40% et 60% de notre dégradé puis ensuite du rouge vers le violet entre 60% et 100%.
Dans le troisième exemple, on utilise un color stop en dehors de notre de la boite. On demande à ce que notre dégradé arrive à la couleur jaune à -40%. Cela signifie que si notre ligne de dégradé dans la boite de l’élément fait 100px de long, on souhaite atteindre le jaune 40px avant notre 0%.
Ensuite on demande à arriver au rouge à 20%. La transition du jaune vers le rouge va donc se faire entre -40% et 20% et donc nous n’allons pas voir le jaune en soi puisque tous les color stops inférieurs à 0% ou supérieurs à 100% se situent en dehors de la boite représentant l’élément dans lequel on crée notre dégradé.
Création de dégradés semi-transparents
Nous pouvons tout à fait définir des dégradés semi-transparents en utilisant des notations RGBa ou HSLa pour préciser les couleurs de nos dégradés. Notez par ailleurs qu’on peut très bien définir le début d’un dégradé avec une couleur semi transparente et la fin de celui-ci avec une couleur opaque ou inversement.
See the Pen Cours HTML CSS 9.3.3 by Pierre (@pierregiraud) on CodePen.
Dans l’exemple ci-dessus, on crée trois dégradés : un premier dégradé complètement opaque, un deuxième dégradé avec des couleurs semi transparentes en utilisant des notations RGBa et un troisième dégradé semi transparent au début, opaque au milieu puis à nouveau semi transparent à la fin.
Définir des dégradés semi-transparents va être véritablement intéressant dans le cas où on souhaite simplement ajouter un effet de couleur par-dessus une image de fond par exemple. En effet, rappelez-vous qu’un dégradé est considéré comme une image en CSS et que la propriété background
supporte tout à fait plusieurs images de fond.
Ici, il va bien falloir faire attention à l’ordre des déclarations : je vous rappelle que le premier fond déclaré sera toujours au-dessus du deuxième, qui sera lui-même au-dessus du troisième et etc. Ainsi, en déclarant notre dégradé en fond avant notre image, nous allons pouvoir ajouter des couleurs devant notre image de fond.
Créer plusieurs dégradés en fond d’un élément
Nous venons de voir qu’on pouvait tout à fait placer un dégradé et une image en fond d’un même élément. De la même façon, on va pouvoir déclarer plusieurs dégradés en fond d’un élément.
Pour affecter plusieurs dégradés linéaires à notre background
, il va suffire de séparer les différentes déclarations par une virgule de la même façon qu’on séparait les images de fond.
Le premier dégradé déclaré sera au-dessus du deuxième qui sera lui-même au-dessus du troisième et etc., chaque nouvelle déclaration créant une nouvelle couche de fond pour l’élément concerné. Bien évidemment, si les dégradés sont opaques, alors seul le premier déclaré sera visible (il cachera totalement les autres).
En revanche, si le ou les dégradés du dessus sont semi transparents, alors on va pouvoir voir également les dégradés des couches plus profondes et les couleurs des différents dégradés vont se mélanger ou « fusionner » entre elles.
See the Pen Cours HTML CSS 9.3.4 by Pierre (@pierregiraud) on CodePen.
La répétition des dégradés
Nous avons vu comment créer des dégradés uniques linéaires avec la fonction linear-gradient()
.
Le CSS nous offre également la possibilité de créer des dégradés qui vont pouvoir se répéter grâce en utilisant cette fois-ci plutôt la fonction repeating-linear-gradient()
.
Bien évidemment, pour voir l’effet d’un dégradé répété il faudra régler les color stops de façon à ce que la première itération du dégradé n’occupe pas 100% de l’espace de base.
See the Pen Cours HTML CSS 9.3.5 by Pierre (@pierregiraud) on CodePen.
Ici, vous pouvez voir que la transition entre la première et la deuxième itération du dégradé est brutale lors de l’utilisation de repeating-linear-gradient()
.
Ce comportement est tout à fait normal puisqu’ici le color stop relatif au violet est en fin de dégradé et le color stop du jaune est au tout début. On va donc passer directement du violet au jaune sans transition fluide.
Si on souhaite créer une transition plus fluide entre les différentes itérations de notre dégradé, il faudra créer le dégradé de manière à ce qu’il boucle sur lui-même c’est-à-dire qu’il faudra répéter la couleur de début de dégradé en fin de dégradé.
See the Pen Cours HTML CSS 9.3.6 by Pierre (@pierregiraud) on CodePen.