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 douces entre deux couleurs ou plus.

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

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

Ce dégradé passe de l’orange (#ff9966) en haut à une couleur rougeâtre (#ff5e62) en bas.

La direction est facultative. Si tu ne la précises pas, linear-gradient() va du haut vers le bas, comme to bottom :

background: linear-gradient(#ff9966, #ff5e62); /* de haut en bas */

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

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

Défi

Facile

Crée 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 (or)
Passer à #FF4500 (rouge orangé)

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>