Из этого урока вы узнаете об интересных возможностях кода CSS. Можно создать сетку квадратов из положений указателя мыши. Еще интересней скопировать эту сетку, поместить ее в другом месте экрана, немного изменить ее внешний вид и отображать движения указателя мыши в режиме реального времени.

Это можно сделать с помощью способа, описанного в уроке «Использование связывания объектов на веб-странице».

Код HTML для одного квадрата очень простой:

<a class="singlecell"><em>.</em></a>

С помощью элемента em создается копия движения указателя мыши.

Код CSS несколько более сложный, постараемся его объяснить. Сначала задастся расположение элемента em  и значение его правой стороне 200px, так что он свигается вправо на 200px. Обычный элемент ссылки становится красным при наведении на него указателя мыши, и элемент em сдвигает положение фона. У квадратов в сетке задано свойство отображения в виде блока, высота и ширина, равные 10px, и всплытие влево для создания сетки.

.singlecell {
  width: 10px;
  height: 10px;
  display: block;
  color: white;
  background-color: white;
  float: left;
}

.singlecell em {
  position: relative;
  width: 10px;
  height: 10px;
  right: 200px;
  display: block;
  background: yellow;
  text-indent: -9999px;
}

.singlecell:hover {
  background: red;
}
.singlecell:hover em {
  background: blue;
}

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

Автор урока Chris Coyier

Перевод — Дежурка

Смотрите также:

• Создание рамки с трех сторон элемента различными способами
• Создание стилей для полос прокрутки
• Создание исчезающего с задержкой атрибута заглушки