repeating-linear-gradient VS linear-gradient
Давайте разберёмся, в чём разница между repeating-linear-gradient и linear-gradient на примере решения одной и той же задачи.
Будем делать полосатую заливку для прогрессбаров. Заливку верхнего прогрессбара реализуем повторяющимися градиентами, нижнего — обычными.
Начнём с простейшего варианта — вертикальных полосок. При создании повторяющегося паттерна функция repeating-linear-gradient опирается на колорстопы.
Колорстопы можно задавать как в абсолютных единицах, так и в относительных. Сделаем паттерн шириной 20px. Он будет повторяться, пока не заполнит весь прогрессбар.
Теперь повторим то же самое с помощью linear-gradient. Вначале зададим те же цвета, с теми же колорстопами.
Чтобы получить повторяющийся паттерн с linear-gradient, нужно задать размеры фрагмента с помощью background-size.
Пока отличия небольшие. repeating-linear-gradient — одно фоновое изображение, внутри которого повторяются паттерны. linear-gradient — множество повторяющихся фоновых изображений, внутри которых находится единственный паттерн.
Теперь усложним задачу и сделаем наклонные полоски. Повернём их на угол в 135 градусов.
Для решения задачи на repeating-linear-gradient нужно изменить направление градиента и паттерн автоматически перерисуется. Задача решена.
Попробуем повторить то же самое на linear-gradient. Меняем направление градиента на 135deg. И получаем не то, что нужно.
Давайте разбираться, что не так. Уберём повторение фона и рассмотрим наш повторяющийся паттерн. Очевидно, что его структуру надо изменить.
Главная проблема использования linear-gradient для создания полосатых фонов — ручное создание паттернов. Пересоберём паттерн, возможно это и не так больно.
Вот пересобранный паттерн. В нём больше полосок, они расположены симметрично и наклонены под углом в 45 градусов. В целом, ничего сложного.
Снова разрешаем повторение фона в нижнем прогрессбаре и получаем красивый повторяющийся фон с наклонными полосками. Однако, есть нюанс — толщина полосок не та.
У repeating-linear-gradient размер колорстопов (а значит и толщина полосок) сразу задаётся по направлению градиента. В решении с linear-gradient это не так, ведь с помощью background-size мы задаём размеры квадрата, внутри которого находится паттерн, а не ширину полосок паттерна.
Наверное, можно было бы выводить формулы с учётом теоремы пифагора, но проще поиграться с размером фона у linear-gradient и получить то, что нам нужно.
Давайте ещё немного поменяем угол, например на 120deg. У повторяющегося градиента, ожидаемо, всё хорошо. В решении с обычным градиентом тоже всё должно быть отлично, ведь мы пересобрали паттерн, и он состоит из симметричных полосок.
Ой. Не срослось.
Ничего страшного. Нужно просто пересобрать повторяющийся паттерн таким образом, чтобы полоски давали нужный наклон. Немного несложной математики (нет) и новый паттерн готов. Форма паттерна стала не квадратной, а прямоугольной, структура полосок снова изменилась.
Снова включаем повторение фона и красивый паттерн готов и для linear-gradient.
Посмотрим, как изменять ширину полосатой заливки. В случае с repeating-linear-gradient можно использовать background-size и не забыть отключить повторение фона.
В случае с linear-gradient всё немного сложнее, так как background-size уже использован для управления размерами паттерна.
Чтобы иметь возможность управять шириной полосатой заливки, понадобится ещё один контейнер или псевдоэлемент.
Мы рассмотрели основные отличия повторяющихся и обычных линейных градиентов. Повторяющиеся градиенты отлично подходят для создания полосатых фонов с любым наклоном и толщиной полосок.
Обычными линейными градиентами подобные задачи решаются сложнее, так как нужно вручную просчитывать паттерны. Можете потренироваться и самостоятельно повторить верхний паттерн.
