Рисуем с помощью box-shadow

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

box-shadow-paint

Рис. 1. Принцип рисования с помощью тени блока

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

See the Pen WGxqLX by Elena (@html5book) on CodePen.

За основу возьмём элемент span, которому добавим следующие стили:

Пример 1

Пример 2

Пример 3

Пример 4

Пример 5

Пример 6

Пример 7

Пример 8

Пример 9

Пример 10

Пример 11

Пример 12

Пример 13

Пример 14

А вот пример более сложного рисунка, созданного также на основе одного элемента. С помощью таких пиксельных рисунков можно сделать, например, логотип для сайта.

See the Pen wzWVEE by Elena (@html5book) on CodePen.