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.
Загальний опис
автор: NagarD
- Порада
-
Використовуйте зупинки кольору з відповідними значеннями, щоб керувати точками повторення градієнта.
автор: Bond - Порада
-
Використовуйте ключові слова
автор: Bondto top,to bottom,to left,to rightта їх комбінації, щоб вказати напрямок градієнта. - Порада
-
Варіюйте кути та кольори, щоб створити цікаві ефекти градієнта.
автор: Bond - Нотатка
-
автор: Bondto side-or-cornerвказує напрямок градієнта. Може бути одним із наступних значень:top,bottom,left,right,top left,top right,bottom left,bottom right.
Синтаксис
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> -
Список зупинок кольору, де кожна зупинка має такий формат:
автор: Bond<color> [<position>]. <color>- кольорове значення,<position>- опційне значення, що вказує точку повторення градієнта.
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 69 | 83 | 12.1 | 56 | 79 | — |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 69 | 69 | 83 | 12.2 |
Приклади
+ запропонувати свій приклад у пісочниці
Наведіть курсор на квадрат, щоб побачити зміну градієнта.
HTML
<div id="description">
<h2>Приклад 1</h2>
<p>Наведіть курсор на квадрат, щоб побачити зміну градієнта.</p>
</div>
<div id="result">
<div class="square"></div>
</div>CSS
#description {
font-style: italic;
text-align: center;
line-height: 1.5;
margin-bottom: 50px;
padding: 12px 16px;
background-color: #f7f7f7;
border: 1px solid #ccc;
}
#result {
display: flex;
justify-content: center;
align-items: center;
}
.square {
width: 200px;
height: 200px;
background: radial-gradient(red 33%, yellow 33% 66%, blue 66%);
transition: background 0.5s ease;
}
.square:hover {
background: radial-gradient(green 77%, red 20% 15%, yellow 33%);
}Два однакові елементи з різним градієнтом.
HTML
<div id="description">
<h2>Приклад 2</h2>
<p>Два однакові елементи з різним градієнтом.</p>
</div>
<div id="result">
<div class="square"></div>
<div class="square gradient"></div>
</div>CSS
#description {
font-style: italic;
text-align: center;
line-height: 1.5;
margin-bottom: 50px;
padding: 12px 16px;
background-color: #f7f7f7;
border: 1px solid #ccc;
}
#result {
display: flex;
justify-content: center;
align-items: center;
}
.square {
width: 200px;
height: 200px;
background: repeating-conic-gradient( red 0%, yellow 15%, red 33%);
margin-right: 20px;
}
.square.gradient {
background: repeating-conic-gradient( from 45deg at 10% 50%, brown 0deg 10deg, darkgoldenrod 10deg 20deg, chocolate 20deg 30deg);
}Перша пара — головна пастка: repeating-conic-gradient(red, blue) і звичайний conic-gradient(red, blue) дають однакову картинку, бо цикл дорівнює позиції останньої зупинки. Досить поставити її раніше — і повторення з'являється. Далі — подвійні позиції з різкими межами (зірка, «пиріг», сектор із from і at), відсотки замість градусів, та сама функція як плитка через background-size, як маска й як рамка, і наостанок сектор на 1deg, де видно сходинки.
HTML
<p class="head">⚠️ Без явних позицій цикл дорівнює 360deg — тобто повторювати
нема чого. Ці дві картинки збігаються піксель у піксель:</p>
<div class="grid">
<figure><div class="disc g1"></div><figcaption>repeating-conic-gradient(red, blue)</figcaption></figure>
<figure><div class="disc g2"></div><figcaption>conic-gradient(red, blue)</figcaption></figure>
<figure><div class="disc g3"></div><figcaption>… blue 30deg — 12 обертів</figcaption></figure>
<figure><div class="disc g4"></div><figcaption>… blue 90deg — 4 оберти</figcaption></figure>
</div>
<p class="head">Подвійна позиція дає різкі межі — звідси зірка, «пиріг» і промені:</p>
<div class="grid">
<figure><div class="disc s1"></div><figcaption>red 0 15deg, blue 0 30deg</figcaption></figure>
<figure><div class="disc s2"></div><figcaption>три кольори по 20deg</figcaption></figure>
<figure><div class="disc s3"></div><figcaption>from 45deg — те саме, зсунуте</figcaption></figure>
<figure><div class="disc s4"></div><figcaption>at 20% 80% — промені з кута</figcaption></figure>
</div>
<p class="head">Позиції можна писати й у відсотках від повного кола: 25% = 90deg:</p>
<div class="grid">
<figure><div class="disc pc1"></div><figcaption>red 0% 12.5%, blue 0 25%</figcaption></figure>
<figure><div class="disc pc2"></div><figcaption>те саме в градусах: 0 45deg, 0 90deg</figcaption></figure>
</div>
<p class="head">Це зображення, а не колір: його можна тайлити, класти в маску
й у рамку:</p>
<div class="grid">
<figure><div class="tile t1"></div><figcaption>background-size: 40px 40px</figcaption></figure>
<figure><div class="tile t2">маска</div><figcaption>mask-image з тим самим градієнтом</figcaption></figure>
<figure><div class="tile t3">рамка</div><figcaption>border-image-source</figcaption></figure>
</div>
<p class="head">⚠️ Сектор в один градус — і замість смуг видно сходинки й муар:</p>
<div class="grid">
<figure><div class="disc f1"></div><figcaption>по 1deg</figcaption></figure>
<figure><div class="disc f2"></div><figcaption>по 5deg</figcaption></figure>
</div>CSS
.head {
margin: 20px 0 8px;
max-width: 620px;
color: #5a6472;
font-size: .9em;
}
.grid {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
figure {
margin: 0;
width: 150px;
}
figcaption {
margin-top: 6px;
color: #5a6472;
font: 12px/1.35 ui-monospace, monospace;
}
.disc {
width: 150px;
height: 150px;
border-radius: 50%;
}
.g1 { background: repeating-conic-gradient(#c0392b, #2f6fd0); }
.g2 { background: conic-gradient(#c0392b, #2f6fd0); }
.g3 { background: repeating-conic-gradient(#c0392b, #2f6fd0 30deg); }
.g4 { background: repeating-conic-gradient(#c0392b, #2f6fd0 90deg); }
.s1 { background: repeating-conic-gradient(#c0392b 0 15deg, #2f6fd0 0 30deg); }
.s2 { background: repeating-conic-gradient(#c0392b 0 20deg, #f2b134 0 40deg, #2f6fd0 0 60deg); }
.s3 { background: repeating-conic-gradient(from 45deg, #c0392b 0 20deg, #f2b134 0 40deg, #2f6fd0 0 60deg); }
.s4 { background: repeating-conic-gradient(from 0deg at 20% 80%, #3a9a4f 0 10deg, #f6f9ff 0 20deg); }
.pc1 { background: repeating-conic-gradient(#c0392b 0% 12.5%, #2f6fd0 0 25%); }
.pc2 { background: repeating-conic-gradient(#c0392b 0 45deg, #2f6fd0 0 90deg); }
.tile {
display: flex;
align-items: center;
justify-content: center;
width: 150px;
height: 100px;
color: #fff;
font: 700 14px/1 ui-monospace, monospace;
text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.t1 {
background-image: repeating-conic-gradient(#2f6fd0 0 25%, #f6f9ff 0 50%);
background-size: 40px 40px;
}
.t2 {
background: #3a9a4f;
mask-image: repeating-conic-gradient(#000 0 20deg, transparent 0 40deg);
}
.t3 {
border: 14px solid transparent;
border-image-source: repeating-conic-gradient(#c0392b 0 20deg, #f2b134 0 40deg);
border-image-slice: 30;
background: #f6f9ff;
color: #333;
text-shadow: none;
}
.f1 { background: repeating-conic-gradient(#c0392b 0 1deg, #f6f9ff 0 2deg); }
.f2 { background: repeating-conic-gradient(#c0392b 0 5deg, #f6f9ff 0 10deg); }Коментарі
Коментарів ще немає — будьте першим!