Hobo
Вы сидите и думаете: «Мой сайт слишком серьёзен. Слишком… правилен. Людям не хватает лёгкости, игривости, той самой ноты безрассудства!» И тут вас осеняет. Горошек. Да-да, те самые точки, которые кричат: «Здесь живёт душа!» или, как минимум, «Дизайнер вдохновлялся платьем 50-х».
Но как, чёрт возьми, превратить унылый однотонный фон в этот праздник непослушания? Добро пожаловать в ад выбора, где каждый вариант — это отдельная история о вашем терпении.
Вариант 1: Градиентный Оверкилл, или «Я умный»
Вы не просто хотите горошек. Вы хотите, чтобы он был математически безупречным и рождённым из чистого CSS-кода. Вы берёте не один, а целых два радиальных градиента, смещаете их на хитрые 20 пикселей и с гордостью взираете на результат.
«Это не просто фон, это алгоритмический узор», — говорите вы. Браузер плачет, пытаясь это отрисовать на слабом ноутбуке 2012 года, но вы счастливы. Вы победили графический редактор силой разума. До тех пор, пока не попробуете изменить размер горошин и не понимаете, что запутались в собственных расчётах.
|
1 2 3 4 5 6 7 |
.author-section { background: #ddf5fb; background-image: radial-gradient(#a0d8ef 15%, transparent 16%), radial-gradient(#a0d8ef 15%, transparent 16%); background-size: 40px 40px; background-position: 0 0, 20px 20px; } |
Вариант 2: Градиент для Скромных, или «Давайте без выпендрёжа»
«Зачем два слоя, если можно один?» — философски размышляете вы и выбираете упрощённую версию. Один градиент, один размер. Быстро, чисто, элегантно. Горошек получается… приемлемым. Не вызывающим восторга, но и не позорным.
Идеальный вариант для тех, кто хочет точек, но не хочет объяснять коллегам на совещании, почему background-position имеет значение 20px 20px. Скучно? Возможно. Зато вы не сойдёте с ума.
|
1 2 3 4 5 |
.author-section { background-color: #ddf5fb; background-image: radial-gradient(#a0d8ef 2px, transparent 3px); background-size: 30px 30px; } |
Вариант 3: Настройка Под Микроскопом, или «Перфекционизм — это ад»
Это путь для истинных гурманов страдания. Вы начинаете с цвета, потом подбираете идеальный радиус «размытия» между точкой и прозрачностью, затем играете с размерами сетки. «А что если добавить второй слой со смещением? О, да так же плотнее!» — восклицаете вы в 3 часа ночи.
Через шесть чашек кофе вы создаёте шедевр, который выглядит идеально на вашем мониторе. На телефоне тёти Глаши из Саратова он превращается в серую размытую рябь. Но вы-то знаете, что он идеален.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.author-section { /* Цвет фона */ background-color: #ddf5fb; /* Горошек */ background-image: radial-gradient(#7ec8e3 20%, transparent 21%); /* Размер узора */ background-size: 50px 50px; /* Положение */ background-position: 0 0; /* Можно добавить второй слой для смещения */ background-image: radial-gradient(#7ec8e3 20%, transparent 21%), radial-gradient(#7ec8e3 20%, transparent 21%); background-position: 0 0, 25px 25px; background-size: 50px 50px; } |
Чтобы посмотреть, как выглядит работа этого кода, перейдите по ссылке — https://codepen.io/HoboBo/pen/bNpXZdV.
Вариант 4: Путь Отчаяния, или «Да пошло оно всё, грузи картинку»
CSS-градиенты? Смещения? Вы смотрите на это всё, потом на готовую PNG-шку с безупречным горошком, скачанную за 5 секунд. «Зачем изобретать велосипед?» — спрашиваете вы у своего отражения в чёрном экране монитора. Минута — и фон готов.
Он везде выглядит одинаково. Он предсказуем. Он… банален. Вы чувствуете легкий стыд, как будто сдали экзамен шпаргалкой. Но сайт работает быстро, а горошек — ровный. Иногда прагматизм побеждает нарциссизм дизайнера. Иногда.
|
1 2 3 4 5 6 |
.author-section { background-color: #ddf5fb; background-image: url('путь/к/вашему/изображению-горошек.png'); background-repeat: repeat; background-size: 40px 40px; /* или auto */ } |
Настройка параметров:
- Цвет горошка: Измените #a0d8ef на любой нужный цвет.
- Размер горошка: Измените процент в radial-gradient (20%, 15% и т.д.).
- Плотность узора: Измените background-size (меньше значение = плотнее горошек).
- Прозрачность: Отрегулируйте последний параметр в radial-gradient.
Итог: Хотите горошек? Выбирайте свой яд. Хотите почувствовать себя волшебником — мучайтесь с градиентами. Хотите просто точки — качайте картинку. Главное, чтобы в конце этого пути вы всё ещё любили эти чёртовы точки. И чтобы ваш контент на их фоне можно было прочитать. А то получится праздник непослушания, который кричит слишком громко.
