Взгляните на следующую демонстрационную страницу в Firefox, Chrome, Safari, Opera, IE9 или IE10:
Круги создаются с использованием элементов DOM, а не canvas, SVG, Flash или другой альтернативы.
Вопрос: не глядя на исходный код, сколько элементов DOM требуется?
Ответ должен быть очевидным, если вы прочитаете заголовок этой статьи. Используется только один элемент; в данном случае это один DIV На самом деле это невидимый круг, поскольку его цвет соответствует фону.
Другие круги определены в CSS с помощью малоизвестной функции свойства box-shadow Это позволяет вам дублировать форму любого элемента в любом месте, в любом размере, в любом цвете любое количество раз. Свойство имеет шесть аргументов:
- вставка : (необязательно), если определено, тень появится внутри элемента
- по горизонтали : расстояние х от элемента
- вертикальный : расстояние по оси Y от элемента
- размытие : (необязательно) радиус размытия, т. е. 0 для размытия
- распространение : (необязательно) расстояние, на которое распространяется тень, т.е. 1 пиксель расширяет тень на 1 пиксель во всех направлениях, поэтому он на 2 пикселя шире и выше, чем родительский элемент
- цвет : цвет тени
Мы можем использовать горизонтальные и вертикальные расстояния для взаимного расположения. Разброс может быть положительным или отрицательным, чтобы тень была больше или меньше родительского элемента. Поскольку можно определить несколько теней, мы можем дублировать исходную форму любое количество раз, например
#element
{
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;
}
Помните, что ваша форма может иметь также: before и: after псевдоэлементы со своими собственными тенями box.
Следующий вопрос: это полезно?
Ответ сложнее, но это вариант, который нужно учитывать при разработке страниц с повторяющимися формами. Это, безусловно, может помочь уменьшить вес страницы .
Очевидно, что эту технику можно довести до крайности и создать целую масштабируемую графику с использованием теней, например:
Тем не менее, это довольно бессмысленно, учитывая, что PNG или SVG, вероятно, будут более эффективными и проще в создании. Но дайте мне знать, если вы будете использовать технику повторяющихся теней для чего-нибудь интересного …