Линейные градиенты (linear-gradient): Тренажер CSS

Тренажер по CSS для пользователей с начальным уровнем подготовки.

В этой серии упражнений вы попрактикуетесь в использовании функции `linear-gradient()` для создания разнообразных фоновых градиентов. Задания охватывают основы синтаксиса, указание направления градиента (с помощью ключевых слов и углов), добавление нескольких цветовых переходов, использование прозрачности и комбинирование градиентов с фоновыми изображениями, а также создание повторяющихся узоров. Каждое задание потребует от вас заполнить пропущенные части CSS кода, чтобы достичь нужного визуального результата, который будет отображен в окне предпросмотра.

Список тем

Простой вертикальный градиент

Создайте фоновый градиент для блока `div`. Градиент должен плавно переходить от красного цвета сверху к синему цвету снизу. Вам нужно указать правильное имя функции для создания линейного градиента.

CSS

.gradient-box {
  width: 100%;
  height: 300px;
  background: input1(red, blue);
}

                     .gradient-box {
  width: 100%;
  height: 300px;
  background: input1(red, blue);
}

HTML

<div class="gradient-box"></div>

Для создания линейного градиента используется функция `linear-gradient()`. По умолчанию градиент идет сверху вниз. Просто укажите цвета через запятую внутри скобок функции.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Горизонтальный градиент

Измените направление градиента так, чтобы он шел слева направо. Градиент должен переходить от зеленого цвета слева к желтому цвету справа. Заполните пропуск, указав правильное направление.

CSS

.gradient-box {
  width: 100%;
  height: 300px;
  background: linear-gradient(input1, green, yellow);
}

                     .gradient-box {
  width: 100%;
  height: 300px;
  background: linear-gradient(input1, green, yellow);
}

HTML

<div class="gradient-box"></div>

Чтобы изменить направление градиента, первым аргументом функции `linear-gradient()` указывается направление. Для градиента слева направо используйте ключевое слово `to right`, добавив его перед цветами и отделив запятой.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Диагональный градиент

Создайте градиент, идущий из левого верхнего угла в правый нижний. Цвета градиента: от оранжевого к фиолетовому. Укажите правильное направление в коде.

CSS

.gradient-box {
  width: 100%;
  height: 300px;
  background: linear-gradient(input1, orange, purple);
}

                     .gradient-box {
  width: 100%;
  height: 300px;
  background: linear-gradient(input1, orange, purple);
}

HTML

<div class="gradient-box"></div>

Для диагональных градиентов используются комбинации ключевых слов, указывающих на угол назначения. Например, `to bottom right` означает направление в правый нижний угол. Укажите это значение как первый аргумент функции.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Градиент под углом

Задайте направление градиента с помощью угла. Градиент должен идти под углом 45 градусов, переходя от бирюзового (teal) к золотому (gold). Введите значение угла `45deg` в пропуск.

CSS

.gradient-box {
  width: 100%;
  height: 300px;
  background: linear-gradient(input1, teal, gold);
}

                     .gradient-box {
  width: 100%;
  height: 300px;
  background: linear-gradient(input1, teal, gold);
}

HTML

<div class="gradient-box"></div>

Направление градиента можно задавать не только ключевыми словами, но и точным углом. Значение указывается в градусах (`deg`). Угол 0deg соответствует направлению вверх, 90deg - вправо, 180deg - вниз, 270deg - влево. Укажите `45deg` как первый аргумент функции.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Градиент из трех цветов

Создайте вертикальный градиент, состоящий из трех цветов: красного, желтого и синего. Цвета должны плавно переходить друг в друга сверху вниз. Укажите правильное имя функции.

CSS

.gradient-box {
  width: 100%;
  height: 300px;
  background: input1(red, yellow, blue);
}

                     .gradient-box {
  width: 100%;
  height: 300px;
  background: input1(red, yellow, blue);
}

HTML

<div class="gradient-box"></div>

Функция `linear-gradient()` может принимать более двух цветов. Просто перечислите все нужные цвета через запятую в том порядке, в котором они должны появляться в градиенте.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Градиент с прозрачностью (начало)

Создайте вертикальный градиент, который начинается с полностью прозрачного цвета и переходит в синий. Используйте ключевое слово для обозначения прозрачности.

CSS

