Радиальные градиенты (radial-gradient): Тренажер CSS

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

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

Список тем

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

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

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`. Внутри функции перечислите цвета через запятую.

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

Результат

Сообщения

Выполнить

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

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

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

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

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

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

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

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

Результат

Сообщения

Выполнить

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

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

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

Сместите центр круглого градиента (размером `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

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

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

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

Результат

Сообщения

Выполнить

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

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

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

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

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

Результат

Сообщения

Выполнить

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

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

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

Создайте сложный градиент: он должен быть эллиптической формы, его размер должен достигать самого дальнего угла (`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` перед координатами позиции.

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

Результат

Сообщения

Выполнить

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

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

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

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

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

Результат

Сообщения

Выполнить

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

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