CSS function conic-gradient

Опис

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

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

Поєднуючи кольорові зупинки, ви можете створювати захоплюючі градієнтні ефекти з круговим переходом кольорів. Ви маєте повний контроль над точками зупинок, можливістю задати кут початку і закінчення градієнта, а також використовувати додаткові параметри, такі як прозорість і режим змішування.

Приклад використання:

Допустимо, ви хочете стилізувати елемент div на своєму веб-сайті за допомогою конічного градієнта, щоб надати йому цікавий вигляд. Ви можете використати такий CSS-код:

.example {
  width: 200px;
  height: 200px;
  background: conic-gradient(green, yellow, orange, red);
}

У цьому прикладі відтінки зеленого починаються з верхньої точки елемента та плавно переходять до червоного, описуючи коловий перехід на фоні div. Результат буде виглядати як захоплюючий градієнт, що привертає увагу до цього елементу на сторінці.

автор: Bond

Порада: Використовуйте позитивні значення для angular-arg, щоб обертати градієнт у годинниковому напрямку, та негативні значення, щоб обертати градієнт проти годинникової стрілки.
автор: Bond
Порада: Експериментуйте з різними кольорами та їх розташуванням, щоб створити унікальні та цікаві візуальні ефекти.
автор: Bond
Нотатка: З використанням conic-gradient(), ви отримуєте можливість створювати видовищні та ефективні градієнтні елементи, які збагачують вигляд вашого веб-сайту та підкреслюють його дизайн.
автор: Bond

Синтаксис

conic-gradient([ <angular-arg>, ]? <color-stop-list>)

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

<angular-arg>

Кут у градусах, радіанах або повних обертах. Наприклад, 45deg, 0.5turn, -90deg.

автор: Bond

<color-stop-list>

Колір в будь-якому прийнятному форматі (назва кольору, RGB, HSL тощо) та позиція колірної зупинки у градієнті. Ви можете використовувати відсотки (%) або числові значення. Наприклад, 10%, 0.25.

автор: Bond