Случайные CSS background фоны: паттерны без повторов
В веб-дизайне фон — это не просто задний план, это мощный инструмент для создания атмосферы и глубины. Идеально повторяющиеся геометрические паттерны, заданные через css background, могут выглядеть скучно и искусственно.
Природа не повторяется точь-в-точь, в ней есть приятная глазу случайность. Как же добиться такого органичного, «нешовного» разнообразия, используя только свойство css background и градиенты? Ответ кроется в умном CSS и математике простых чисел.
Отправная точка: простой, но скучный фон
Представьте набор вертикальных полос разной ширины и цвета на сером фоне. Ниже показана первая наивная попытка — поместить все полосы в один градиент. Подвигайте ползунок, чтобы увидеть как меняется изображение при изменении ширины плитки.
background: linear-gradient(90deg,
#37b 15%, #0cf 0, #0cf 40%, #0aa 0, #0aa 65%, lightgrey 0);
background-size: {{size}}px 100%;
Код, с помощью которого создавался паттерн:
<div class="box"></div>.box {
background: linear-gradient(90deg, #37b 15%, #0cf 0, #0cf 40%, #0aa 0, #0aa 65%, lightgrey 0);
background-size: 80px 100%;
}Но результат будет разочаровывать: узор заметно повторяется каждые 80 пикселей, выдавая искусственное происхождение. Это явная проблема для css background patterns, которые должны выглядеть естественно.
Главный враг: предсказуемость
Предсказуемость — злейший враг естественного дизайна. Идеально повторяющиеся паттерны наш мозг мгновенно распознаёт как искусственные, ведь в природе нет такой цикличности. Это разрушает эстетику, превращая фон в скучный механический орнамент.
CSS не имеет встроенного генератора случайностей.
Когда мы задаём background-size, мы определяем размер «плитки», которая бесшовно повторяется. Чем меньше этот размер или чем он очевиднее, тем более механическим выглядит фон. Наша цель — максимально увеличить интервал визуального повторения, создав иллюзию уникального, нецикличного узора, используя лишь возможности свойства css background и фоновых изображений.
Математический хак: «Принцип Цикады»
Эффективный приём — разбить единый паттерн на несколько слоёв. Каждый слой будет содержать один тип полос и иметь свой собственный background-size. Наложив эти слои друг на друга, мы получим более сложную композицию.
background-color: lightgrey;
background-image:
linear-gradient(90deg, #37b 15px, transparent 0),
linear-gradient(90deg, #0cf 40px, transparent 0),
linear-gradient(90deg, #0aa 30px, transparent 0);
background-size: {{size1}}px 100%, {{size2}}px 100%, {{size3}}px 100%;
<div class="box"></div>.box {
background-color: lightgrey;
background-image: linear-gradient(90deg, #37b 15px, transparent 0), linear-gradient(90deg, #0cf 40px, transparent 0), linear-gradient(90deg, #0aa 30px, transparent 0);
background-size: 80px 100%, 60px 100%, 40px 100%;
}В коде выше показано, что мы не просто разнесли полосы по слоям, но и использовали для ширины полос и размеров фона простые числа (80px, 60px, 40px). Это «Принцип цикады».
Принцип цикады — это хитрый приём, чтобы сделать повторяющиеся элементы (как полоски на фоне сайта) похожими на случайные, хотя на самом деле они таковыми не являются. Секрет в том, что разные слои узора повторяются с разным шагом, и для этого шага выбирают простые числа (например, 7, 13, 23 пикселей). Почему именно простые? Потому что они «не дружат» друг с другом — общий рисунок из всех слоёв полностью повторится только через очень-очень большое расстояние (равное произведению этих чисел). Для экрана это настолько огромная величина, что человек просто не увидит повтора, и фон будет казаться абсолютно уникальным и природным, как листья в лесу.
Как это работает? Математика за кулисами
Почему простые числа? Всё дело в наименьшем общем кратном (НОК). Общая повторяющаяся «плитка» окончательного фона появляется, когда все отдельные слои завершили целое число своих циклов. Размер этой плитки равен НОК значений background-size. Если эти значения являются простыми числами, тогда их НОК — это их произведение.
В нашем примере: 80 × 60 × 40 = 192 000 пикселей. Это больше, чем разрешение любого существующего экрана! Таким образом, на практике фон никогда не повторится для пользователя, создавая идеальную иллюзию случайности. Этот метод применим не только к css background-size, но и к анимациям или чередованию стилей через :nth-child, где также можно использовать простые числа для псевдослучайности.
От скучного паттерна — к живой текстуре
Использование наслоения фонов и простых чисел — гениальный способ обойти ограничения CSS и создавать сложные, визуально «случайные» паттерны, которые оживят дизайн сайта. Это доказывает, что глубокое понимание возможностей css background и нестандартное мышление могут привести к потрясающим результатам без единой строчки JavaScript.
Готовы оживить дизайн своего проекта?
Хотите, чтобы ваш сайт или приложение впечатляли пользователей не только функциональностью, но и безупречным, продуманным до мелочей визуалом? Наша веб-студия специализируется на создании цифровых продуктов с уникальным характером и вниманием к деталям — от элегантных CSS-паттернов до сложных интерактивных интерфейсов. Давайте вместе создадим решение, которое будет выделяться на фоне остальных.
Закажите сайт или приложение у нас — и превратите вашу идею в цифровую реальность высшего класса.