css.in.ua
Підтримати

CSS function repeating-conic-gradient()

Опис

Функція repeating-conic-gradient() в CSS використовується для створення повторюваного конічного градієнта, що переходить від одного кольору до іншого у вигляді кругового або еліптичного переходу. Ця функція дозволяє створювати повторювані градієнтні ефекти та налаштовувати вигляд ваших елементів на веб-сайті.

Функція repeating-conic-gradient() працює подібно до функції conic-gradient(), але з можливістю повторюваності градієнта. Вона приймає один або більше аргументів - кольорові зупинки, які визначають точки на конічній формі, де кольори змінюються. Ви можете вказати кольори в різних форматах, таких як ключові слова, шістнадцяткові значення або RGB значення. Наприклад, repeating-conic-gradient(red, blue) створить повторюваний конічний градієнт, що переходить від червоного до синього кольору.

Основна відмінність функції repeating-conic-gradient() від conic-gradient() полягає в тому, що градієнт повторюється безперервно, утворюючи покриваючий ефект. Це дозволяє створювати цікаві та естетичні градієнтні елементи, які повторюються на заданому просторі. Наприклад, ви можете використовувати repeating-conic-gradient() для створення фонового градієнта для великих секцій на вашому веб-сайті або для стилізації кнопок, де градієнт буде повторюватись безперервно.

Ось короткий приклад використання функції repeating-conic-gradient() для створення повторюваного градієнта:

div {
  background: repeating-conic-gradient(red, blue);
}

Цей код застосовує повторюваний конічний градієнт з червоного до синього кольору як фоновий ефект для елементу div.

Нотатка:

to side-or-corner вказує напрямок градієнта. Може бути одним із наступних значень: top, bottom, left, right, top left, top right, bottom left, bottom right.
Порада:

Використовуйте зупинки кольору з відповідними значеннями, щоб керувати точками повторення градієнта.
Порада:

Використовуйте ключові слова to top, to bottom, to left, to right та їх комбінації, щоб вказати напрямок градієнта.
Порада:

Варіюйте кути та кольори, щоб створити цікаві ефекти градієнта.

Синтаксис

repeating-conic-gradient([ <angle> | to <side-or-corner> ,]? <color-stop-list>);
<angle>

Число, що вказує кут градієнта (від 0 до 360 градусів).

to <side-or-corner>

Ключове слово, що вказує напрямок градієнта.

<color-stop-list>

Список зупинок кольору, де кожна зупинка має такий формат: <color> [<position>]. <color> - кольорове значення, <position> - опційне значення, що вказує точку повторення градієнта.

Переглядачі

Переглядач

69

83

12.1

56

79
Переглядач

69

69

83

12.2

Мобільних переглядачів ще не додано.

Приклади


Наведіть курсор на квадрат, щоб побачити зміну градієнта.

Два однакові елементи з різним градієнтом.

Документи

Зв'язок