Les dégradés sont une technique de conception populaire pour créer des transitions fluides entre deux ou plusieurs couleurs. En CSS, vous pouvez appliquer des dégradés aux arrière-plans, aux bordures et au texte. Il existe deux types de dégradés en CSS : linéaires et radiaux.
Dégradé linéaire
Le dégradé linéaire est une transition de couleur qui se produit en ligne droite. Pour créer un dégradé linéaire en CSS, vous devez définir le sens du dégradé (de haut en bas, de gauche à droite, en diagonale, etc.), les couleurs et les positions des couleurs dans le dégradé.
Par exemple, pour créer un dégradé linéaire qui va du rouge au bleu, de haut en bas, le code CSS serait :
Le code ci-dessus définit que le dégradé doit aller "vers le bas" (de haut en bas), et les couleurs "rouge" (rouge) et "bleu" (bleu) sont les couleurs du dégradé.
Vous pouvez également définir des positions pour les dégradés de couleurs. Par exemple, pour créer un dégradé qui va du rouge au bleu, de haut en bas, mais avec une bande jaune au milieu, le code CSS serait :
Le code ci-dessus définit que la couleur "jaune" (jaune) doit être appliquée à la position 50 % du dégradé.
Dégradé radial
Le dégradé radial est une transition de couleur qui se produit dans un cercle. Pour créer un dégradé radial en CSS, vous devez définir le point central du dégradé, la taille du dégradé, ainsi que les couleurs et les positions des couleurs dans le dégradé.
Par exemple, pour créer un dégradé radial qui va du rouge au bleu, avec un point central au milieu de l'élément, le code CSS serait :
Le code ci-dessus définit que le dégradé doit être un "cercle" (cercle) avec un point central au "centre" (milieu) de l'élément, et les couleurs "rouge" (rouge) et "bleu" (bleu) sont les couleurs du dégradé.
Il est aussi possible de définir la taille du dégradé, par exemple pour créer un dégradé radial qui va du rouge au bleu, avec un point central au milieu de l'élément et une taille de 50%, le code CSS serait :
Le code ci-dessus définit que le dégradé doit être un "cercle" (cercle) avec un point central au "centre" (milieu) de l'élément, et la couleur "bleu" (bleu) doit être appliquée à la position 50 % du dégradé.
Conclusion
Les dégradés CSS sont une technique puissante pour créer des transitions fluides entre deux ou plusieurs couleurs. Avec la possibilité d'appliquer des dégradés aux arrière-plans, aux bordures et au texte, vous pouvez créer des designs intéressants et accrocheurs. Expérimentez avec différentes directions, couleurs et positions pour créer des dégradés uniques et personnalisés.
