Co to jest niestandardowy kursor?

Niestandardowy kursor to zdefiniowany przez użytkownika wskaźnik myszy, który zastępuje domyślną strzałkę lub ikonę wskaźnika przeglądarki. Witryny i aplikacje używają niestandardowych kursorów, aby wzmocnić markę, poprawić immersję w grach lub doświadczeniach kreatywnych, lub po prostu dodać unikalny wizualny akcent do interfejsu. Niestandardowe kursory są zazwyczaj definiowane w CSS przy użyciu właściwości cursor z wartością url() wskazującą na plik obrazu, taki jak .cur, .png lub .svg.

Przeglądarki internetowe natywnie obsługują kilka formatów plików kursorów. Format .cur to klasyczny format kursora systemu Windows, .ani dodaje obsługę animacji, podczas gdy .png i .svg oferują nowoczesne, niezależne od rozdzielczości alternatywy, które działają na wszystkich platformach.

Opis narzędzia

Tester Niestandardowych Kursorów pozwala przesłać dowolny plik kursora i natychmiast wyświetlić podgląd jego wyglądu i zachowania w przeglądarce. Po przesłaniu kursor zastępuje domyślny wskaźnik wewnątrz dedykowanego obszaru testowego — widoku w kratkę z przyciskiem — dzięki czemu możesz ocenić zarówno ruch w wolnej przestrzeni, jak i zachowanie przy najechaniu, bez pisania choćby jednej linii CSS.

Obsługiwane formaty

Format Opis
.cur Format kursora systemu Windows, szeroko obsługiwany
.ani Animowany kursor systemu Windows
.png Obraz rastrowy, idealny dla kursorów wysokiej jakości
.svg Skalowalny obraz wektorowy, ostry w dowolnym rozmiarze
.ico Format ikony systemu Windows, również użyteczny jako kursor

Funkcje

  • Natychmiastowy podgląd: Kursor jest stosowany na żywo zaraz po przesłaniu pliku — nie jest wymagane przeładowanie strony
  • Interaktywny obszar testowy: Widok w kratkę pokazuje kursor na neutralnym tle dla jasnej widoczności
  • Przycisk testowy: Przycisk wewnątrz obszaru testowego pozwala zweryfikować zachowanie kursora na elementach interaktywnych
  • Spójna dziedziczność kursora: Przycisk dziedziczy niestandardowy kursor zamiast powracać do domyślnego kursora przeglądarki
  • Tylko po stronie klienta: Pliki są odczytywane bezpośrednio w przeglądarce i nigdy nie są przesyłane na żaden serwer

Przypadki użycia

  • Projektanci kursorów: Sprawdź, jak wygląda nowo utworzony plik kursora .cur lub .png przed jego wydaniem
  • Deweloperzy internetowi: Szybko przetestuj zasób kursora przed zintegrowaniem go w CSS za pomocą właściwości cursor: url(...)
  • Deweloperzy gier i kreatywni: Sprawdź wygląd i widoczność niestandardowych wskaźników w kontekstach interaktywnego interfejsu użytkownika

Jak to działa

Po przesłaniu pliku narzędzie tworzy adres URL obiektu dla niego przy użyciu API URL.createObjectURL() przeglądarki i wstrzykuje go jako styl CSS cursor w obszarze testowym. Jest to równoważne napisaniu cursor: url(your-file.cur), auto w arkuszu stylów. Rezerwowy auto zapewnia, że przeglądarki używa domyślnego kursora, jeśli plik nie może być załadowany lub przeanalizowany.

Porady

  • W przypadku kursorów .png przeglądarka domyślnie używa górnego lewego rogu (0 0) jako hotspotu. Jeśli aktywny punkt kursora powinien być gdzie indziej (np. czubek ołówka), może być konieczne dostosowanie tego w CSS po testowaniu.
  • Animowane kursory .ani odtwarzają się automatycznie w przeglądarkach, które je obsługują (głównie oparte na Chromium).
  • Kursory SVG muszą być małe (zazwyczaj poniżej 128×128 px), aby poprawnie renderować się jako kursory w większości przeglądarek.