Linear-gradient¶
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.
Par exemple, pour définir un dégradé de vert à bleu:
background-image: linear-gradient(#00c774, #3c38ba);
Orientation¶
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 topto rightto bottom (par défaut)to left
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 leftto top rightto bottom leftto bottom right
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);
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:
OUTILS¶
uiGradients
Collection de dégradés prêts à être utilisés.
uiGradients
CSS Gradient
Générateur de dégradés.
CSS Gradient
EXERCICE¶
Linear-gradient - Igloofest
Pour cet exercice, vous devez compléter la mise en page d’un carton promotionnel de l’Igloofest.
Linear-gradient - Igloofest