Функция repeating-linear-gradient в CSS. Полное руководство с примерами

Функция repeating-linear-gradient() в CSS позволяет создавать фоновые изображения с узорами из повторяющихся линий. Это мощный инструмент, который может существенно разнообразить внешний вид веб-страницы, добавив интересные и сложные паттерны. В этой статье мы подробно рассмотрим, как работает repeating-linear-gradient(), и приведём примеры использования этой функции в различных сценариях.

Основы repeating-linear-gradient()

Функция repeating-linear-gradient() создаёт линейный градиент, который повторяется по заданному шаблону. Основной синтаксис функции выглядит следующим образом:

background-image: repeating-linear-gradient(direction, color-stop1, color-stop2, ...);

• direction — направление градиента.
• color-stop — точки остановки цвета, которые определяют, где и как цвета должны переходить друг в друга.

Пример простого повторяющегося градиента

background-image: repeating-linear-gradient(to right, red, yellow 10%, green 20%);

В этом примере создаётся градиент, который повторяется каждые 20% ширины элемента, создавая полосатый узор из красного, жёлтого и зелёного цветов.

Указание направления градиента

Использование ключевых слов

Направление градиента можно задавать с помощью ключевых слов to top, to bottom, to left, to right, а также их комбинаций (to top right, to bottom left и т.д.).

background-image: repeating-linear-gradient(to bottom right, red, yellow 20%, green 40%);

Указание угла

Кроме ключевых слов, можно использовать углы для более точного указания направления градиента. Углы указываются в градусах (deg), где 0deg соответствует движению снизу вверх, 90deg — слева направо, и так далее.

background-image: repeating-linear-gradient(45deg, red, yellow 10%, blue 20%);

Точки остановки цвета

Основные точки остановки

Цвета в градиенте могут располагаться в определённых точках, что позволяет создавать более сложные узоры. По умолчанию цвета равномерно распределяются от начала до конца градиента.

background-image: repeating-linear-gradient(to right, red 0%, yellow 25%, green 50%);

В этом примере жёлтый цвет занимает четверть ширины градиента, а зелёный — половину, создавая повторяющийся узор.

Использование нескольких цветов

Можно использовать больше двух цветов для создания многоцветного повторяющегося градиента.

background-image: repeating-linear-gradient(to right, red, yellow 10%, green 20%, blue 30%);

Примеры использования

Создание полосатого фона

div.stripe-background {
    background-image: repeating-linear-gradient(to right, red, yellow 10%, green 20%);
    height: 200px;
    width: 100%;
}

В этом примере создаётся элемент с высотой 200 пикселей и шириной 100%, который имеет полосатый фон из повторяющегося градиента.

Диагональные полосы

div.diagonal-stripes {
    background-image: repeating-linear-gradient(45deg, #00aaff, #00aaff 15px, #ffaa00 15px, #ffaa00 30px);
    height: 200px;
    width: 100%;
}

В этом примере создаются диагональные полосы, где каждый цвет повторяется каждые 15 пикселей.

Тонкие линии

div.thin-lines {
    background-image: repeating-linear-gradient(to bottom, black, black 2px, white 2px, white 4px);
    height: 200px;
    width: 100%;
}

В этом примере создаётся узор из тонких чёрно-белых линий, которые повторяются каждые 4 пикселя по вертикали.

Заключение

Функция repeating-linear-gradient() в CSS предоставляет мощные возможности для создания сложных и визуально привлекательных узоров. С её помощью можно легко создавать повторяющиеся линейные градиенты, задавать направление и управлять точками остановки цвета. Освоив эту функцию, вы сможете значительно обогатить дизайн своих веб-страниц, добавив им стильных и динамичных элементов.