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.

автор: Bond

Порада: Використовуйте зупинки кольору з відповідними значеннями, щоб керувати точками повторення градієнта.
автор: Bond
Порада: Використовуйте ключові слова to top, to bottom, to left, to right та їх комбінації, щоб вказати напрямок градієнта.
автор: Bond
Порада: Варіюйте кути та кольори, щоб створити цікаві ефекти градієнта.
автор: Bond
Нотатка: to side-or-corner вказує напрямок градієнта. Може бути одним із наступних значень: top, bottom, left, right, top left, top right, bottom left, bottom right.
автор: Bond

Синтаксис

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

Функція repeating-conic-gradient може отримувати 3 значень:

<angle>

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

автор: Bond

to <side-or-corner>

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

автор: Bond

<color-stop-list>

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

автор: Bond