Создание и применение пользовательских курсоров с помощью CSS и изображений

Пользовательские курсоры позволяют настроить пользовательский опыт с помощью визуальных подсказок, соответствующих вашему бренду или творческим целям. Будь то нарисованный от руки значок, указатель в стиле игры или просто забавная вариация стандартной стрелки, создание пользовательского курсора с помощью CSS проще, чем кажется. Это руководство покажет вам, как это сделать шаг за шагом.

Базовый синтаксис свойства CSS cursor

CSS предоставляет различные встроенные типы курсоров. Вот как их использовать:

.default {
  cursor: default;
}
.pointer {
  cursor: pointer;
}
.text {
  cursor: text;
}
.help {
  cursor: help;
}
.progress {
  cursor: progress;
}

Эти встроенные варианты охватывают стандартные взаимодействия. Но чтобы выйти за их пределы, вы можете использовать собственное изображение.

Создание пользовательского курсора из изображения

Чтобы использовать изображение в качестве курсора, вы можете передать URL в свойство cursor.

Пример:

.custom-cursor {
  cursor: url('cursor.png') 4 4, auto;
}

• url('cursor.png') — ваше пользовательское изображение
• 4 4 — горячая точка (место, где регистрируется клик)
• auto — резервный курсор, если изображение не загрузится

Поддерживаемые форматы

• .cur и .ico (лучше всего работают в Windows и Edge)
• .png (широко поддерживается, но может игнорировать горячие точки в некоторых браузерах)
• .svg (менее поддерживается для курсоров)

Рекомендуемый размер

• Придерживайтесь 32x32 пикселей или меньше для стабильного поведения
• Изображения больше 128x128 могут быть проигнорированы или масштабированы непоследовательно

Курсор только при наведении

Чтобы показывать пользовательский курсор только при наведении на определенные элементы:

.button:hover {
  cursor: url('hover-cursor.png'), pointer;
}

Это сохраняет стандартный курсор в других местах и настраивает обратную связь при взаимодействии.

Советы по выравниванию курсора и совместимости

• Значения горячей точки критически важны — они определяют активную точку курсора.
• Резервные варианты обеспечивают плавную деградацию.
• Тестирование в Chrome, Firefox, Safari и Edge необходимо.

.cursor-test {
  cursor: url('cursor.png') 16 0, auto;
}

Используйте такие инструменты, как инструменты разработчика браузера или редакторы изображений, чтобы определить правильные координаты горячих точек.

Дополнительный совет: Избегайте размытых курсоров

Некоторые браузеры масштабируют PNG-курсоры, если они не идеально соответствуют пикселям. Чтобы предотвратить размытое отображение:

• Используйте точное разрешение 1:1 (например, 32x32)
• Избегайте прозрачных отступов в изображениях курсора

Пользовательские анимированные курсоры (опционально)

Анимированные курсоры не поддерживаются нативно, но есть два распространенных обходных пути:

1. Использование GIF

.cursor-gif {
  cursor: url('animated-cursor.gif'), auto;
}

• Работает в некоторых браузерах, но не стабильно.
• GIF может мерцать или игнорироваться.

2. Использование JavaScript для отслеживания мыши

const cursor = document.querySelector('.cursor');
document.addEventListener('mousemove', e => {
  cursor.style.left = e.pageX + 'px';
  cursor.style.top = e.pageY + 'px';
});

Затем стилизуйте div .cursor:

.cursor {
  position: fixed;
  pointer-events: none;
  width: 32px;
  height: 32px;
  background-image: url('custom.png');
  background-size: cover;
  z-index: 9999;
}

Варианты использования анимированных курсоров

• Игры и игровые интерфейсы
• Креативные веб-сайты или портфолио

Соображения по доступности и UX

Пользовательские курсоры должны улучшать, а не затруднять удобство использования. Имейте в виду:

• Избегайте замены курсоров на полях ввода и ссылках, если это не добавляет ясности
• Убедитесь, что визуальный дизайн не мешает ожидаемому поведению указателя
• Используйте четкие горячие точки, чтобы предотвратить несоответствие клика

Лучшие практики

• Тестируйте с пользователями клавиатуры и программ чтения с экрана
• Сохраняйте курсоры визуально различимыми и легкими
• Избегайте применения курсоров глобально (например, к body), если это не имеет смысла в контексте

Распространенные проблемы и отладка

Курсор не отображается?

• Подтвердите правильность пути к изображению
• Используйте поддерживаемые форматы и размеры
• Добавьте резервный вариант: cursor: url(...), auto;

Горячая точка смещена?

• Отрегулируйте координаты X и Y в значении cursor
• Предварительно просмотрите в редакторе изображений, чтобы определить точную точку клика

Не работает в Firefox или Safari?

• Попробуйте использовать .cur или .ico вместо .png
• Избегайте SVG и анимированных форматов для критически важных взаимодействий
• Safari полностью игнорирует некоторые форматы изображений курсора

Применение к неправильному элементу

Если ваш курсор не виден, убедитесь, что CSS применяется к видимому и интерактивному элементу. Например:

body {
  cursor: url('cursor.png'), default;
}

Заключение

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

Часто задаваемые вопросы