Главная
CSS
Магия repeating-linear-gradient CSS: полосы без лишних картинок

Магия repeating-linear-gradient CSS: полосы без лишних картинок

Оглавление

Почему старые методы нас больше не устраивают
Repeating-linear-gradient: одна строка кода вместо головной боли
Как это работает: разбираем волшебство по полочкам
Итог

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

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

Почувствуйте силу кода в реальном времени! Подвигайте ползунки в реальном примере ниже — и прямо на ваших глазах обычный блок превратится в узорчатый холст. Увидите, как мгновенно меняются угол, цвета и ритм полос, когда вы управляете параметрами repeating-linear-gradient.

background:
repeating-linear-gradient(
{{deg}}deg,
{{clr1}}, {{clr1}} {{width1}}px,
{{clr2}} 0, {{clr2}} {{width2}}px);

Угол Цвет 1 Ширина полосы 1 Цвет 2 Ширина полосы 1

Почему старые методы нас больше не устраивают

Ранние методы создания полос в CSS с помощью обычного linear-gradient и background-size были остроумными, но ограниченными. Они требовали:

Сложных расчётов: Для диагональных полос нужно было высчитывать размер фона по теореме Пифагора, чтобы получить нужную толщину.
Жёсткой структуры: Изменить угол полос (например, с 45° на 30°) означало полностью переписывать градиент, создавая новый, сложный тайл.
Громоздкого кода: Для двух цветов приходилось прописывать четыре или шесть цветовых остановок. Это было негибко и неудобно для поддержки.

Эти методы хорошо работали для горизонтальных и вертикальных полос, но становились настоящим испытанием для диагональных и произвольных узоров.

.diagonal-stripes-old {
    /* Создаём градиентную плитку с четырьмя полосами под углом 45° */
    background: linear-gradient(45deg,
        #8c7 25%,  /* 1. Начало первой полосы цвета #8c7 */
        #46a 0,    /* 2. Конец первой, начало второй (#46a) на той же позиции */
        #46a 50%,  /* 3. Конец второй полосы (#46a) */
        #8c7 0,    /* 4. Начало третьей (#8c7) */
        #8c7 75%,  /* 5. Конец третьей */
        #46a 0     /* 6. Начало четвёртой (#46a) */
    );
    /* Критически важный расчёт размера плитки для получения нужной толщины полосы.
       Для полосы визуальной шириной 15px нужна плитка размером ≈ 42.426px */
    background-size: 42.426px 42.426px; /* 15px * 2 * √2 ≈ 42.426px */
}

Repeating-linear-gradient: одна строка кода вместо головной боли

Функция repeating-linear-gradient создана специально для устранения этих проблем. Её принцип прост: она берёт заданный шаблон градиента и повторяет его бесконечно, заполняя всю доступную область. Вам больше не нужно думать о создании бесшовной плитки вручную — браузер делает это за вас автоматически.

Вот как создаются диагональные полосы в одну строку:

.item{
    background: repeating-linear-gradient(30deg, #9fc9ff, #9fc9ff 20px, #437eb3 0, #437eb3 40px);
}

Эта строка кода мгновенно генерирует идеальные 30-градусные полосы шириной 20px и 40px, которые бесшовно повторяются по всему элементу. Измените угол на 75deg или 45deg — и паттерн останется безупречным.

Как это работает: разбираем волшебство по полочкам

Давайте «разберём» синтаксис repeating-linear-gradient:

Угол (30deg): Задаёт направление градиента (и полос). Используйте to top, to right, 90deg или любое другое значение в градусах.

Цветовые остановки (#9fc9ff, #9fc9ff 20px, #437eb3 0, #437eb3 40px): Это сердце паттерна.

Начинаем с цвета #9fc9ff на позиции 0.
Доводим его до позиции 20px — это определяет ширину первой полосы.
Следующий цвет #437eb3 начинается сразу с позиции 0 (благодаря 0), что создаёт резкий переход.
Вторая полоса заканчивается на позиции 40px. Разница между 40px и 20px даёт ширину второй полосы (20px).

Браузер берёт этот отрезок от 0 до 40px и повторяет его бесконечно вдоль линии градиента. Главное преимущество: все единицы измерения (px, %, em) указываются вдоль линии градиента, поэтому толщина полосы всегда соответствует заданному значению. Никаких корней из двух!

Практические примеры

1. Горизонтальные полосы

.horizontal {
    background: repeating-linear-gradient(to bottom, #eee, #eee 10px, #fff 0, #fff 20px);
}

2. Вертикальные полосы

.vertical {
    background: repeating-linear-gradient(to right, #333 0, #333 2px, transparent 0, transparent 20px);
}

3. Множественные цвета (радужные полосы)

.rainbow {
    background: repeating-linear-gradient(45deg,
        red 0px, red 30px,
        orange 30px, orange 60px,
        yellow 60px, yellow 90px,
        green 90px, green 120px,
        blue 120px, blue 150px,
        indigo 150px, indigo 180px,
        violet 180px, violet 210px);
}

4. Анимация полос

<div class="stripes-container">
  <div class="running-stripes"></div>
</div>

.stripes-container {
  width: 250px;
  height: 250px;
  border: 1px solid #eee;
  overflow: hidden;
  position: relative;
}

.running-stripes {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    45deg,
    #ff6b6b,
    #ff6b6b 10px,
    #4ecdc4 0,
    #4ecdc4 20px,
    #ffd166 0,
    #ffd166 30px,
    #06d6a0 0,
    #06d6a0 40px
  );
  background-size: 100px 100px;
  animation: runStripes 2s linear infinite;
}

@keyframes runStripes {
  0% { background-position: 0 0; }
  100% { background-position: 100px 100px; }
}

Итог

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

Пора перестать довольствоваться шаблонными решениями. Хотите, чтобы ваш сайт использовал всю мощь современных технологий, таких как repeating-linear-gradient CSS, для создания уникального и запоминающегося дизайна? Наша веб-студия превращает передовые приёмы вёрстки в конкурентные преимущества для вашего бизнеса. Закажите разработку сайта или веб-приложения у нас — и получите не просто цифровую витрину, а технически совершенный продукт, где каждая деталь работает на ваш имидж и удобство пользователей. Давайте создадим что-то выдающееся вместе!

Теги: background CSS