Линейные градиенты (linear-gradient) [Модуль 4: Работа с фоном и визуальными эффектами]: Тренажер CSS

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

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

Список тем

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

id: 37352_lg-01-vertical

Создайте фоновый градиент для блока `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()`. По умолчанию градиент идет сверху вниз. Просто укажите цвета через запятую внутри скобок функции.

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

Результат

Сообщения

Выполнить

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

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

id: 37352_lg-02-horizontal

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

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`, добавив его перед цветами и отделив запятой.

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

Результат

Сообщения

Выполнить

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

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

id: 37352_lg-03-diagonal

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

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` означает направление в правый нижний угол. Укажите это значение как первый аргумент функции.

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

Результат

Сообщения

Выполнить

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

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

id: 37352_lg-04-angle

Задайте направление градиента с помощью угла. Градиент должен идти под углом 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` как первый аргумент функции.

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

Результат

Сообщения

Выполнить

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

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

id: 37352_lg-05-three-colors

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

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()` может принимать более двух цветов. Просто перечислите все нужные цвета через запятую в том порядке, в котором они должны появляться в градиенте.

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

Результат

Сообщения

Выполнить

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

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

id: 37352_lg-06-transparent-start

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

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` как первый цвет.

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

Результат

Сообщения

Выполнить

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

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

id: 37352_lg-07-transparent-mid

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

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`.

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

Результат

Сообщения

Выполнить

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

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

id: 37352_lg-08-repeating

Создайте узор из повторяющихся горизонтальных полос красного и синего цвета. Каждая полоса должна иметь высоту 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 пикселях, и этот паттерн будет повторяться.

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

Результат

Сообщения

Выполнить

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

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

id: 37352_lg-09-over-image

Добавьте полупрозрачный темный градиент поверх фонового изображения, чтобы улучшить читаемость текста (текста в примере нет, но это частый прием). Градиент должен идти сверху вниз, от черного с 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))` перед запятой.

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

Результат

Сообщения

Выполнить

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

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

id: 37352_lg-10-multiple

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

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`.

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

Результат

Сообщения

Выполнить

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