Linear-gradient

2

La propriété background-image accepte la fonction linear-gradient(). Comme son nom l'indique, celle-ci permet de définir un dégradé. Pour générer un dégradé, il faut minimalement attribuer deux couleurs en paramètre à la fonction.

Toutes les unités de couleurs sont supportées.

Par exemple, pour définir un dégradé de vert à bleu:

background-image: linear-gradient(#00c774, #3c38ba);

Voir le CodePen de Simon Arnold (@smnarnold).

Orientation

Mots-clés

Par défaut, les dégradés sont verticaux. Cependant, il est possible de spécifier une direction particulière en le spécifiant dans le premier paramètre de la fonction linear-gradient().

Le plus simple est d'utiliser en début de fonction des mots-clés indiquant la direction.

Par exemple:

  • to top
  • to right
  • to bottom (Par défaut)
  • to left

Voir le CodePen de Simon Arnold (@smnarnold).

Pour créer des dégradés diagonaux, il est possible de spécifier une deuxième direction dans le mot-clé.

Par exemple:

  • to top left
  • to top right
  • to bottom left
  • to bottom right

Voir le CodePen de Simon Arnold (@smnarnold).

Degrés

Il est aussi possible de spécifier une rotation en termes de degrés pour plus de précision.

Par exemple:

background-image: linear-gradient(90deg, #00c774, #3c38ba);

Serait l'équivalent de to right. Donc il serait possible de spécifier au degré prêt l'axe du dégradé souhaité.

Points d'arrêt

Par défaut, lorsqu'aucun point d'arrêt n'est spécifié, les couleurs sont distribuées de façon égale.

Par exemple un dégradé à trois couleurs, sans point d'arrêt, donc égales, génère de 0 à 50% une fusion du vert vers le bleu et de 50% à 100% une fusion de bleu vert le rouge.

background: linear-gradient(to right, #00c774, #3c38ba, #ff8487);

Voir le CodePen de Simon Arnold (@smnarnold).

Il est cependant possible de définir un point d'arrêt après une couleur afin de spécifier à partir de quel point cette couleur doit commencer à fusionner avec la suivante.

Par exemple, pour contrôler la distribution du vert:

Voir le CodePen de Simon Arnold (@smnarnold).

Pour en savoir plus, voir cet article MDN sur linear-gradient().

Donnez votre opinion
sur les notes de cours sur cette page.
Merci d'avoir partagé ton opinion 😎
Pssst, c'est 💯 anonyme