Разбираемся как используя одни лишь линейные и радиальные градиенты CSS создать клечатый синий паттерн, похожий на светокопировальную бумагу аля Blueprint paper.

Паттерн Blueprint с помощью CSS градиентов - gozman.space

Сегодня мы снова познаем силу великого и могучего CSS 3! Используя один лишь div блок и ни единого изображения, мы с вами сделаем фон в стиле светокопировального листа бумаги или blueprint paper. Для начала давайте разберёмся, что такое светокопировальная бумага и где она применялась, а так же где её можно применить в вебе.

Светокопировальная бумага — что это?

Светокопировальная бумага покрыта с одной из сторон очень тонким слоем светочувствительного вещества. Активно использовалась в 20 веке для копирования в светокопировальных аппаратах. Найти blueprint paper в виде форматной бумаги практически невозможно — она  поставляется исключительно в рулонах.

Со времени изобретения светокопировальной бумаги в 1861 году она притерпела множество изменений. Одно из самых видимых изменения — это цвет. В середине 30х годов 20ого века была наиболее распространена синяя копировальная бумага, которая и закрепилась в нашем представлении. Из-за цвета её и назвали на западе blueprint paper, а в СССР её прозвали просто «синькой».

Blueprint-бумага активно использовалась при создании чертежей, схем и прочих полётов инженерной фантазии того времени. Рисунок наносился белым цветом, который был отчётливо виден на синем фоне. Но где нам может понадобиться фон в стиле blueprint/светокопировальной бумаги в вебе?

На самом деле применений тут можно придумать массу — это может быть страница «в разработке», «ошибка 404»; блок-растяжка с начертаниями устройств для визуализации того, что компания разрабатывает адаптивные сайты; blueprint может отлично вписаться в формат уютного техно-блога или для создании страницы с бета-версией программного обеспечения. Использований масса, делается просто, а смотрится отлично! Давайте приступим!

Создаём сетку

Чтобы создать сетку, нам понадобится два градиента — один с вертикальными линиями и один с горизонтальными. Для примера сделаем сетку толщиной в 1 пиксель, чтобы было похоже на школьную тетрадь в клеточку. Пояснения по коду даны в комментариях.

See the Pen Simple crossing strips by Sam Gozman (@samgozman) on CodePen.

Как видно из примера, градиенты в CSS накладываются друг на друга, что освобождает нас от использования нескольких блоков в html. Понимая как работают градиенты в css, можно рисовать красивые узоры и орнаменты, которые можно использовать не только в качестве фонов, но и в качестве рамок и других декоративных элементов для вашего сайта.

Накладываем три сетки

Теперь нам понадобится наложить 3 сетки. Каждая последующая сетка будет иметь размер больше, чем предыдущая. Для простоты размер фона всегда будет кратный двум, например:

  • 1 сетка: 128px на 128px
  • 2 сетка: 32px на 32px
  • 3 сетка: 16px на 16px

Также для большего соответвтия поставленной цели подберём более подходящие цвета для фона и для сеток. Для более «натурального» вида сетки поверх синего фона сделаем линии с разным уровнем прозрачности (используем rgba либо hsla цвета). Первая сетка будет с прозрачностью 0.8 и толщиной 3px, вторая 0.6 и 2px, и третья с прозрачностью 0.3 и толщиной 1px соответсвенно. Прозрачность, как и цвет с толщиной, вы можете подобрать на ваше личное усмотрение.

See the Pen Simple blueprint pattern by Sam Gozman (@samgozman) on CodePen.

Добавим радиальный градиент

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

Помните, что градиенты накладываются друг на друга в том порядке, в котором они были описаны. То есть первый градиент будет первым, а последний последним — всё просто. Следовательно, чтобы радиальный градиент не перекрыл все наши сетки, его нужно ставить в самый конец.

See the Pen Simple blueprint pattern with radial gradient by Sam Gozman (@samgozman) on CodePen.

Вот, теперь идеально! Используя только градиенты CSS и один div блок мы смогли реализовать паттерн blueprint, который спокойно можно использовать на вашем сайте. Я думаю, что это в очередной раз подтверждает силу и потенциал CSS.

Для большей реалистичности я бы ещё добавил лёгкий эффект зашумленности (noise effect), но как его грамотно реализовать, не прибегая к base64,  используя один лишь css, я не знаю. Если знаете как сделать реалистичный лёгкий эффект зашумленности с помощью градиентов css — пишите в комментарии, дополню статью.

Посмотреть целиком можно на CodePen.

Thursday, 29 December 2016