10.1 Cursor xüsusiyyəti
CSS vasitəsilə elementlərin üzərində kursorun görünüşünü cursor xüsusiyyəti ilə dəyişmək mümkündür. Bu xüsusiyyət, web səhifələrin interaktivliyini və vizual cazibədarlığını artıraraq, müxtəlif növ kursorlar təyin etməyə imkan verir.
cursor xüsusiyyəti, maus kursorunun element üzərində necə göründüyünü müəyyən edir. Dəyərlər əvvəlcədən təyin edilmiş və ya istifadəçi tərəfindən yaradılmış (xüsusi) şəkillər ola bilər.
Sintaksis:
element {
cursor: value;
}
Dəyərlər:
cursor xüsusiyyəti bir çox dəyərləri dəstəkləyir, bunlar əvvəlcədən təyin edilmiş və xüsusi olaraq bölünə bilər.
Əvvəlcədən təyin edilmiş dəyərlər:
default: standart kursorpointer: əl formalı kursor, adətən linklər üçün istifadə olunurtext: mətn kursoru (I-formalı), adətən mətn sahələri üçün istifadə olunurmove: hərəkət etmək üçün kursorwait: qum saatı və ya gözləmə göstəricisi şəklində kursorhelp: sual işarəsi şəklində kursorcrosshair: nişangah şəklində kursornot-allowed: qadağa işarəsi (çevrənin üstündən xətt çəkilmiş) şəklində kursorgrabvəgrabbing: elementləri sürükləmə üçün kursorlar
Əvvəlcədən təyin edilmiş dəyərlərin istifadəsinə nümunə:
.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">Standart kursor</div>
<div class="pointer-cursor">Əl formalı kursor</div>
<div class="text-cursor">Mətn kursoru</div>
10.2 İstifadəçi dəyərləri (kastom kursorlar)
cursor xüsusiyyəti həmçinin kursor kimi istifadəçi şəkillərindən istifadəni dəstəkləyir. Bunun üçün url dəyəri istifadə olunur.
Sintaksis:
element {
cursor: url("custom-cursor.png"), fallback;
}
Harada:
url('custom-cursor.png'): kursor şəkilinə yol göstərirfallback: istifadəçi şəkli yüklənə bilməsə, istifadə olunan əvvəlcədən müəyyən olunmuş dəyər
Kastom kursorların istifadəsinə nümunə:
.custom-cursor {
cursor: url('https://via.placeholder.com/32'), auto;
padding: 10px;
border: 1px solid black;
}
<body>
<div class="custom-cursor">Kastom kursor</div>
</body>
Kastom kursorlar üçün spesifikasiyalar və məhdudiyyətlər:
- Şəkil formatları:
.cur,.png,.jpg,.gifformatları dəstəklənir. - Şəkil ölçüləri: daha yaxşı performans və uyğunluq üçün 32x32 piksel və ya daha kiçik ölçüdə şəkillərdən istifadə məsləhət görülür.
- Klik nöqtəsinin koordinatları: kursor şəklində klik nöqtəsinin koordinatları (hotspot) təyin edilə bilər. Əsas olaraq bu, sol yuxarı küncdür (0,0).
10.3 İstifadəçi kursorlarının detalları
Şəkil formatları
İstifadəçi kursorları müxtəlif formatlarda ola bilər, məsələn PNG, GIF, JPG və SVG. Şəffaflıq dəstəyi olan formatlardan istifadə etmək tövsiyə olunur (məsələn, PNG), belə ki, kursor hər hansı bir fonun üstünə düzgün görünər.
Şəkil ölçüləri
Kursor şəkilləri çox böyük olmamalıdır. Tövsiyə olunan ölçülər — 32x32 piksel və ya daha kiçikdir. Böyük şəkillər bəzi brauzerlərdə düzgün göstərilməyə bilər.
Fokus koordinatlarının təyin edilməsi
Fokus koordinatlarını (qaynar nöqtə) şəkilin URL-indən sonra əlavə dəyərlər vasitəsilə təyin etmək olar.
Sintaksis
element {
cursor: url("custom-cursor.png") x y, fallback;
}
Harada:
xvəy: Şəklin sol üst küncünə nisbətən fokus koordinatları.
Fokus koordinatlı istifadə qaydası nümunəsi:
.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">Fokuslu kastom kursor</div>
</body>
Kod izahı:
.custom-cursor-focus: Fokus koordinatlarını (16, 16) istifadə edən kastom kursor yaradır, bu da görüntünün mərkəzini qaynar nöqtə edir.
Praktiki tətbiqi:
- UI/UX təkmilləşdirilməsi: İstifadəçi kursorlarından istifadə interfeysi xeyli inkişaf etdirərək onu daha intuitiv və estetik cəhətdən cəlbedici edir.
- İnteraktiv elementlər: Kastom kursorlar düymələr, keçidlər, ikonlar və s. kimi interaktiv elementlərdə istifadə oluna bilər.
- Oyunlar və tətbiqlər: Oyunlar və veb tətbiqlərdə kastom kursorlar unikal stil və atmosfer yaratmağa kömək edir.
GO TO FULL VERSION