CSS :: Функция repeating-linear-gradient()
Функция repeating-linear-gradient() (от англ. repeating linear gradient – повторяющийся линейный градиент) используется в качестве значения в свойствах background и background-image и добавляет бесконечно повторяющийся линейный градиент к фону изображения.
Синтаксис
repeating-linear-gradient(
[<угол> | to <направление>]?,
<цвет> <стоп-позиция>?,
[<стоп-позиция>?, <цвет> <стоп-позиция>?]#
)
Значения
- <угол> – угол наклона градиентной прямой, проходящей через центр элемента, который отсчитывается относительно вертикальной прямой. При этом значение угла может быть как положительным (отсчет ведется по часовой стрелке), так и отрицательным (отсчет ведется против часовой стрелки). После числового значения сразу и без пробела должно записываться обозначение единицы измерения deg (например, 30deg). Значению 0deg соответствует направление градиента снизу вверх, а значению 90deg - слева направо.
-
<направление> – направление градиента, которое задается комбинацией допустимых ключевых слов и
может использоваться вместо указания значения угла:
- to top – направление градиента снизу вверх (0deg);
- to top right – направление градиента от нижнего левого угла к верхнему правому;
- to right – направление градиента слева направо (90deg);
- to bottom right – направление градиента от верхнего левого угла к нижнему правому;
- to bottom – направление градиента сверху вниз (180deg);
- to bottom left – направление градиента от верхнего правого угла к нижнему левому;
- to left – направление градиента справа налево (270deg);
- to top left – направление градиента от нижнего правого угла к верхнему левому.
- <цвет> – цвет в любой доступной в CSS цветовой модели (смотреть).
- <стоп-позиция> – координаты точки на градиентной прямой в любых доступных в CSS единицах измерения (смотреть), а также процентах, по достижении которой браузер начнет создавать переход от текущего цвета к следующему в списке. При этом, если два соседних цвета в списке идентичны, то их стоп-позиции разрешается указывать через пробел после требуемого цвета. Например, вместо repeating-linear-gradient(0deg, red 10%, red 35%, blue 100%) можно сокращенно записать repeating-linear-gradient(0deg, red 10% 35%, blue 100%). Более того, можно вообще не указывать стоп-позиции или указывать только некоторые из них. В таких случаях браузер будет равномерно распределять позиции всех цветов, попадающих в соответствующие промежутки.
Таким образом, функция repeating-linear-gradient() принимает в качестве аргументов угол или ключевое слово, обязательное стартовое значение цвета и, как минимум, одно обязательное конечное значение цвета. При этом разрешается через запятую указывать несколько цветов, в случае необходимости дополняя их через пробел точками остановки. Например, запись repeating-linear-gradient(30deg, #000000 10%, #ffffff 100%) создает бесконечно повторяющийся линейный градиент цвета от черного к белому с соответствующими точками остановки вдоль градиентной прямой, которая расположена под углом в 30 градусов относительно вертикальной прямой.
Ссылки
Официальный сайт W3C: https://drafts.csswg.org/css-images-3/#repeating-gradients
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/repeating-linear-gradient
Примеры
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> p{ width: 500px; height: 120px; margin: 3em; padding: 10px; } .background_1{ background: repeating-linear-gradient(90deg, #AAA 0%, #fff 25%); } .background_2{ background: repeating-linear-gradient(to top, #AAA 0%, #fff 25%); } .background_3{ background: repeating-linear-gradient(225deg, #AAA 0%, #fff 25%); } .background_4{ background: repeating-linear-gradient(to bottom left, #AAA 0%, #fff 25%); } .background_5{ background: repeating-linear-gradient(to right, red 0% 10%, orange 10% 20%, yellow 20% 30%, green 30% 40%, blue 40% 50%); } </style> </head> <body> <p class="background_1"> Несколько значений указываются через запятую: <br> repeating-linear-gradient(90deg, #AAA 0%, #fff 25%) </p> <p class="background_2"> background: repeating-linear-gradient(to top, #AAA 0%, #fff 25%) </p> <p class="background_3"> background: repeating-linear-gradient(225deg, #AAA 0%, #fff 25%) </p> <p class="background_4"> background: repeating-linear-gradient(to bottom left, #AAA 0%, #fff 25%) </p> <p class="background_5"> Небольшая палитра (не поллитра!). </p> </body> </html>
Пример №1