Dégradés

Fait partie de la section Maîtrise du CSS 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);
}

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)

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>