Gradienty

Część sekcji Mistrzowskie opanowanie CSS ścieżki HTML w Coddy. Lekcja 21 z 43.

Gradienty w CSS pozwalają tworzyć płynne przejścia między dwoma lub większą liczbą kolorów.

Zacznijmy od prostego gradientu liniowego:

/* Utwórz gradient liniowy od góry do dołu */
.gradient-box {
  background: linear-gradient(to bottom, #ff9966, #ff5e62);
}

Tworzy to gradient przechodzący od pomarańczowego koloru (#ff9966) u góry do czerwonawego koloru (#ff5e62) u dołu.

Możesz także określić kierunek i użyć wielu kolorów, jak w poniższym przykładzie:

/* Utwórz gradient liniowy od lewej do prawej */
.gradient-box {
  background: linear-gradient(to right, red, orange, yellow, green);
}

Wyzwanie

Łatwy

Utwórz regułę CSS dla klasy o nazwie sunset-gradient, która stosuje tło z gradientem liniowym. Gradient powinien:

Przebiegać od góry do dołu
Zaczynać się od koloru #FFD700 (złoty)
Przechodzić w #FF4500 (czerwień pomarańczowa)

Spróbuj swoich sił

<!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>