10.1 Właściwość cursor
CSS daje możliwość zmiany wyglądu kursora przy najechaniu na elementy za pomocą właściwości cursor. To pozwala ustawić różne typy kursorów, co poprawia interaktywność i atrakcyjność wizualną stron internetowych.
Właściwość cursor określa wygląd kursora myszy, kiedy znajduje się nad elementem. Wartości mogą być predefiniowane lub użytkownik może skorzystać z własnych grafik (customowych).
Składnia:
element {
cursor: value;
}
Wartości:
Właściwość cursor obsługuje wiele wartości, które można podzielić na predefiniowane i customowe.
Predefiniowane wartości:
default: domyślny kursorpointer: kursor w formie ręki, zazwyczaj używany dla linkówtext: kursor w formie kreski (I-kształtny), zazwyczaj używany dla pól tekstowychmove: kursor do przemieszczaniawait: kursor w formie klepsydry lub wskaźnika oczekiwaniahelp: kursor w formie znaku zapytaniacrosshair: kursor w formie celownikanot-allowed: kursor w formie znaku zakazu (przekreślone koło)grabigrabbing: kursory do przeciągania elementów
Przykład użycia predefiniowanych wartości:
.default-cursor {
cursor: default;
padding: 10px;
border: 1px solid black;
}
.pointer-cursor {
cursor: pointer;
padding: 10px;
border: 1px solid black;
}
.text-cursor {
cursor: text;
padding: 10px;
border: 1px solid black;
}
<div class="default-cursor">Domyślny kursor</div>
<div class="pointer-cursor">Kursor wskazujący</div>
<div class="text-cursor">Kursor tekstowy</div>
10.2 Customowe wartości (customowe kursory)
Właściwość cursor obsługuje także użycie grafiki użytkownika jako kursora. Do tego stosuje się wartość url.
Składnia:
element {
cursor: url("custom-cursor.png"), fallback;
}
Gdzie:
url('custom-cursor.png'): wskazuje ścieżkę do grafiki kursorafallback: predefiniowana wartość, stosowana, gdy nie można załadować grafiki użytkownika
Przykład użycia customowych kursorów:
.custom-cursor {
cursor: url('https://via.placeholder.com/32'), auto;
padding: 10px;
border: 1px solid black;
}
<body>
<div class="custom-cursor">Customowy kursor</div>
</body>
Specyfikacje i ograniczenia dla customowych kursorów:
- Formaty grafiki: obsługiwane formaty to
.cur,.png,.jpg,.gif. - Wymiary grafik: zaleca się używanie grafik o rozmiarze 32x32 pikseli lub mniejszych, dla lepszej wydajności i kompatybilności.
- Koordynaty punktu kliknięcia: w grafice kursora można ustawić koordynaty punktu kliknięcia (hotspot). Domyślnie to lewy górny róg (0,0).
10.3 Szczegóły użycia customowych kursorów
Formaty grafik
Customowe kursory mogą być w różnych formatach, takich jak PNG, GIF, JPG i SVG. Zaleca się używanie formatów z obsługą przezroczystości (np. PNG), aby kursor wyglądał poprawnie na każdym tle.
Wymiary grafik
Grafiki kursora nie powinny być zbyt duże. Zalecane wielkości to 32x32 pikseli lub mniej. Duże grafiki mogą być źle wyświetlane w niektórych przeglądarkach.
Ustawienie koordynatów foku
Można ustawić koordynaty foku (punktu kliknięcia) kursora za pomocą dodatkowych wartości po URL grafiki.
Składnia
element {
cursor: url("custom-cursor.png") x y, fallback;
}
Gdzie:
xiy: koordynaty foku względem lewego górnego rogu grafiki.
Przykład użycia z koordynatami foku:
.custom-cursor-focus {
cursor: url('https://via.placeholder.com/32') 16 16, auto;
padding: 10px;
border: 1px solid black;
}
<body>
<div class="custom-cursor-focus">Customowy kursor z foku</div>
</body>
Wyjaśnienie kodu:
.custom-cursor-focus: ustawia customowy kursor z koordynatami foku (16, 16), co czyni środek grafiki punktem kliknięcia
Zastosowanie praktyczne:
- Polepszenie UI/UX: użycie customowych kursorów może znacznie poprawić interfejs użytkownika, czyniąc go bardziej intuicyjnym i estetycznym.
- Elementy interaktywne: customowe kursory mogą być stosowane do elementów interaktywnych, takich jak przyciski, linki, ikony itp.
- Gry i aplikacje: w grach i aplikacjach webowych customowe kursory pomagają stworzyć unikalny styl i atmosferę.
GO TO FULL VERSION