Повтор тени

Повтор тени создан с помощью DOM элементов, а не с canvas, SVG, Flash или иной альтернативой. Пример использует свойство box-shadow и работает в Firefox, Chrome, Safari, Opera, IE9 +.

Вопрос:
не глядя на исходный код, сколько DOM элементов необходимо?

Только один элемент используется — это div с атрибутом id. На самом деле это невидимый круг, поэтому цвет круга одинаковый с фоном.

Демо

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

В теле документа шесть правил CSS:

  1. inset : (необязательно), если определен то тень будет появляться внутри элемента.
  2. horizontal: расстояние х от элемента.
  3. vertical: расстояние у от элемента.
  4. blur:  (необязательно), радиус размытия, то есть 0, если нет размытия тени.
  5. spread:  (необязательно), во всех направлениях 1px расширяет тень, поэтому тень на 2px больше, чем родительский элемент.
  6. color: цвет тени.

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

Например:

#elient {
	width: 100px;
	height: 100px;
	background-color: #ccc;
	border-radius: 50px;
	box-shadow: 120px 0px 0 15px #f00,
				-60px  104px 0 0px #0f0,
				-60px -104px 0 -15px #00f;
}
CSS3 повторяющееся элемент тени
CSS3 box-shadow повторяющейся элемент тени

С помощью свойства box-shadow можно рисовать даже картины, например Мона Лиза.