Какво е персонализиран курсор?

Персонализираният курсор е дефиниран от потребителя показалец на мишката, който замества стандартната стрелка или икона на браузъра. Уебсайтовете и приложенията използват персонализирани курсори, за да укрепят брандирането, да подобрят потапянето в игри или творчески преживявания, или просто да добавят уникален визуален щрих към интерфейса. Персонализираните курсори обикновено се дефинират в 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 px), за да се изобразят правилно като курсори в повечето браузъри.