CSS İmleç Oluşturucu
CSS2, CSS3 imleç stilleri ve özel imleçler oluşturmak ve önizlemek için bir araç.
CSS2 İmleçleriEvrensel Destek
auto
Kopyalamak için tıklayın
inherit
Kopyalamak için tıklayın
crosshair
Kopyalamak için tıklayın
default
Kopyalamak için tıklayın
help
Kopyalamak için tıklayın
move
Kopyalamak için tıklayın
pointer
Kopyalamak için tıklayın
progress
Kopyalamak için tıklayın
text
Kopyalamak için tıklayın
wait
Kopyalamak için tıklayın
e-resize
Kopyalamak için tıklayın
ne-resize
Kopyalamak için tıklayın
nw-resize
Kopyalamak için tıklayın
n-resize
Kopyalamak için tıklayın
se-resize
Kopyalamak için tıklayın
sw-resize
Kopyalamak için tıklayın
s-resize
Kopyalamak için tıklayın
w-resize
Kopyalamak için tıklayın
CSS3 İmleçleriModern Tarayıcılar
none
not IE, Safari, Opera
Kopyalamak için tıklayın
context-menu
not Firefox, Chrome
Kopyalamak için tıklayın
cell
not Safari
Kopyalamak için tıklayın
vertical-text
Kopyalamak için tıklayın
alias
not Safari
Kopyalamak için tıklayın
copy
not Safari
Kopyalamak için tıklayın
no-drop
Kopyalamak için tıklayın
not-allowed
Kopyalamak için tıklayın
ew-resize
Kopyalamak için tıklayın
ns-resize
Kopyalamak için tıklayın
nesw-resize
Kopyalamak için tıklayın
nwse-resize
Kopyalamak için tıklayın
col-resize
Kopyalamak için tıklayın
row-resize
Kopyalamak için tıklayın
all-scroll
Kopyalamak için tıklayın
grab
only Webkit and Firefox
Kopyalamak için tıklayın
grabbing
only Webkit and Firefox
Kopyalamak için tıklayın
zoom-in
only Webkit and Firefox
Kopyalamak için tıklayın
zoom-out
only Webkit and Firefox
Kopyalamak için tıklayın
Özel İmleçlerGelişmiş
URL Tabanlı İmleçler
cursor: url(images/cursor.cur), auto;# required by IE
cursor: url(images/cursor.png) x y, auto;# x y are hotspot coordinates
auto is the fallback cursor when custom cursor fails to load
Desteklenen Formatlar
.cur
.png
.jpg
.gif
Örnek Kullanım
/* CSS */
cursor: url('custom-cursor.png') 16 16, pointer;
URL Tabanlı İmleçler
cursor: url(images/cursor.cur), auto;# required by IE
cursor: url(images/cursor.png) x y, auto;# x y are hotspot coordinates
auto is the fallback cursor when custom cursor fails to load
Desteklenen Formatlar
.cur
.png
.jpg
.gif
Örnek Kullanım
/* CSS */
cursor: url('custom-cursor.png') 16 16, pointer;
Erişilebilirlik Değerlendirmeleri
- • İşlevselliği ifade etmek için yalnızca imleçlere güvenmek yerine ek görsel ipuçları sağlayın
- • Yüksek kontrast modunda görülebilen imleçler kullanın
- • Erişilebilirlik ayarlarını dikkate alarak animasyonlu imleçleri az kullanın
- • Klavye navigasyonu kullanıcıları için odak göstergeleri sağlayın
Performans Optimizasyonu
- • Gecikmeleri önlemek için özel imleç resimlerini önceden yükleyin
- • HTTP isteklerini azaltmak için CSS sprite'ları kullanın
- • Performansı artırmak için gereksiz imleç değişikliklerinden kaçının
- • Özel imleçlerin mobil ortamlarda görüntülenmediğini unutmayın