Что такое пользовательский курсор?

Пользовательский курсор — это определённый пользователем указатель мыши, который заменяет стандартную стрелку или значок указателя браузера. Веб-сайты и приложения используют пользовательские курсоры для усиления брендинга, повышения погружения в игры или творческие проекты, или просто для добавления уникального визуального штриха к интерфейсу. Пользовательские курсоры обычно определяются в CSS с помощью свойства cursor со значением url(), указывающим на файл изображения, такой как .cur, .png или .svg.

Веб-браузеры изначально поддерживают несколько форматов файлов курсоров. Формат .cur — это классический формат курсора Windows, .ani добавляет поддержку анимации, а .png и .svg предлагают современные, независимые от разрешения альтернативы, которые работают на всех платформах.

Описание инструмента

Custom Cursor Tester позволяет загрузить любой файл курсора и мгновенно предпросмотреть, как он выглядит и работает в браузере. После загрузки ваш курсор заменяет стандартный указатель в специальной области тестирования — окне просмотра в клетку с кнопкой — чтобы вы могли оценить как движение в свободном пространстве, так и поведение при наведении, не написав ни строки CSS.

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

Формат Описание
.cur Формат курсора Windows, широко поддерживается
.ani Анимированный курсор Windows
.png Растровое изображение, идеально для качественных курсоров
.svg Масштабируемое векторное изображение, чёткое при любом размере
.ico Формат значка Windows, также можно использовать как курсор

Возможности

  • Мгновенный предпросмотр: Курсор применяется в реальном времени сразу после загрузки файла — перезагрузка страницы не требуется
  • Интерактивная область тестирования: Окно просмотра в клетку показывает курсор на нейтральном фоне для чёткой видимости
  • Кнопка для тестирования: Кнопка в области тестирования позволяет проверить поведение курсора на интерактивных элементах
  • Последовательное наследование курсора: Кнопка наследует пользовательский курсор, а не возвращается к стандартному курсору браузера
  • Только на клиентской стороне: Файлы читаются непосредственно в браузере и никогда не загружаются на какой-либо сервер

Варианты использования

  • Дизайнеры курсоров: Проверьте, как выглядит только что созданный файл курсора .cur или .png перед выпуском
  • Веб-разработчики: Быстро протестируйте ресурс курсора перед интеграцией его в CSS со свойством cursor: url(...)
  • Разработчики игр и творческих проектов: Проверьте ощущение и видимость пользовательских указателей в контексте интерактивного интерфейса

Как это работает

При загрузке файла инструмент создаёт объект URL для него, используя API браузера URL.createObjectURL(), и внедряет его как стиль CSS cursor в область тестирования. Это эквивалентно написанию cursor: url(your-file.cur), auto в таблице стилей. Резервный вариант auto гарантирует, что браузер использует свой стандартный курсор, если файл не может быть загружен или обработан.

Советы

  • Для курсоров .png браузер по умолчанию использует верхний левый угол (0 0) как активную точку. Если активная точка вашего курсора должна быть в другом месте (например, кончик карандаша), вам может потребоваться отрегулировать это в CSS после тестирования.
  • Анимированные курсоры .ani воспроизводятся автоматически в браузерах, которые их поддерживают (в основном на основе Chromium).
  • SVG курсоры должны быть небольшими (обычно менее 128×128 пикселей), чтобы корректно отображаться как курсоры в большинстве браузеров.