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

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

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

Список тем

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

id: 37353_radial-gradient-1

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

CSS

.gradient-box {
  width: 250px;
  height: 250px;
  border: 1px solid #ccc;
  /* Используйте функцию радиального градиента */
  background: input1(red, blue);
}

                     .gradient-box {
  width: 250px;
  height: 250px;
  border: 1px solid #ccc;
  /* Используйте функцию радиального градиента */
  background: input1(red, blue);
}

HTML

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

Для создания радиального градиента используется функция `radial-gradient()`. Укажите её в качестве значения свойства `background` или `background-image`. Внутри функции перечислите цвета через запятую.

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

Результат

Сообщения

Выполнить

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

Круглый градиент

id: 37353_radial-gradient-2

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

CSS

.gradient-box {
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
  /* Задайте форму круга */
  background: radial-gradient(input1, yellow, green);
}

                     .gradient-box {
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
  /* Задайте форму круга */
  background: radial-gradient(input1, yellow, green);
}

HTML

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

Чтобы задать форму градиента, укажите ключевое слово `circle` перед списком цветов в функции `radial-gradient()`. Например: `radial-gradient(circle, color1, color2)`.

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

Результат

Сообщения

Выполнить

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

Размер градиента: closest-side

id: 37353_radial-gradient-3

Задайте размер круглого градиента так, чтобы его край касался ближайшей стороны контейнера от центра. Центр градиента смещен (это уже сделано в коде). Градиент должен быть от голубого к темно-синему.

CSS

.gradient-box {
  width: 250px;
  height: 180px;
  border: 1px solid #ccc;
  /* Задайте размер градиента */
  background: radial-gradient(circle input1 at 30% 30%, lightblue, darkblue);
}

                     .gradient-box {
  width: 250px;
  height: 180px;
  border: 1px solid #ccc;
  /* Задайте размер градиента */
  background: radial-gradient(circle input1 at 30% 30%, lightblue, darkblue);
}

HTML

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

Для управления размером градиента используются ключевые слова. Чтобы край градиента касался ближайшей стороны, используйте `closest-side`. Это слово указывается после формы (если она есть) и перед позицией (если она есть). Синтаксис: `radial-gradient(circle size-keyword at position, color1, color2)`.

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

Результат

Сообщения

Выполнить

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

Позиционирование градиента

id: 37353_radial-gradient-4

Сместите центр круглого градиента (размером `closest-side`) в верхний левый угол контейнера. Используйте ключевые слова для позиционирования. Градиент - от оранжевого к фиолетовому.

CSS

.gradient-box {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  /* Добавьте ключевое слово для позиции */
  background: radial-gradient(circle closest-side input1 top left, orange, purple);
}

                     .gradient-box {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  /* Добавьте ключевое слово для позиции */
  background: radial-gradient(circle closest-side input1 top left, orange, purple);
}

HTML

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

Для указания позиции центра градиента используется ключевое слово `at`, за которым следуют значения по оси X и Y (например, `at center`, `at 20% 30%`, `at top left`). Вставьте пропущенное ключевое слово `at` перед указанием позиции `top left`.

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

Результат

Сообщения

Выполнить

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

Размер градиента: farthest-corner

id: 37353_radial-gradient-5

Создайте эллиптический градиент, край которого касается самого дальнего угла контейнера от его центра. Градиент должен переходить от цвета лайма к фиолетовому.

CSS

.gradient-box {
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
  /* Задайте размер градиента до самого дальнего угла */
  background: radial-gradient(input1, lime, purple);
}

                     .gradient-box {
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
  /* Задайте размер градиента до самого дальнего угла */
  background: radial-gradient(input1, lime, purple);
}

HTML

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

Используйте ключевое слово `farthest-corner` для задания размера градиента. Это слово указывается после формы (если она задана) и перед позицией (если она задана). По умолчанию форма эллипса, поэтому ее можно не указывать явно.

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

Результат

Сообщения

Выполнить

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

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

id: 37353_radial-gradient-6

Создайте эффект повторяющихся колец. Градиент должен начинаться с красного цвета, переходить в синий на расстоянии 20px от центра, затем снова в красный на 40px, и так далее. Заполните пропущенное имя функции.

CSS

.gradient-box {
  width: 250px;
  height: 250px;
  border: 1px solid #ccc;
  /* Используйте функцию повторяющегося градиента */
  background: input1(red, blue 20px, red 40px);
}

                     .gradient-box {
  width: 250px;
  height: 250px;
  border: 1px solid #ccc;
  /* Используйте функцию повторяющегося градиента */
  background: input1(red, blue 20px, red 40px);
}

HTML

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

Для создания повторяющихся радиальных градиентов используется функция `repeating-radial-gradient()`. Укажите её вместо обычной `radial-gradient()`. Цветовые остановки с размерами определяют паттерн повторения.

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

Результат

Сообщения

Выполнить

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

Комбинация формы, размера и позиции

id: 37353_radial-gradient-7

Создайте сложный градиент: он должен быть эллиптической формы, его размер должен достигать самого дальнего угла (`farthest-corner`), а центр должен быть смещен на 70% по горизонтали и 30% по вертикали. Используйте три цвета: лайм, циан, маджента. Заполните пропуски для формы и ключевого слова позиции.

CSS

.gradient-box {
  width: 320px;
  height: 220px;
  border: 1px solid #ccc;
  /* Укажите форму и ключевое слово 'at' */
  background: radial-gradient(input1 farthest-corner input2 70% 30%, lime, cyan, magenta);
}

                     .gradient-box {
  width: 320px;
  height: 220px;
  border: 1px solid #ccc;
  /* Укажите форму и ключевое слово 'at' */
  background: radial-gradient(input1 farthest-corner input2 70% 30%, lime, cyan, magenta);
}

HTML

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

В функции `radial-gradient()` параметры указываются в порядке: `форма размер at позиция, цвет1, цвет2, ...`. Вам нужно указать форму (`ellipse` или `circle`) и ключевое слово `at` перед координатами позиции.

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

Результат

Сообщения

Выполнить

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

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

id: 37353_radial-gradient-8

Наложите полупрозрачный радиальный градиент поверх фонового изображения. Градиент должен быть круглым, расположенным по центру, переходить от почти непрозрачного белого в центре (`rgba(255, 255, 255, 0.8)`) к полностью прозрачному по краям (`rgba(0, 0, 0, 0.0)`). Заполните пропуски: имя функции градиента и символ, разделяющий слои фона.

CSS

.image-bg {
  width: 300px;
  height: 200px;
  background-size: cover;
  background-position: center;
  border: 1px solid #ccc;
  /* Наложите градиент поверх изображения */
  background-image: input1(circle at center, rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0.0)) input2 url('https://naytikurs.ru/img/7.png');
}

                     .image-bg {
  width: 300px;
  height: 200px;
  background-size: cover;
  background-position: center;
  border: 1px solid #ccc;
  /* Наложите градиент поверх изображения */
  background-image: input1(circle at center, rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0.0)) input2 url('https://naytikurs.ru/img/7.png');
}

HTML

<div class="image-bg"></div>

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

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

Результат

Сообщения

Выполнить

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