เครื่องสร้าง CSS Cursor
เครื่องมือสำหรับสร้างและดูตัวอย่างสไตล์เคอร์เซอร์ 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
คลิกเพื่อคัดลอก
เคอร์เซอร์แบบกำหนดเองขั้นสูง
เคอร์เซอร์แบบ URL
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;
เคอร์เซอร์แบบ URL
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
- • หลีกเลี่ยงการเปลี่ยนแปลงเคอร์เซอร์ที่ไม่จำเป็นเพื่อปรับปรุงประสิทธิภาพ
- • พิจารณาว่าเคอร์เซอร์แบบกำหนดเองไม่แสดงในสภาพแวดล้อมมือถือ