Сложные фоновые узоры

Оцените материал
(0 голосов)

Проблема

В предыдущем разделе мы узнали, как с помощью градиентов CSS создавать всевозможные полосы. Однако полосами фоновые узоры, да и любые другие геометрические рисунки, не ограничиваются. Часто у нас возникает необходимость создавать другие типы узоров: сетки, узор в горошек, шахматный узор и многие другие.
К счастью, градиенты CSS могут помочь и со многими из этих задач. С помощью градиентов CSS можно создать почти любой геометрический узор, хотя это и не всегда практично: если мы не будем соблюдать осторожность, то на руках у нас окажется безумный объем не поддающегося сопровождению кода. Создание узоров средствами CSS — это также одна из ситуаций, когда использование препроцессора CSS, например Sass оправданно. Это позволяет сократить количество повторений, так как чем сложнее становятся узоры, тем менее соответствует принципам DRY описывающий их CSS-код. В этом секрете мы сосредоточимся на создании самых простых и наиболее востребованных узоров.


Сетки

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


background: white;
background-image: linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 0), linear-gradient(rgba(200,0,0,.5) 50%, transparent 0);
background-size: 30px 30px;

В некоторых случаях мы хотим иметь возможность регулировать размер ячеек сетки, не меняя при этом ширину линий, например, для создания линий, служащих в качестве направляющих. Это прекрасный повод использовать абсолютные значения вместо процентных в качестве границ перехода цвета:
background: #58a;
background-image: linear-gradient(white 1px, transparent 0), linear-gradient(90deg, white 1px, transparent 0);
background-size: 30px 30px;

Результат  представляетсобой сетку из белых линий шириной  1px , где ширина ячейки равна  30px . Так же как в секрете «Гибкие нежные полосы», базовый цвет служит резервным вариантом для случаев, когда браузер не поддерживает градиенты CSS.
Эта сетка — отличный пример узора, который может быть создан с помощью достаточно хорошо поддающегося сопровождению CSS-кода (хотя и не полностью соответствующего принципам DRY):
‰ если нам понадобится поменять размер ячейки, толщину линий или любой из цветов, догадаться, какое значение требуется для этого отредактировать, будет довольно просто;
‰ для внесения подобных изменений не приходится делать огромное количество правок; нужно исправить лишь одно или два значения;
‰ код к тому же относительно короткий, всего лишь четыре строки объемом 170 байт. SVG-код не мог бы быть короче.


Мы можем также наложить друг на друга две сетки с линиями разной толщины и разными цветами, для того чтобы создать более реалистичный вариант светокопировального листа:
background: #58a;
background-image: linear-gradient(white 2px, transparent 0), linear-gradient(90deg, white 2px, transparent 0), linear-gradient(hsla(0,0%,100%,.3) 1px, transparent 0), linear-gradient(90deg, hsla(0,0%,100%,.3) 1px, transparent 0);
background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;

ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/blueprint

Узор в горошек

Пока что для создания узоров мы использовали только линейные градиенты. Однако радиальные градиенты тоже могут быть чрезвычайно полезными, так как они позволяют создавать окружности, эллипсы и фрагменты этих фигур. Самый простой узор, который можно создать с помощью радиального градиента, — это массив точек:
background: #655;
background-image: radial-gradient(tan 30%, transparent 0);
background-size: 30px 30px;

Следует признать, что сам по себе этот рисунок не слишком пригоден для использования. Однако мы можем объединить два таких градиента и определить для них разные позиции фона, создав таким образом узор в горошек:


