В этой статье хочу разобрать способ рисования пиксельной графики с помощью CSS-свойства box-shadow. С помощью этой техники можно делать как и более сложные изображения, так и простые значки.

Для начала разберем основную идею. Напомню синтаксис box-shadow:

box-shadow: none | <тень> [,<тень>]*

где <тень>:
inset <сдвиг по x> <сдвиг по y> <радиус размытия> <растяжение> <цвет>

Это свойство позволяет создавать тени у элемента как внешние так и внутренние. Однако, если убрать размытие и растяжение, то тень может стать полоской, прямоугольником или квадратом, с помощью которых можно строить различные фигуры. Еще одна приятная особенность box-shadow состоит в том, что можно задавать большое количество теней в одном свойстве, перечисляя их через запятую.

Посмотрим, что можно с этим сделать дальше. Если мы будем использовать собственную тень элемента, то мы сможем рисовать только относительно размеров самого элемента, ведь тень начинается от его границ. Чтобы обойти это ограничение мы можем использовать псевдоэлементы ::before и ::after. Задав псевдоэлемент нужного размера и расположив его за границами родительского элемента с помощью абсолютного позиционирования и отрицательного top размеров в его высоту, можно начать рисовать от левого верхнего угла. Давайте попробуем с помощью этих принципов нарисовать квадратик в левом верхнем углу:

Таким образом мы получили условный пиксель размерами 4 на 4. Как я писала ранее вы можете задавать такие пиксели дальше в том же свойстве несколькими тенями и сделать например рисунок шахматной доски:

Также вы можете каждой тени задавать свой собственный цвет и получить многоцветный рисунок. Например, красное пиксельное сердечко с черной обводкой:

А как на счет пиксельного pac-man и привидения, чтобы сделать собственную игру?

Как видите даже используя только один квадрат, мы имеем довольно широкие возможности. И все это в рамка лишь одного HTML-элемента.

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

С помощью этого проекта вы можете сделать на пример вот такого Nyan Cat и вставить его на свой сайт:

Надеюсь это тема была вам интересна так же как и мне. Жду вашего мнения в комментариях!