Dans ce tutoriel, je vais vous présenter comment créer et personnaliser un dégradé (gradient en anglais) en CSS pour votre site internet. Dégradé, Kézako ? L'utilisation de dégradés CSS permet d'afficher des transitions douces entre deux couleurs ou plus. Pratique ! Les dégradés les plus simples sont les linear gradients (dégradé linéaire en français). Voici un dégradé linéaire qui commence au centre (horizontalement) et en haut (verticalement), du bleu vers le blanc. CSS :
HTML :
Résultat :
Rejoindre la communauté de développeurs
Rejoins notre communauté de développeurs pour progresser et t'améliorer
De même, il est possible de fait un dégradé linéaire de gauche à droite. CSS :
Résultat :
Pour finir, il est également possible de faire des dégradés linéaires en diagonale. CSS :
Un autre moyen de faire des gégradés, c'est l'utilisation d'angles. Si vous désirez un meilleur contrôle sur la direction du dégradé, vous pouvez définir un angle pour le spécifier.
Résultat :
Le code à modifier :
Il est naturellement possible d'utiliser plus que deux couleurs. Exemple :
Résultat :
Les indications des couleurs Par défaut, les dégradés passent linéairement d'une couleur à une autre. Il est également possible d'utiliser une indication afin de définir l'emplacement où la couleur médiane sera atteinte. Dans cet exemple, plutôt que d'attendre la moitié de la transition au milieu, je la place à 10% de l'axe.
Résultat :
Rejoindre la communauté de développeurs
Rejoins notre communauté de développeurs pour progresser et t'améliorer
Passer au chapitre suivant :
Partager sur