Генератор пользовательского курсора (CSS)

Генератор пользовательского курсора (CSS): для чего нужен

Пользовательский курсор усиливает айдентику портфолио, брендовых сайтов и игр. Выберите круг (кольцо, заливку или кольцо с точкой) нужного цвета и размера или загрузите изображение PNG или SVG, задайте точку клика и проверьте в тестовой области.

CSS выводится с изображением в data URI, hotspot, запасным курсором и возможностью оставить руку на ссылках и кнопках. Инструмент предупреждает, когда изображение больше 128 px, предела, выше которого браузеры игнорируют курсор.

Как пользоваться

1. Выберите круг или изображение.
2. Настройте цвет, размер или точку клика.
3. Проверьте и скопируйте CSS.

Когда использовать

• Портфолио дизайнера.
• Сайт бренда или кампании.
• Страницы игр.

Частые вопросы

Какой максимальный размер курсора?

Браузеры принимают изображения курсора до 128 на 128 px; больше этого они игнорируют изображение и используют запасной курсор. Самый безопасный и удобный размер — 32 px.

Что такое точка клика (hotspot)?

Это пиксель изображения, который считается кончиком курсора. У стрелки он на кончике, у круга — в центре. Два числа после адреса изображения в CSS — положение этой точки.

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

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

Правда бесплатно?

Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.

Похожие инструменты