Повторюваний радіальний градієнт у CSS
Вивчаємо функцію repeating-radial-gradient() та створюємо повторювані радіальні градієнти, кільця й кругові візерунки в CSS.
Що таке repeating-radial-gradient()
Функція repeating-radial-gradient() створює радіальний градієнт, який повторюється від центру до країв елемента. На відміну від radial-gradient(), після завершення першого кольорового циклу градієнт продовжує повторюватися.
За допомогою repeating-radial-gradient() можна створювати концентричні кола, кільця та різні декоративні фонові візерунки.
Базовий синтаксис
.element { background-image: repeating-radial-gradient( red, blue 50px ); },У цьому прикладі градієнт починається з червоного кольору в центрі та поступово переходить у синій. Після завершення заданого відрізка градієнт повторюється.
Створення концентричних кілець
Якщо задати однакові позиції для початку та кінця кольорових ділянок, можна створити чіткі концентричні кільця.
.element { background-image: repeating-radial-gradient( red 0, red 20px, blue 20px, blue 40px ); },Кругла та еліптична форма
За допомогою ключових слів circle та ellipse можна явно вказати форму радіального градієнта.
.circle {
background-image: repeating-radial-gradient(
circle,
red 0,
red 20px,
blue 20px,
blue 40px
);
}
.ellipse {
background-image: repeating-radial-gradient(
ellipse,
red 0,
red 20px,
blue 20px,
blue 40px
);
}, Позиція градієнта
Центр повторюваного радіального градієнта можна перемістити за допомогою ключового слова at.
.element {
background-image: repeating-radial-gradient(
circle at top left,
red 0,
red 20px,
blue 20px,
blue 40px
);
}, Точне положення центру
Позицію центру можна задати у відсотках або інших одиницях CSS.
.element {
background-image: repeating-radial-gradient(
circle at 30% 40%,
red 0,
red 20px,
blue 20px,
blue 40px
);
}, Кілька кольорів
У повторюваному радіальному градієнті можна використовувати три і більше кольорів. Після завершення останньої кольорової ділянки весь шаблон повторюється.
.element {
background-image: repeating-radial-gradient(
red 0,
red 20px,
yellow 20px,
yellow 40px,
blue 40px,
blue 60px
);
}, Практичне завдання
- Створіть блок шириною 300px і висотою 300px.
- Створіть повторюваний радіальний градієнт із червоного та синього кольорів.
- Створіть концентричні червоні та сині кільця.
- Зробіть градієнт круглої форми за допомогою circle.
- Перемістіть центр градієнта у верхній лівий кут.
- Розташуйте центр градієнта на 30% по горизонталі та 40% по вертикалі.
- Створіть повторюваний градієнт із трьох кольорів: red, yellow та blue.
<!--Початковий код -- >
<div class="box"></div>💡 Показати підказку
Для повторюваного радіального градієнта використовуйте repeating-radial-gradient(). Для чітких кілець задавайте кожен колір на двох сусідніх позиціях, наприклад red 0, red 20px.
✅ Показати відповідь
.box { width: 300px; height: 300px; background-image: repeating-radial-gradient( circle at 30% 40%, red 0, red 20px, yellow 20px, yellow 40px, blue 40px, blue 60px ); }