.gradient-box {
  width: 100%;
  height: 300px;
  background: linear-gradient(input1, blue);
}

                     .gradient-box {
  width: 100%;
  height: 300px;
  background: linear-gradient(input1, blue);
}

HTML

<div class="gradient-box"></div>

Для создания прозрачности в градиенте можно использовать ключевое слово `transparent` или цвета в формате RGBA с альфа-каналом меньше 1. В данном случае используйте `transparent` как первый цвет.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Градиент с прозрачностью (середина)

Создайте градиент, идущий слева направо, от красного к синему, но проходящий через прозрачный цвет в центре. Используйте ключевое слово для прозрачности.

CSS

.gradient-box {
  width: 100%;
  height: 300px;
  background: linear-gradient(to right, red, input1, blue);
}

                     .gradient-box {
  width: 100%;
  height: 300px;
  background: linear-gradient(to right, red, input1, blue);
}

HTML

<div class="gradient-box"></div>

Перечислите цвета через запятую: начальный цвет, `transparent` для середины, и конечный цвет. Не забудьте указать направление `to right`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Повторяющийся градиент

Создайте узор из повторяющихся горизонтальных полос красного и синего цвета. Каждая полоса должна иметь высоту 20 пикселей (это уже указано в коде). Вам нужно использовать специальную функцию для создания повторяющегося градиента.

CSS

.gradient-box {
  width: 100%;
  height: 300px;
  /* Градиент по умолчанию идет сверху вниз */
  background: input1(red, red 10px, blue 10px, blue 20px);
}

                     .gradient-box {
  width: 100%;
  height: 300px;
  /* Градиент по умолчанию идет сверху вниз */
  background: input1(red, red 10px, blue 10px, blue 20px);
}

HTML

<div class="gradient-box"></div>

Для создания повторяющихся градиентов используется функция `repeating-linear-gradient()`. Она работает аналогично `linear-gradient()`, но указанный градиент будет повторяться бесконечно. Чтобы создать четкие полосы, укажите позиции цветовых переходов (color stops). В данном примере `red 0, blue 20px` означает резкий переход от красного к синему на 20 пикселях, и этот паттерн будет повторяться.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Градиент поверх изображения

Добавьте полупрозрачный темный градиент поверх фонового изображения, чтобы улучшить читаемость текста (текста в примере нет, но это частый прием). Градиент должен идти сверху вниз, от черного с 50% прозрачности к черному с 50% прозрачности. Заполните пропуск, добавив функцию градиента перед URL изображения.

CSS

.gradient-box {
  width: 100%;
  height: 300px;
  background: input1, url('https://naytikurs.ru/img/7.png');
  background-size: cover;
  background-position: center;
}

                     .gradient-box {
  width: 100%;
  height: 300px;
  background: input1, url('https://naytikurs.ru/img/7.png');
  background-size: cover;
  background-position: center;
}

HTML

<div class="gradient-box"></div>

В свойстве `background` можно указывать несколько фоновых слоев через запятую. Первый слой будет наверху. Чтобы создать полупрозрачный градиент, используйте цвета в формате RGBA, где последнее значение (альфа-канал) отвечает за прозрачность (0 - полностью прозрачный, 1 - непрозрачный). Например, `rgba(0, 0, 0, 0.5)` - это черный цвет с 50% прозрачности. Вам нужно вставить `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))` перед запятой.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Несколько градиентов

Создайте фон, состоящий из двух градиентов. Первый - вертикальный от красного к прозрачному. Второй - горизонтальный от синего к прозрачному. Они будут наложены друг на друга. Вам нужно вставить символ, разделяющий два фоновых слоя.

CSS

.gradient-box {
  width: 100%;
  height: 300px;
  background: 
    linear-gradient(red, transparent) 
    input1 
    linear-gradient(to right, blue, transparent);
}

                     .gradient-box {
  width: 100%;
  height: 300px;
  background: 
    linear-gradient(red, transparent) 
    input1 
    linear-gradient(to right, blue, transparent);
}

HTML

<div class="gradient-box"></div>

Как и в случае с изображением, несколько градиентов можно наложить друг на друга, перечислив их в свойстве `background` или `background-image` через запятую. Первый указанный градиент будет верхним слоем. Вставьте запятую `,` между двумя функциями `linear-gradient`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку