Generator kursora CSS - wbudowane i niestandardowe kursory z hotspotem

To narzędzie generuje regułę cursor dla dowolnego selektora. Wybierzesz wbudowany typ kursora albo wstawisz własny plik graficzny z opcjonalnym hotspotem. Dostajesz czysty CSS gotowy do wklejenia oraz podgląd zachowania na żywo.

Jak działa Generator kursora CSS

Silnik buduje końcową wartość właściwości cursor w oparciu o tryb i wprowadzone parametry. W trybie custom możesz podać jeden lub dwa adresy grafik. Drugi adres pełni rolę wersji alternatywnej, np. dla ekranów o wysokiej gęstości. Na końcu lista wartości kursora zawiera fallback - wybrany kursor wbudowany. Dzięki temu jeśli przeglądarka nie załaduje obrazu, nadal pokaże sensowny wskaźnik.

Narzędzie pozwala też generować CSS dla konkretnego selektora lub wstrzyknąć regułę na element body. To przydatne, gdy chcesz zmienić kursor globalnie na całej stronie lub lokalnie w komponencie.

Parametry i co zmieniają

Składnia CSS - jak wygląda wartość

Przykładowa wartość w trybie custom składa się z jednej lub dwóch deklaracji url() z hotspotem, a na końcu z kursora wbudowanego jako fallback:

/* Wartość cursor z url, url2x i fallbackiem */
cursor: url('cursor.png') 6 2, url('[email protected]') 12 4, pointer;
  

Dla trybu builtin wartość jest pojedyncza:

/* Wartość cursor dla kursora wbudowanego */
cursor: zoom-in;
  

Przykłady konfiguracji i wygenerowany CSS

1. Kursor pointer dla linków w panelu bocznym

/* Selector: .sidebar a */
.sidebar a {
  cursor: pointer;
}
  

2. Kursor text dla edytowalnego obszaru

/* Selector: .editor */
.editor {
  cursor: text;
}
  

3. Niestandardowy kursor z hotspotem i fallbackiem pointer

/* Selector: .cursor-brand */
.cursor-brand {
  cursor: url('https://cdn.example.com/cursors/brand.png') 4 4,
          url('https://cdn.example.com/cursors/[email protected]') 8 8,
          pointer;
}
  

4. Kursor grab i grabbing dla przeciągania

/* Selector: .draggable */
.draggable { cursor: grab; }
.draggable:active { cursor: grabbing; }
  

Tabela wartości wbudowanych - szybki przegląd

Najlepsze praktyki i dostępność

• Zachowaj spójność semantyczną. pointer powinien pojawić się tylko tam, gdzie element jest klikany.
• Unikaj zaskoczeń. Dla linków tekstowych lepiej zostawić domyślny pointer zamiast niestandardowej strzałki.
• Zadbaj o kontrast kursora z tłem. Przy jasnych tłach użyj ciemnej grafiki kursora lub obrysu.
• Ustal przemyślany hotspot. Dla strzałki zazwyczaj to 0 0 lub niewielkie przesunięcie w prawo i w dół.
• Dodaj fallback. Jeśli grafika nie wczyta się, użytkownik nadal ma zrozumiały wskaźnik.

Formaty plików i wsparcie

Najpewniejszą drogą jest format CUR dla kompatybilności z Windows oraz PNG dla szerokiego wsparcia. Grafiki SVG bywają wspierane, ale różnie interpretowane przez silniki przeglądarek. W projektach produkcyjnych testuj na docelowych przeglądarkach i systemach. Uważaj na rozmiar pliku - kursor ładuje się natychmiast, więc ciężki obraz spowalnia odczucia użytkownika.

Hotspot - punkt aktywny

Hotspot to współrzędne piksela, który przeglądarka traktuje jako dokładny wskaźnik pozycji. Dla klasycznej strzałki hotspot zwykle znajduje się przy ostrym rogu. Dla celowników bywa w środku. Generator dodaje wartości po url() w formacie x y. Jeśli nie podasz liczb, przeglądarka może przyjąć 0 0.

/* Strzałka 24x24 px z hotspotem w rogu 0 0 */
cursor: url('arrow-24.png') 0 0, pointer;
  

Strategie fallback i obsługa błędów

Nawet jeśli plik istnieje, sieć może zawieść. Dlatego zawsze dodawaj na końcu wartość wbudowaną. Dodatkowo możesz podać dwie grafiki. Jeśli pierwsza nie jest wspierana, przeglądarka spróbuje kolejnej. Używaj HTTPS i stabilnego hostingu CDN dla minimalizacji opóźnień.

Przykładowe przepisy gotowe do użycia

Kursor lupa dla galerii obrazów

.gallery-zoom { cursor: zoom-in; }
.gallery-zoom.is-zoomed { cursor: zoom-out; }
  

Kursor kopiowania w edytorze kodu

.editor-copy { cursor: copy; }
.editor-blocked { cursor: not-allowed; }
  

Precyzyjny celownik dla narzędzia rysowania

.canvas-tool { cursor: crosshair; }
  

Integracja z twoim generatorem

1. Ustaw mode na builtin lub custom. W trybie custom wypełnij url1, ewentualnie url2 oraz hotspot.
2. Wybierz builtin jako fallback. Przykładowo pointer dla elementów klikalnych.
3. Wskaż selector albo zaznacz applyBody, jeśli zmieniasz kursor globalnie.
4. Kliknij Generate. Skopiuj CSS z panelu Wynik i wklej do arkusza stylów.
5. Przetestuj na desktopie i mobile. Zwróć uwagę na widoczność i rozmiar kursora na ekranach HiDPI.

Najczęstsze błędy i szybkie poprawki

• Brak fallback - dodaj pointer albo default na końcu wartości.
• Nieprawidłowy hotspot - przesuń x i y o kilka pikseli i sprawdź ponownie precyzję kliku.
• Zbyt duża grafika - zmniejsz obraz do 24-32 px po dłuższym boku. Większe kursory bywają nieczytelne i rozpraszają.
• Nieładowanie obrazka - sprawdź protokół HTTPS, nagłówki CORS i kod odpowiedzi serwera.
• Niespójny UX - nie zmieniaj kursora tam, gdzie zachowanie elementu jest standardowe i zrozumiałe.

FAQ techniczne

Czy mogę używać data URL

Tak. Wartość url('data:image/png;base64,...') zadziała podobnie jak zewnętrzny plik. Pamiętaj jednak o wadze i ograniczeniach parsera CSS w niektórych środowiskach.

Czy SVG jako kursor to dobry pomysł

Bywa wspierany, ale różnie interpretowany. W zastosowaniach produkcyjnych preferuj PNG lub CUR. SVG zachowaj do prototypów i wewnętrznych narzędzi.

Jak zdefiniować różny kursor w zależności od stanu

Użyj pseudoklas i klas stanu. Na przykład w trakcie przeciągania przełączaj klasę na .dragging i ustaw cursor: grabbing.

Podsumowanie

Generator kursora CSS pozwala szybko i przewidywalnie sterować wskaźnikiem w interfejsie. Wybierasz wbudowane wartości lub dostarczasz własną grafikę z precyzyjnym hotspotem. Dodajesz fallback i masz pełną kontrolę nad spójnością UX. Dzięki temu poprawisz czytelność akcji, zachowasz dostępność i unikniesz zaskoczeń dla użytkownika.