background: #655;
background-image: radial-gradient(tan 30%, transparent 0), radial-gradient(tan 30%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;

ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/polka

Обратите внимание: чтобы этот эффект сработал, вторая позиция фона должна составлять половину размера плитки. К сожалению, это означает, что для того, чтобы изменить размер плитки, нам нужно внести четыре правки. Это на грани того, чтобы назвать такой код непригодным к сопровождению, хотя общего мнения относительно того, перейдена ли черта, нет. Если вы используете препроцессор, то можете преобразовать это в примесь:
SCSS
@mixin polka($size, $dot, $base, $accent) {
background: $base;
background-image:
radial-gradient($accent $dot, transparent 0),
radial-gradient($accent $dot, transparent 0);
background-size: $size $size;
background-position: 0 0, $size/2 $size/2;
}
Затем для создания узора в горошек понадобится вызов, подобный этому:
SCSS
@include polka(30px, 30%, #655, tan);

Шахматные доски

Узоры типа «шахматная доска» используются во множестве ситуаций. Например, шахматная доска нежной расцветки может быть интересной альтернативой пресному фону сплошного цвета. Помимо этого, серая шахматная доска стала дефакто стандартом  обозначения прозрачности, что находит применение в самых разных пользовательских интерфейсах. Сделать шахматную доску с помощью CSS значительно сложнее, чем можно было бы ожидать. Типичная плитка, повторение которой генерирует шахматную доску, включает по два квадратика каждого цвета. Кажется, что этот эффект должно быть несложно воссоздать с помощью CSS: нужно всего лишь определить два квадрата с разными позициями фона, не так ли? Не совсем. Да, технически возможно создать квадраты, используя градиенты CSS, но без пустого пространства вокруг них результат будет выглядеть как заливка сплошным цветом. Однако не существует способа создавать квадраты, окруженные пустым пространством, используя только один градиент CSS. Если вы считаете, что это не так, попытайтесь найти градиент, который при повторении будет создавать изображение. Хитрость состоит в том, чтобы делать квадратик из двух прямоугольных треугольников. Мы уже умеем создавать прямоугольные треугольники. Вы можете освежить память, взглянув на следующий фрагмент кода (здесь используются другие цвета и прозрачность):

background: #eee;
background-image:
linear-gradient(45deg, #bbb 50%, transparent 0);
background-size: 30px 30px;
Возможно, вы задаетесь вопросом, чем это может вам помочь. Определенно, если попытаться сделать квадратики из двух треугольников,  результатом станет сплошной цвет. А что, если вполовину уменьшить катеты этих треугольников, чтобы они занимали 1/8 плитки,
а не 1/2, как сейчас? Этого можно с легкостью добиться, указав в качестве позиции границы перехода цвета 25% вместо 50%. Результат будет выглядеть как на рисунке ниже.


Схожим образом можно создать треугольники, указывающие в противоположном направлении, зеркально отразив границы перехода цвета :


background: #eee;
background-image: linear-gradient(45deg, transparent 75%, #bbb 0);
background-size: 30px 30px;

Угадаете, что произойдет, если мы объединим эти два решения? Код будет выглядеть так:
background: #eee;
background-image: linear-gradient(45deg, #bbb 25%, transparent 0), linear-gradient(45deg, transparent 75%, #bbb 0);
background-size: 30px 30px;

На первый взгляд кажется, что результат, показанный не способен привести нас к желаемой цели. Однако нужно всего лишь сдвинуть второй градиент на половину размера плитки, для того чтобы объединить эти треугольники и получить квадрат:
background: #eee;
background-image: linear-gradient(45deg, #bbb 25%, transparent 0), linear-gradient(45deg, transparent 75%, #bbb 0);
background-position: 0 0, 15px 15px;
background-size: 30px 30px;

БУДУЩЕЕ. КОНИЧЕСКИЕ ГРАДИЕНТЫ

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


можно будет создать с помощью следующего градиента:

background: conic-gradient(red, yellow, lime, aqua, blue,fuchsia, red);
Конические градиенты удобны для определения множества различных эффектов, не только для создания цветового колеса: звездные взрывы, эффект выглаженного щеткой металла и многие другие типы фонов,включая (как вы уже догадались) шахматные доски. Благодаря им повторяющуюся плитку можно было бы создать с помощью всего лишь одного градиента:
background: repeating-conic-gradient(#bbb 0, #bbb 25%, #eee 0, #eee 50%);
background-size: 30px 30px;
К сожалению, на момент написания этой главы конические градиенты не поддерживаются ни в одном браузере, но вы найдете полифилл на веб-странице http://leaverou.github.io/conic-gradient.
ПРОТЕСТИРУЙТЕ!
http://play.csssecrets.io/test-conic-gradient

Догадаетесь, каким будет результат? Это как раз то, чего мы пытались добиться ранее. Обратите внимание, что, по сути, это половинчатая шахматная доска. Все, что нам нужно для превращения ее в полноценную шахматную доску, — это повторить два градиента, создав еще один набор квадратиков, и еще раз сместить их позиции, как если бы мы дважды применяли технику создания узора в горошек:
background: #eee;
background-image: linear-gradient(45deg, #bbb 25%, transparent 0), linear-gradient(45deg, transparent 75%, #bbb 0), linear-gradient(45deg, #bbb 25%, transparent 0), linear-gradient(45deg, transparent 75%, #bbb 0);
background-position: 0 0, 15px 15px, 15px 15px, 30px 30px;
background-size: 30px 30px;

Результатом станет шахматная доска. 

Мы можем немного усовершенствовать код, объединив треугольники, указывающие в противоположные стороны (то есть первый со вторым, а третий с четвертым) и превратив более темный оттенок серого в полупрозрачный черный, для того чтобы базовый цвет можно было всегда с легкостью поменять без необходимости соответствующим образом корректировать цвет верхнего слоя:
background: #eee;
background-image: linear-gradient(45deg, rgba(0,0,0,.25) 25%, transparent 0, transparent 75%, rgba(0,0,0,.25) 0), linear-gradient(45deg, rgba(0,0,0,.25) 25%, transparent 0, transparent 75%, rgba(0,0,0,.25) 0);
background-position: 0 0, 15px 15px;
background-size: 30px 30px;

Теперь у нас два градиента вместо четырех, но код, как и раньше, может служить иллюстрацией принципа WET. Для того чтобы изменить акцентный цвет или размер ячейки, необходимо внести четыре правки. В данном случае уместно создать примесь в препроцессоре, чтобы исключить дублирование. Например, в Sass это выглядело бы так:

SCSS
@mixin checkerboard($size, $base,
$accent: rgba(0,0,0,.25)) {
background: $base;
background-image: linear-gradient(45deg, $accent 25%, transparent 0, transparent 75%, $accent 0), linear-gradient(45deg, $accent 25%, transparent 0, transparent 75%, $accent 0);
background-position: 0 0, $size $size,
background-size: 2*$size 2*$size;
}
/* Пример использования */
@include checkerboard(15px, #58a, tan);

В любом случае, кода получилось так много, что, возможно, было бы лучше пойти по пути SVG. Плитка  в формате SVG была бы очень простой и короткой:
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill-opacity=".25">
<rect x="50" width="50" height="50" />
<rect y="50" width="50" height="50" />
</svg>


Сочетание этих техник с режимами смешивания когда значения background-blend-mode, отличные от normal, используются для некоторых (или даже всех) слоев, составляющих фоновое изображение, может дать очень интересные результаты, что подтверждает эта галерея узоров Беннетта Фили. Для большинства из этих узоров используется только режим смешивания multiply, но и другие значения, такие как overlay, screen и difference, также могут оказаться очень полезными

Версия в формате SVG не только на 40 символов короче, в ней также заметно меньше повторений. Например, для изменения цвета достаточно одной правки, а для изменения размера — двух.

ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/checkerboard-svg

 Десерт на сегодня - часто говорят, что не нужно изобретать велосипед. А кто-то взял, и изобрел интересный вариант

Прочитано 389 раз Последнее изменение Воскресенье, 05 февраля 2017 13:07
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Оставить комментарий

Убедитесь, что вы вводите (*) необходимую информацию, где нужно
HTML-коды запрещены

Поиск по сайту

Google+