Dégradés

Fait partie de la section CSS Mastery du Journey HTML de Coddy — leçon 21 sur 43.

Les dégradés en CSS vous permettent de créer des transitions fluides entre deux ou plusieurs couleurs.

Commençons par un dégradé linéaire simple :

/* Créer un dégradé linéaire de haut en bas */
.gradient-box {
  background: linear-gradient(to bottom, #ff9966, #ff5e62);
}

Cela crée un dégradé qui passe de l'orange (#ff9966) en haut à une couleur rougeâtre (#ff5e62) en bas.

Vous pouvez également spécifier la direction et utiliser plusieurs couleurs comme dans l'exemple suivant :

/* Créer un dégradé linéaire de la gauche vers la droite */
.gradient-box {
  background: linear-gradient(to right, red, orange, yellow, green);
}

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.

Défi

Facile

Créez une règle CSS pour une classe nommée sunset-gradient qui applique un arrière-plan en dégradé linéaire. Le dégradé doit :

Aller du haut vers le bas
Commencer par la couleur #FFD700 (gold)
Passer à la couleur #FF4500 (orangered)

Aide-mémoire

Les dégradés CSS créent des transitions fluides entre les couleurs en utilisant la fonction linear-gradient() :

/* Dégradé linéaire de base du haut vers le bas */
.gradient-box {
  background: linear-gradient(to bottom, #ff9966, #ff5e62);
}

/* Dégradé linéaire avec direction et plusieurs couleurs */
.gradient-box {
  background: linear-gradient(to right, red, orange, yellow, green);
}

Les directions courantes incluent to bottom, to right, to left et to top.

Essayez vous-même

<!DOCTYPE html>
<html>
<head>
  <style>
    .sunset-gradient {
      border: 3px solid black;
      height: 300px;
      width: 100%;
       /* Write your CSS rule here */
       
       
    }
  </style>
</head>
<body>
  <div class="sunset-gradient"></div>
</body>
</html>

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.