CSS có thể kiểm soát hình dạng của con trỏ. Có rất nhiều tùy chọn có sẵn cho chúng ta và chúng ta đã đề cập đến chúng một cách kỹ lưỡng trong Almanac tại CSS-Tricks.
Tuy nhiên, dễ dàng bỏ sót con trỏ và tác động của chúng đến trải nghiệm người dùng trên trang web của chúng ta. Bạn có nhớ khi chúng ta học về ::selection là một thuộc tính và mọi trang web bắt đầu sử dụng nó để cá nhân hóa màu nền của văn bản được chọn? Tùy chỉnh con trỏ cũng rất dễ dàng và thêm bớt phong cách khi sử dụng đúng cách.
Trong bài viết này, tôi sẽ giới thiệu hai cách mà tôi nghĩ việc kiểm soát con trỏ trong CSS có thể cải thiện trải nghiệm người dùng.
Sử dụng Con trỏ Đúng trên Một Phần Tử
Một số thay đổi con trỏ đã được tích hợp sẵn trong User Agent Stylesheet. Hãy xem các liên kết làm ví dụ. Ngay cả khi chúng ta không làm gì khác trong CSS của chúng ta, các liên kết vẫn được mặc định có color: blue; và text-decoration: underline;. Điều này là một chỉ báo hình ảnh rõ ràng rằng văn bản liên kết có thể được nhấp vào.
Trình duyệt có thể điều chỉnh thêm. Rê chuột qua các liên kết và con trỏ sẽ thay đổi từ mũi tên đen mặc định thành một cái tay với ngón trỏ duỗi ra, còn được gọi là con trỏ.
Chúng ta có thể sử dụng các điều khiển con trỏ có sẵn như thế này
Có một số trường hợp mà cách hiển thị con trỏ mặc định từ User Agent Stylesheet không phù hợp. Trong những trường hợp như vậy, chúng ta nên thay đổi con trỏ thành một cái gì đó phản ánh hành vi tương tác người dùng kỳ vọng với phần tử đó.
Hãy xem chức năng jQueryUI draggable(). Chúng ta có thể áp dụng chức năng này cho một phần tử và cho phép người dùng nhấp vào và kéo phần tử đó trong khung nhìn, nhưng người dùng sẽ không biết điều đó nếu con trỏ vẫn ở trạng thái mặc định. Thêm cursor: move; vào phần tử sẽ giải quyết vấn đề đó.
Dưới đây là một ví dụ về tất cả những gì hiện có:
Chúng ta cũng có thể áp dụng chức năng này cho nhiều tình huống khác nhau, bao gồm các biểu mẫu nhập, hình ảnh hoặc bất cứ thứ gì khác mà bạn có thể tưởng tượng. Luôn luôn tận dụng cơ hội để phù hợp hình ảnh con trỏ của một phần tử với hành vi của nó khi mũi tên mặc định không đủ để hiểu rõ.
Sử dụng Con trỏ Tùy chỉnh để Nâng cao Một Phần Tử
Còn con trỏ tùy chỉnh thì sao? Đó là, một hình ảnh mà bạn tự tạo để thay thế cho con trỏ. Tất nhiên nó được thực hiện được!
Chúng ta có thể chỉ đến thuộc tính con trỏ cho một hình ảnh như sau:
.module { cursor: url('nhớt đến hình ảnh.png'), auto; }
Tôi thấy điều này rất hữu ích khi chỉ cần thêm một chút cá nhân hóa phù hợp nhưng người dùng có thể không mong đợi. Ví dụ, một biểu mẫu mà câu trả lời cho một câu hỏi tương ứng với một cảm xúc cụ thể:
Dưới đây là một ví dụ về cách làm việc với emoji. Bạn có thể sao chép và dán emoji từ một trang web như này, sau đó dán nó vào một trình chỉnh sửa văn bản và lưu nó dưới dạng PDF, sau đó có thể mở trong Illustrator. Từ đó, tôi đã có thể chọn hình ảnh, dán nó vào Photoshop và tạo một hình ảnh PNG với nền trong suốt. Voilà!
Đối với những bạn tò mò về SVG, tôi vui mừng thông báo rằng nó hoạt động! Thuộc tính con trỏ chấp nhận tệp SVG trong toàn bộ sự vinh quang của nó. Tuy nhiên, không có định dạng GIF động, thật đáng tiếc.
Vì vậy không có con trỏ động, trừ khi bạn làm điều gì đó điên rồ như ẩn con trỏ (cursor: none;), theo dõi vị trí của chuột bằng JavaScript và hiển thị hoàn toàn tùy chỉnh.
Ê, như thế này đây!
Dưới đây là một số ví dụ từ các trang web khác nhau
Thật khó để tìm các ví dụ tốt về con trỏ tùy chỉnh hơn những gì bạn có thể tưởng. Có lẽ nó không được sử dụng rộng rãi như các tính năng CSS khác hoặc đây là một điều chúng ta đang cố gắng tìm hiểu, nhưng đây là một số trang web mà nó đã được sử dụng tốt.
- Portfolio của Denis Rouve
- Con trỏ emoji thập kỷ 90
- Con trỏ Gooey
- Con trỏ Cairo
- jQuery Awesome Cursor
Đọc thêm
- Con trỏ trong Almanac
- Sử dụng giá trị URL cho thuộc tính con trỏ trên MDN
- Mô-đun Giao diện Người dùng Cơ bản CSS Cấp độ 3
- Demo tất cả các con trỏ có sẵn
Hết
