CSS function repeating-linear-gradient()

Опис

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

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

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

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

div {
  background: repeating-linear-gradient(to right, red, blue);
}

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

Синтаксис

repeating-linear-gradient[<angle> | to <side-or-corner>]? <color-stop>[, <color-stop>]+)

<angle>

Кут градієнта в градусах (deg), радіанах (rad), градах (grad) або тригонометричний термін.

<side-or-corner>

Напрямок градієнта, який може бути одним із значень: to top, to right, to bottom, to left, to top right, to top left, to bottom right, to bottom left.

<color-stop>

Колірна зупинка, що складається з кольору і опційного відсоткового значення, яке вказує, де починається цей колір на градієнті. Наприклад, red, blue 50%, green 20%.

Переглядачі

• Стаціонарні переглядачі
• Мобільні переглядачі

Приклади

• Приклад 1
• Приклад 2