Градиенты

Часть раздела CSS Mastery путешествия по HTML на Coddy — урок 21 из 43.

Градиенты в CSS позволяют создавать плавные переходы между двумя или более цветами.

Давайте начнем с простого линейного градиента:

/* Создаем линейный градиент сверху вниз */
.gradient-box {
  background: linear-gradient(to bottom, #ff9966, #ff5e62);
}

Это создает градиент, который переходит от оранжевого (#ff9966) сверху к красноватому цвету (#ff5e62) снизу.

Вы также можете указать направление и использовать несколько цветов, как в следующем примере:

/* Создание линейного градиента слева направо */
.gradient-box {
  background: linear-gradient(to right, red, orange, yellow, green);
}

Проверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.

Проверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.

Задание

Легко

Создайте CSS-правило для класса с именем sunset-gradient, которое применяет фон в виде линейного градиента. Градиент должен:

Идти сверху вниз
Начинаться с цвета #FFD700 (gold)
Переходить в #FF4500 (orangered)

Шпаргалка

CSS-градиенты создают плавные переходы между цветами с помощью функции linear-gradient():

/* Базовый линейный градиент сверху вниз */
.gradient-box {
  background: linear-gradient(to bottom, #ff9966, #ff5e62);
}

/* Линейный градиент с направлением и несколькими цветами */
.gradient-box {
  background: linear-gradient(to right, red, orange, yellow, green);
}

Общие направления включают to bottom, to right, to left и to top.

Попробуйте сами

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

Проверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.