CSS Dégradés
Dégradés CSS
Les fonctions de dégradé CSS permettent d'afficher des transitions douces entre deux couleurs ou plus au sein d'un élément.
CSS définit trois types de dégradés :
- Dégradés Linéaires - La transition de couleur se fait vers le bas, vers le haut, à gauche, à droite ou en diagonale.
- Dégradés Radiaux - La transition de couleur s'étend à partir d'un point central.
- Dégradés Coniques - La transition de couleur tourne autour d'un point central.
Les fonctions de dégradé CSS sont utilisées dans la propriété background-image .
Fonction CSS linear-gradient()
La fonction CSS linear-gradient() crée un dégradé linéaire.
Un dégradé linéaire définit une transition de couleur qui se fait en ligne droite ; il peut aller vers le bas, vers le haut, à gauche, à droite ou en diagonale.
Un dégradé linéaire nécessite au moins deux arrêts de couleur. Les arrêts de couleur sont les couleurs entre lesquelles vous souhaitez créer des transitions douces. Vous pouvez également définir un point de départ et une direction (ou un angle) pour l'effet de dégradé.
Syntaxe
background-image: linear-gradient( direction , color-stop1 , color-stop2, ... ); Direction - De Haut en Bas (c'est par défaut)
L'exemple suivant montre un dégradé linéaire qui va de haut en bas. Il commence par du rouge, en transition vers du jaune :
Exemple
#grad {
background-image: linear-gradient(to bottom, red, yellow);
} Direction - De Bas en Haut
L'exemple suivant montre un dégradé linéaire qui va de bas en haut. Il commence par du rouge, en transition vers du jaune :
Exemple
#grad {
background-image: linear-gradient(to top, red, yellow);
} Direction - De Gauche à Droite
L'exemple suivant montre un dégradé linéaire qui va de gauche à droite. Il commence par du rouge, en transition vers du jaune :
Exemple
#grad {
background-image: linear-gradient(to right, red , yellow);
} Direction - Diagonale
L'exemple suivant montre un dégradé linéaire qui va de haut-gauche à bas-droit. Il commence par du rouge, en transition vers du jaune :
Exemple
#grad {
background-image: linear-gradient(to bottom right, red, yellow);
} Dégradé Linéaire - Utilisation des Angles
Si vous souhaitez avoir plus de contrôle sur la direction du dégradé, vous pouvez définir un paramètre 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 est équivalente à "vers le haut".
- Une valeur de 90deg est équivalente à "vers la droite".
- Une valeur de 180deg est équivalente à "vers le bas".
- Une valeur de 270deg est équivalente à "vers la gauche".
Syntaxe
background-image: linear-gradient( angle , color-stop1 , color-stop2 ); L'exemple suivant montre comment utiliser des angles pour des dégradés linéaires :
Exemple
#grad {
background-image: linear-gradient(180deg, red, yellow);
} Dégradé Linéaire - Arrêts de Couleur Multiples
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 un dégradé linéaire (de gauche à droite) avec les couleurs de l'arc-en-ciel et un texte :
Exemple
#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
} Dégradé Linéaire - 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 de 0 à 1, et il définit la transparence de la couleur : 0 indique une transparence totale, 1 indique une couleur pleine (sans transparence).
L'exemple suivant montre un dégradé linéaire qui va de gauche à droite. Il commence complètement transparent, en transition vers une couleur rouge pleine :
Exemple
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
} Fonction CSS repeating-linear-gradient()
La fonction CSS 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%);
}