Création de dégradés linéaires en CSS avec linear-gradient

Télécharger le PDF du cours


Livret PDF du cours
En CSS, un dégradé est considéré comme une image qui va progressivement passer d’une couleur de base à une couleur d’arrivée.

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 de 0deg sous forme de mot clef va être to top ;
  • Un angle de 90deg signifie que le dégradé se fera selon l’axe horizontal de la gauche vers la droite. L’équivalent de 90deg sous forme de mot clef va être to right ;
  • Un angle de 180deg indique que le dégradé se fera selon l’axe vertical à partir du haut vers le bas. L’équivalent de 180deg sous forme de mot clef va être to bottom ;
  • Un angle de 270deg signifie que le dégradé se fera selon l’axe horizontal de la droite vers la gauche. L’équivalent de 270deg sous forme de mot clef va être to 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 :

Schéma progression dégradé color stop

 

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).

Support HTML pour création de dégradé linéaire en CSS avec linear-gradient

Utilisation de linear-gradient en CSS

On crée des dégradés linéaires simples en CSS avec linear-gradient

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 :

Support HTML pour création de dégradé linéaire en CSS avec linear-gradient

On crée un dégradé linéaire en CSS avec linear-gradient avec direction et color stop

Un dégradé linéaire CSS avec direction et color stop

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.

Support HTML pour création de dégradé linéaire en CSS avec linear-gradient

Création de dégradé linéaire semi transparent en CSS avec linear-gradient

On crée des dégradés linéaires semi transparent en CSS avec linear-gradient

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.

Support HTML pour création de dégradé linéaire en CSS avec linear-gradient

Définition d'un linear-gradient CSS semi transparent par dessus une background-image

On ajoute un dégradé linéaire semi transparent en CSS par dessus une 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.

Support HTML pour création de dégradé linéaire en CSS avec linear-gradient

Définition de plusieurs dégradés linéaires avec linear-gradient en fond d'un même élément

On applique plusieurs dégradés en CSS en fond d'un même élément HTML

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.

Support HTML pour création de dégradé linéaire en CSS avec repeating-linear-gradient

Utilisation de repeating-linear-gradient en CSS

Exemple d'utilisation de repeating-linear-gradient en CSS

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é.

Support HTML pour création de dégradé linéaire en CSS avec repeating-linear-gradient

Utilisation de repeating-linear-gradient en CSS et transition fluide

Exemple d'utilisation de repeating-linear-gradient en CSS avec transition fluide

See the Pen Cours HTML CSS 9.3.6 by Pierre (@pierregiraud) on CodePen.

Laisser un commentaire

© Pierre Giraud - Toute reproduction interdite - Mentions légales