toolsmoah

Trình tạo con trỏ CSS

Một công cụ để tạo và xem trước các kiểu con trỏ CSS2, CSS3 và con trỏ tùy chỉnh.

Con trỏ CSS2Hỗ trợ toàn cầu

auto
Nhấp để sao chép
inherit
Nhấp để sao chép
crosshair
Nhấp để sao chép
default
Nhấp để sao chép
help
Nhấp để sao chép
move
Nhấp để sao chép
pointer
Nhấp để sao chép
progress
Nhấp để sao chép
text
Nhấp để sao chép
wait
Nhấp để sao chép
e-resize
Nhấp để sao chép
ne-resize
Nhấp để sao chép
nw-resize
Nhấp để sao chép
n-resize
Nhấp để sao chép
se-resize
Nhấp để sao chép
sw-resize
Nhấp để sao chép
s-resize
Nhấp để sao chép
w-resize
Nhấp để sao chép

Con trỏ CSS3Trình duyệt hiện đại

none
not IE, Safari, Opera
Nhấp để sao chép
context-menu
not Firefox, Chrome
Nhấp để sao chép
cell
not Safari
Nhấp để sao chép
vertical-text
Nhấp để sao chép
alias
not Safari
Nhấp để sao chép
copy
not Safari
Nhấp để sao chép
no-drop
Nhấp để sao chép
not-allowed
Nhấp để sao chép
ew-resize
Nhấp để sao chép
ns-resize
Nhấp để sao chép
nesw-resize
Nhấp để sao chép
nwse-resize
Nhấp để sao chép
col-resize
Nhấp để sao chép
row-resize
Nhấp để sao chép
all-scroll
Nhấp để sao chép
grab
only Webkit and Firefox
Nhấp để sao chép
grabbing
only Webkit and Firefox
Nhấp để sao chép
zoom-in
only Webkit and Firefox
Nhấp để sao chép
zoom-out
only Webkit and Firefox
Nhấp để sao chép

Con trỏ tùy chỉnhNâng cao

Con trỏ dựa trên 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

Các định dạng được hỗ trợ

.cur
.png
.jpg
.gif

Ví dụ sử dụng

/* CSS */ cursor: url('custom-cursor.png') 16 16, pointer;

Con trỏ dựa trên 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

Các định dạng được hỗ trợ

.cur
.png
.jpg
.gif

Ví dụ sử dụng

/* CSS */ cursor: url('custom-cursor.png') 16 16, pointer;

Cân nhắc về khả năng truy cập

  • • Cung cấp các tín hiệu trực quan bổ sung thay vì chỉ dựa vào con trỏ để thể hiện chức năng
  • • Sử dụng các con trỏ có thể nhìn thấy ở chế độ tương phản cao
  • • Sử dụng các con trỏ hoạt hình một cách tiết kiệm khi xem xét các cài đặt khả năng truy cập
  • • Cung cấp các chỉ báo tiêu điểm cho người dùng điều hướng bằng bàn phím

Tối ưu hóa hiệu suất

  • • Tải trước hình ảnh con trỏ tùy chỉnh để tránh bị trễ
  • • Sử dụng CSS sprites để giảm các yêu cầu HTTP
  • • Tránh các thay đổi con trỏ không cần thiết để cải thiện hiệu suất
  • • Hãy xem xét rằng các con trỏ tùy chỉnh không được hiển thị trong môi trường di động
    Trình tạo con trỏ CSS | toolsmoah