Миллиметровка на CSS
Миллиметровка на CSS
Чтобы создать фон с красивой миллиметровкой, можно воспользоваться фоновым изображением, таким как на примере.
Но намного интереснее сделать такой фон с помощью новых возможностей CSS. Для этого можно воспользоваться линейными градиентами в сочетании с множественными фоновыми изображениями (linear gradients + multiple backgrounds). Заодно разберемся с синтаксисом линейных градиентов.
Готовим сцену
Для начала создадим блок с классом grid c синим цветом фона.
Простейший градиент
Градиенты описываются внутри CSS-свойства background-image. Простейший градиент можно описать таким образом:
background-image:linear-gradient(top, white, transparent);
Сам градиент создаётся функцией linear-gradient. В её параметрах указываются направление градиента и набор цветов. Направление можно не указывать, тогда будет использовано значение по умолчанию — сверху вниз. Цветов может быть любое количество. Значение transparent обозначает прозрачный цвет.
Размер фонового изображения
Еще одно приятное новшество CSS — это свойство background-size, с помощью которого можно задавать размер фоновым изображениям, в том числе и CSS-градиентам.
В нашей миллиметровке будут ячейки размером 20 на 20 пикселей, поэтому задаём градиенту background-size: 20px 20px;.
Чтобы было наглядней, убрано повторение фона.
Горизонтальная сетка
Вернём повторение фона обратно. Возникла горизонтальная сетка из градиентов.
Стоп-цвета
В значения цветов градиента можно добавлять так называемые стоп-цвета (color-stop), которые задают ширину данного цвета внутри градиента. Стоп-цвета можно задавать в пикселях, процентах и других единицах измерения CSS, например:
linear-gradient(left, white 25%, black 75%);
Мы задаем для стоп-цвета значение 1px, чтобы получить тонкую сетку.
Второй фон
С горизонтальным компонентом сетки разобрались. Теперь добавим вертикальный, используя множественные фоны. Значения множественных фонов в CSS-свойствах перечисляются через запятую. Например:
background-image: url(img1.jpg), url(img2.jpg);
background-size: 10px 10px, 100% 100%;
Это правило добавит к элементу два фоновых изображения. img1.jpg будет 10 на 10 пикселей, а img2.jpg будет на весь размер элемента.
Второй фон
Для вертикального компонента также зададим размер 20 на 20 пикселей.
Кстати, чтобы повернуть градиент на 90 градусов, было добавлено направление 90deg.
Вертикальная сетка
Зададим стоп-цвета для вертикального компонента.
Мы создали сетку с ячейкой размером 20 на 20 пикселей, скомбинировав два линейных градиента. Двигаемся дальше.
Смещение
Немного сместим сетку вверх и влево. Для этого зададим каждому из фонов background-position: -1px -1px.
Пунктир
Просто так с помощью градиентов пунктирную линию не сделать, поэтому придется немного схитрить.
Сначала добавим более мелкую сетку поверх уже существующей. То есть нужно добавить еще две пары линейных градиентов меньшего размера. Чтобы мелкая сетка перекрывала крупную, градиенты добавляются в начало списка фонов.
Временно сделаем мелкую сетку черной.
Пунктир
Так как размер мелкой сетки кратен размеру крупной, а смещение одинаковое, то мелкая сетка полностью скрывает крупную.
Сдвигаем мелкую сетку относительно крупной на один пиксель вправо и вниз, задав background-position: 0 0.
Пунктир
Теперь задаём мелкой сетке цвет фона и получаем крупную сетку пунктиром.
Пунктир готов
Приглушаем цвет сетки. Теперь пунктирная сетка готова.
Мы получили её комбинированием двух сеток, состоящих из четырёх линейных градиентов.
Крупные направляющие
Добавим крупную направляющую сетку размером 100 на 100 пикселей, используя тот же приём с двумя градиентами.
Направляющая сетка должна быть поверх пунктирной, поэтому градиенты добавлены в начале списка фонов. Смещение у направляющей сетки такое же, как и у пунктирной.
Крупные направляющие готовы
Осталось чуть приглушить цвет направляющих и миллиметровка готова.
Готово!
Мы создали фон миллиметровки на CSS, используя линейные градиенты и множественные фоны. Экспериментируйте с ним на здоровье!
