Dégradés CSS
Arrière-plans dégradés
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
image d’arrière-plan : dégradé linéaire (direction, couleur-stop1, couleur-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 :
de haut en bas (par défaut)
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 :
de gauche à droite
Exemple
#diplômé {
image de fond : dégradé linéaire (à droite, rouge, jaune) ;
}
Essayez-le vous-même »
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 :
en haut à gauche en bas à droite
Exemple
#diplômé {
image de fond : dégradé linéaire (en bas à droite, rouge, jaune) ;
}
Essayez-le vous-même »
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
image d’arrière-plan : dégradé linéaire (angle, couleur-stop1, couleur-stop2);
L’exemple suivant montre comment utiliser des angles sur des dégradés linéaires :
180 degrés
Exemple
#diplômé {
image d’arrière-plan : dégradé linéaire (180 degrés, rouge, jaune) ;
}
Essayez-le vous-même »
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
#diplômé {
image de fond : dégradé linéaire (rouge, jaune, vert) ;
}
Essayez-le vous-même »
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 :
Fond arc-en-ciel
Exemple
#diplômé {
image de fond : dégradé linéaire (à droite, rouge, orange, jaune, vert, bleu, indigo, violet) ;
}
Essayez-le vous-même »
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
#diplômé {
image de fond : dégradé linéaire (à droite, rgba (255,0,0,0), rgba (255,0,0,1) );
}
Essayez-le vous-même »
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 :
#diplômé {
image d’arrière-plan : dégradé linéaire répétitif (rouge, jaune 10 %, vert 20 %) );
}
Essayez-le vous-même »
#Dégradés #CSS