Dégradés CSS
Les dégradés CSS vous permettent d'afficher des transitions fluides entre deux ou plusieurs couleurs spécifiées.
CSS définit trois types de dégradés :
- Dégradés linéaires (descend/haut/gauche/droite/en diagonale)
- Dégradés radiaux (définis par leur centre)
- Dégradés coniques (tournés autour d'un point central)
Dégradés linéaires CSS
Pour créer un dégradé linéaire, vous devez définir au moins deux arrêts de couleur. Les arrêts de couleur sont les couleurs parmi lesquelles vous souhaitez effectuer des transitions fluides. Vous pouvez également définir un point de départ et une direction (ou un angle) avec l'effet de dégradé.
Syntaxe
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
Direction - De haut en bas (c'est la valeur par défaut)
L'exemple suivant montre un dégradé linéaire qui commence en haut. Il commence en rouge, passant au jaune :
Exemple
#grad {
background-image: linear-gradient(red, yellow);
}
Direction - de gauche à droite
L'exemple suivant montre un dégradé linéaire qui commence à partir de la gauche. Il commence en rouge, passant au jaune :
Exemple
#grad {
background-image: linear-gradient(to right, red , yellow);
}
Direction - Diagonale
Vous pouvez créer un dégradé en diagonale en spécifiant les positions de départ horizontale et verticale.
L'exemple suivant montre un dégradé linéaire qui commence en haut à gauche (et va en bas à droite). Il commence en rouge, passant au jaune :
Exemple
#grad {
background-image: linear-gradient(to bottom right, red, yellow);
}
Utilisation des angles
Si vous voulez plus de contrôle sur la direction du dégradé, vous pouvez définir un angle, au lieu des directions prédéfinies (vers le bas, vers le haut, vers la droite, vers la gauche, vers le bas à droite, etc.). Une valeur de 0deg équivaut à "to top". Une valeur de 90 degrés équivaut à "vers la droite". Une valeur de 180 degrés équivaut à "vers le bas".
Syntaxe
background-image: linear-gradient(angle, color-stop1, color-stop2);
L'exemple suivant montre comment utiliser des angles sur des dégradés linéaires :
Exemple
#grad {
background-image: linear-gradient(180deg, red, yellow);
}
Utilisation de plusieurs arrêts de couleur
L'exemple suivant montre un dégradé linéaire (de haut en bas) avec plusieurs arrêts de couleur :
Exemple
#grad {
background-image: linear-gradient(red, yellow, green);
}
L'exemple suivant montre comment créer un dégradé linéaire (de gauche à droite) avec la couleur de l'arc-en-ciel et du texte :
Exemple
#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
Utilisation de la transparence
Les dégradés CSS prennent également en charge la transparence, qui peut être utilisée pour créer des effets de fondu.
Pour ajouter de la transparence, nous utilisons la fonction rgba() pour définir les arrêts de couleur. Le dernier paramètre de la fonction rgba() peut être une valeur comprise entre 0 et 1, et il définit la transparence de la couleur : 0 indique une transparence totale, 1 indique une couleur pleine (pas de transparence).
L'exemple suivant montre un dégradé linéaire qui commence à partir de la gauche. Il commence complètement transparent, passant au rouge complet :
Exemple
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0),
rgba(255,0,0,1));
}
Répétition d'un dégradé linéaire
La fonction repeating-linear-gradient() est utilisée pour répéter des dégradés linéaires :
Exemple
Un dégradé linéaire répétitif :
#grad {
background-image:
repeating-linear-gradient(red, yellow 10%, green 20%);
}