مولد مؤشرات CSS
أداة لإنشاء ومعاينة أنماط مؤشرات CSS2 و CSS3 والمؤشرات المخصصة.
مؤشرات CSS2دعم عالمي
auto
انقر للنسخ
inherit
انقر للنسخ
crosshair
انقر للنسخ
default
انقر للنسخ
help
انقر للنسخ
move
انقر للنسخ
pointer
انقر للنسخ
progress
انقر للنسخ
text
انقر للنسخ
wait
انقر للنسخ
e-resize
انقر للنسخ
ne-resize
انقر للنسخ
nw-resize
انقر للنسخ
n-resize
انقر للنسخ
se-resize
انقر للنسخ
sw-resize
انقر للنسخ
s-resize
انقر للنسخ
w-resize
انقر للنسخ
مؤشرات CSS3المتصفحات الحديثة
none
not IE, Safari, Opera
انقر للنسخ
context-menu
not Firefox, Chrome
انقر للنسخ
cell
not Safari
انقر للنسخ
vertical-text
انقر للنسخ
alias
not Safari
انقر للنسخ
copy
not Safari
انقر للنسخ
no-drop
انقر للنسخ
not-allowed
انقر للنسخ
ew-resize
انقر للنسخ
ns-resize
انقر للنسخ
nesw-resize
انقر للنسخ
nwse-resize
انقر للنسخ
col-resize
انقر للنسخ
row-resize
انقر للنسخ
all-scroll
انقر للنسخ
grab
only Webkit and Firefox
انقر للنسخ
grabbing
only Webkit and Firefox
انقر للنسخ
zoom-in
only Webkit and Firefox
انقر للنسخ
zoom-out
only Webkit and Firefox
انقر للنسخ
المؤشرات المخصصةمتقدم
المؤشرات المعتمدة على الرابط
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
التنسيقات المدعومة
.cur
.png
.jpg
.gif
مثال الاستخدام
/* CSS */
cursor: url('custom-cursor.png') 16 16, pointer;
المؤشرات المعتمدة على الرابط
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
التنسيقات المدعومة
.cur
.png
.jpg
.gif
مثال الاستخدام
/* CSS */
cursor: url('custom-cursor.png') 16 16, pointer;
اعتبارات إمكانية الوصول
- • توفير إشارات بصرية إضافية بدلاً من الاعتماد فقط على المؤشرات للتعبير عن الوظيفة
- • استخدام مؤشرات مرئية في وضع التباين العالي
- • استخدام المؤشرات المتحركة بحذر مع مراعاة إعدادات إمكانية الوصول
- • توفير مؤشرات التركيز لمستخدمي التنقل بالمفاتيح
تحسين الأداء
- • تحميل صور المؤشرات المخصصة مسبقاً لمنع التأخير
- • استخدام CSS sprites لتقليل طلبات HTTP
- • تجنب تغييرات المؤشر غير الضرورية لتحسين الأداء
- • مراعاة أن المؤشرات المخصصة لا تظهر في البيئات المحمولة