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

Опубликовано: 18 сентября 2016 Обновлено: 17 июля 2022 1 комментарий

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

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

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

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

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

Пример 1 

span {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #D13F92;
  box-shadow: 30px 0 0 #F3C361, -30px 0 0 #F3C361;
}

Пример 2 

span {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #D13F92;
  box-shadow: 30px 0 0 #F3C361, -30px 0 0 #F3C361;
}

Пример 3 

span {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #D13F92;
  transform: rotate(45deg);
  box-shadow: 25px -25px 0 #F3C361, -25px 25px 0 #F3C361;
}

Пример 4 

span {
  display: inline-block;
  width: 20px;
  height: 5px;
  background: #D13F92;
  box-shadow: 30px 0 0 #F3C361, -30px 0 0 #F3C361;
}

Пример 5 

span {
  display: inline-block;
  width: 20px;
  height: 5px;
  background: #D13F92;
  box-shadow: 0 8px 0 #F3C361, 0 -8px 0 #F3C361;
}

Пример 6 

span {
  display: inline-block;
  width: 5px;
  height: 20px;
  background: #D13F92;
  transform: rotate(45deg);
  box-shadow: 20px -20px 0 #F3C361, -20px 20px 0 #F3C361;
}

Пример 7 

span {
  display: inline-block;
  width: 20px;
  height: 10px;
  border-radius: 50%;
  background: #D13F92;
  box-shadow: 30px 0 0 #F3C361, -30px 0 0 #F3C361;
}

Пример 8 

span {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #D13F92;
  box-shadow: 0 0 0 5px #F3C361, 0 0 0 10px #D13F92, 0 0 0 15px #F3C361;
}

Пример 9 

span {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #D13F92;
  box-shadow: -20px 20px 0 #F3C361, 20px 20px 0 #F3C361, 0 40px 0 #D13F92;
}

Пример 10 

span {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #D13F92;
  box-shadow: 20px -20px 0 #F3C361, -20px -20px 0 #F3C361, 20px 20px 0 #F3C361, -20px 20px 0 #F3C361;
}

Пример 11 

span {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #D13F92;
  border-radius: 50%;
  box-shadow: 0 0 0 5px white, 0 0 0 10px #D13F92;
}

Пример 12 

span {
  display: inline-block;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background: #D13F92;
  box-shadow: 
  60px 0 0 -5px rgba(209, 63, 146, .9),
  110px 0 0 -10px rgba(209, 63, 146, .7),
  150px 0 0 -15px rgba(209, 63, 146, .5),
  180px 0 0 -20px rgba(209, 63, 146, .3);
}

Пример 13 

span {
  display: inline-block;
  height: 75px;
  width: 75px;
  background: #D13F92;
  border-radius: 50%;
  box-shadow: 
  100px -25px 0 -10px rgba(209, 63, 146, .9),
  180px  15px 0 -15px rgba(209, 63, 146, .7),
  260px -10px 0 -20px rgba(209, 63, 146, .5),
  340px   5px 0 -25px rgba(209, 63, 146, .3),
  400px   0px 0 -30px rgba(209, 63, 146, .1);
}

Пример 14 

span {
  display: inline-block;
  width: 40px;
  height: 40px;
  background: #D13F92;
  box-shadow: 
  10px 10px 0 0 #F3C361, 
  20px 20px 0 0 #1C2552;
}

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

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

Поделиться: