10.1 Thuộc tính cursor
CSS cung cấp khả năng thay đổi diện mạo của con trỏ khi di chuột đến các phần tử bằng thuộc tính cursor.
Thuộc tính này cho phép đặt nhiều loại con trỏ khác nhau, cải thiện tính tương tác và sự hấp dẫn thị giác của trang web.
Thuộc tính cursor xác định hình dạng của con trỏ chuột khi nó nằm trên một phần tử. Giá trị có thể là
các hình ảnh định sẵn hoặc tùy chỉnh.
Cú pháp:
element {
cursor: value;
}
Giá trị:
Thuộc tính cursor hỗ trợ nhiều giá trị, có thể chia thành các giá trị định sẵn và tùy chỉnh.
Các giá trị định sẵn:
default: con trỏ mặc địnhpointer: con trỏ hình bàn tay, thường dùng cho các liên kếttext: con trỏ dạng chữ (hình chữ I), thường dùng cho các trường văn bảnmove: con trỏ di chuyểnwait: con trỏ dạng đồng hồ cát hoặc chỉ báo chờhelp: con trỏ dạng dấu hỏicrosshair: con trỏ dạng tâm ngắmnot-allowed: con trỏ dạng dấu cấm (vòng tròn gạch chéo)grabvàgrabbing: con trỏ để kéo thả các phần tử
Ví dụ sử dụng các giá trị định sẵn:
.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">Con trỏ mặc định</div>
<div class="pointer-cursor">Con trỏ bàn tay</div>
<div class="text-cursor">Con trỏ chữ</div>
10.2 Giá trị tùy chỉnh (con trỏ tùy chỉnh)
Thuộc tính cursor cũng hỗ trợ sử dụng hình ảnh tùy chỉnh làm con trỏ.
Để làm điều này, sử dụng giá trị url.
Cú pháp:
element {
cursor: url("custom-cursor.png"), fallback;
}
Ở đâu:
url('custom-cursor.png'): chỉ định đường dẫn đến hình ảnh của con trỏfallback: giá trị định sẵn được sử dụng nếu hình ảnh tùy chỉnh không thể tải lên
Ví dụ sử dụng các con trỏ tùy chỉnh:
.custom-cursor {
cursor: url('https://via.placeholder.com/32'), auto;
padding: 10px;
border: 1px solid black;
}
<body>
<div class="custom-cursor">Con trỏ tùy chỉnh</div>
</body>
Đặc điểm và hạn chế cho con trỏ tùy chỉnh:
- Định dạng hình ảnh: hỗ trợ các định dạng
.cur,.png,.jpg,.gif. - Kích thước hình ảnh: nên sử dụng hình ảnh có kích thước 32x32 pixel hoặc nhỏ hơn để đạt hiệu suất và tương thích tốt nhất.
- Tọa độ điểm nhấn: trong hình ảnh con trỏ có thể đặt tọa độ điểm nhấn (hotspot). Mặc định là góc trên bên trái (0,0).
10.3 Chi tiết sử dụng con trỏ tùy chỉnh
Định dạng hình ảnh
Con trỏ tùy chỉnh có thể ở nhiều định dạng khác nhau như PNG, GIF, JPG và SVG. Nên sử dụng các định dạng hỗ trợ trong suốt (ví dụ: PNG) để con trỏ hiển thị đúng trên mọi nền.
Kích thước hình ảnh
Hình ảnh của con trỏ không nên quá lớn. Kích thước đề xuất là 32x32 pixel hoặc nhỏ hơn. Hình ảnh lớn có thể không hiển thị đúng trong một số trình duyệt.
Chỉ định tọa độ tiêu điểm
Có thể chỉ định tọa độ tiêu điểm (điểm nóng) của con trỏ bằng cách sử dụng giá trị bổ sung sau URL của hình ảnh.
Cú pháp
element {
cursor: url("custom-cursor.png") x y, fallback;
}
Ở đâu:
xvày: tọa độ tiêu điểm so với góc trên bên trái của hình ảnh.
Ví dụ sử dụng với tọa độ tiêu điểm:
.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">Con trỏ tùy chỉnh với tiêu điểm</div>
</body>
Giải thích mã:
.custom-cursor-focus: thiết lập con trỏ tùy chỉnh với tọa độ tiêu điểm (16, 16), làm cho trung tâm của hình ảnh trở thành điểm nhấn.
Ứng dụng thực tế:
- Cải thiện UI/UX: sử dụng con trỏ tùy chỉnh có thể cải thiện đáng kể giao diện người dùng, làm cho nó trở nên trực quan hơn và thẩm mỹ hơn.
- Các phần tử tương tác: con trỏ tùy chỉnh có thể được áp dụng cho các phần tử tương tác như nút, liên kết, biểu tượng, v.v.
- Trò chơi và ứng dụng: trong trò chơi và ứng dụng web, con trỏ tùy chỉnh giúp tạo ra phong cách và không khí độc đáo.
GO TO FULL VERSION