[ad_1]
Nếu chúng ta định định kiểu hộp kiểm cho tương lai, nó không chỉ cần có tính thẩm mỹ mà còn có thể điều hướng bằng bàn phím cho trình đọc màn hình. Đây là gần năm 2020, yo, hãy để phong cách giống như nó.
Có rất nhiều bản demo tuyệt vời ngoài các hộp kiểm lạ mắt. Tất cả đều bao gồm một số phiên bản ẩn hộp kiểm OG và tạo kiểu cho nhãn và / hoặc các phần tử giả. Tuy nhiên, nhiều trong số các hộp kiểm mát này không tính đến khả năng truy cập.
Có một người đàn ông tuyệt vời đã tạo ra thử thách https://100dayscss.com và truyền cảm hứng cho tôi với ngày số 66. Tôi không chỉ muốn dạy làm thế nào điều này có thể được thực hiện, mà còn có thể thực hiện được như thế nào.
$ cb: khối-bezier (0,17, 0,67, 0,83, 0,67);
$ hộp kiểm-kích thước: 1,5em;
đầu vào [type="checkbox"] {
@extend .center;
độ mờ đục: 0;
sự kiện con trỏ: không có;
& + nhãn {
@extend .center;
chiều rộng: $ hộp-kích thước;
chiều cao: $ hộp-kích thước;
bán kính biên giới: 50%;
viền: màu trắng 2px;
con trỏ: con trỏ;
hộp bóng: 1px 1px 1px 1px rgba (3, 79, 32, 0,5);
chuyển tiếp: bóng hộp 0,4s $ cb, nền 0,4s $ cb;
}
&: đã kiểm tra + nhãn {
màu nền: tím;
box-Shadow: 1px 1px 1px 1px rgba (3, 79, 32, 0.5), 0 0 0 5px in màu trắng;
}
}
Ở đây chúng tôi đang chọn và tạo kiểu cho hộp kiểm và nhãn của chúng tôi cho trạng thái bình thường và: đã kiểm tra. Chúng tôi muốn hộp kiểm OG biến mất. Chúng tôi có thể sử dụng một cái gì đó như màn hình : none; cho việc này, tuy nhiên, điều đó không hữu ích cho trình đọc màn hình. Vì vậy, một cách khác để thực hiện điều này là đưa ra hộp kiểm độ mờ: 0; và các sự kiện con trỏ: none; .
Thông thường, phương pháp điều trị biến mất thay thế này sẽ đi kèm với khả năng hiển thị : none; . Tuy nhiên, việc đặt chế độ hiển thị thành không có ở đây thực sự vô hiệu hóa việc bật nhãn bằng bàn phím (đối với khả năng truy cập là không có bueno). Vì vậy, chúng tôi sẽ rời khỏi tầm nhìn tắt.
Sau đó, chúng tôi đang tạo kiểu cho nhãn trông giống như phiên bản ưa thích này của bong bóng điền vào hoặc hộp kiểm:
Ở đây chúng tôi có một vài biến số ( $ distance, $ height, $ offset ) mà chúng tôi sẽ sử dụng để tạo / định vị các đường biểu thức, cũng như tạo hiệu ứng cho chúng trong bước tiếp theo.
$ khoảng cách: 1.125em; // 18px
$ chiều cao: 1,25em; // 20px
$ bù: 1,25em; // 20px
.expression-lines {
chiều cao: $ chiều cao;
chiều rộng: 1px;
màu nền: trắng;
đáy: $ khoảng cách;
vị trí: tuyệt đối;
biến đổi-nguồn gốc: trung tâm $ chiều cao + $ khoảng cách;
$ dòng: 12;
@cho $ i từ 1 đến $ dòng {
&: loại thứ n (# {$ i}) {
biến đổi: xoay (360deg / $ dòng * $ i);
}
}
}
Chúng tôi đang cung cấp cho mỗi dòng biểu thức có chiều cao 20px trong khả năng mở rộng; Vì vậy, hãy tiếp tục, cung cấp cho cơ thể kích thước phông chữ 200% và xem quy mô con chó con này! Chúng cũng được cho chiều rộng 1px, màu trắng và một số định vị với đáy, vị trí và gốc biến đổi.
Vòng lặp tuyệt vời mà bạn thấy chỉ đơn giản là trải đều chúng ra xung quanh hộp kiểm. Vì vậy, chúng tôi nhận được hiệu ứng này:
$ bù: 1,25em; // 20px
đầu vào [type="checkbox"]: đã kiểm tra ~ .expression-lines {
hoạt hình: mùa xuân 0,6s dễ dàng chuyển tiếp;
}
@keyframes mùa xuân {
0% {
độ mờ đục: 1;
chiều cao: 0px;
biến đổi-nguồn gốc: trung tâm $ khoảng cách;
}
100%
chiều cao: $ chiều cao;
dưới cùng: $ distance + $ offset;
biến đổi gốc: trung tâm $ height + $ distance + $ offset;
}
}
Khung hình lò xo được sử dụng cho các dòng biểu thức của chúng tôi, để phát triển chúng và di chuyển chúng cùng một lúc. Nguồn gốc biến đổi là rất quan trọng, chúng ta cần thay đổi điều này khi chúng ta tạo hiệu ứng cho các dòng biểu thức ra khỏi hộp kiểm, để chúng "phát triển" đều.
Xem Bút
Tạo một hộp kiểm giống như nó 2020 2020 bởi Alyssa Nicoll (@alyssamichelle)
trên CodePen.
Bước 4: Kiểm tra khả năng truy cập với ChromeVox
Như tôi đã đề cập khi chúng tôi xây dựng hộp kiểm của mình, hiển thị: none; được biết là khá không thân thiện với trình đọc màn hình, cũng như khả năng hiển thị : none; . Vì vậy, hãy để kiểm tra cách thức hộp kiểm của chúng tôi hoạt động mà không sử dụng một trong hai phương pháp đó.
Trong video này, tôi sử dụng ChromeVox làm trình đọc màn hình. Khi tôi nhấn tab, hộp kiểm sẽ tự động được chọn. Sau đó tôi có thể chuyển đổi giữa đã kiểm tra và không được kiểm tra bằng cách sử dụng thanh không gian!
Để cho bạn thấy điều gì xảy ra (chuẩn bị cho trò đùa) khi chúng tôi sử dụng một trong các dòng mã trên, tôi đã thêm hiển thị: none; vào hộp kiểm và thử lại!
Bây giờ, khi tôi thử gắn thẻ vào hộp kiểm, nhãn hộp kiểm mà chúng tôi đã tạo kiểu sẽ biến mất hoàn toàn. Tôi tiếp tục thử bằng cách chọn hộp kiểm vô hình bằng chuột (không truy cập được trên nhiều tài khoản) và sau đó tôi thử chuyển đổi giữa đã kiểm tra và không được chọn bằng cách sử dụng thanh dấu cách. Như bạn có thể thấy, không có gì xảy ra. Vì vậy, chỉ cần đặt, TLDR, don hiến sử dụng hiển thị : none; hoặc khả năng hiển thị: none; khi cố gắng tạo hiệu ứng / tạo hình ảnh đáng yêu lạ mắt bằng CSS của bạn.
Bước 5: Nhận ngay cả Fancier với CSS của chúng tôi
Ban đầu khi tôi thực hiện thử thách này, tôi đã sử dụng các yếu tố giả và chỉ có bốn div để tạo ra tất cả 12 dòng biểu thức:
Sử dụng các yếu tố giả cho các dòng nhãn và biểu thức (ít đánh dấu)
Đây chỉ là cách não tôi nghĩ đến đầu tiên khi thực hiện thử thách này. Nó ít đánh dấu hơn nhưng CSS phức tạp hơn, vì vậy tôi quyết định đơn giản hóa việc giảng dạy trong bài viết này. Tuy nhiên, tôi muốn thể hiện điều đó ở đây, trong trường hợp bạn là một siêu mọt sách CSS và thích thú với việc tạo ra một kỳ tích như vậy.
Không có Vòng tử thần bên trong
Kiểm tra nó ở đây. Ví dụ này không chỉ bao gồm việc sử dụng phần tử giả vui nhộn, mà còn loại bỏ vòng dư lượng nhỏ bên trong do tôi tạo ra bóng của hộp bên trong để làm cho vòng tròn phát triển.
Trước:
Xem Bút
Hộp kiểm có thể truy cập tùy chỉnh – KHÔNG CÓ RING OF DEATH của Alyssa Nicoll (@alyssamichelle)
trên CodePen.
Tôi hy vọng bạn đã học được điều gì đó thú vị từ hộp kiểm này! Hãy nhớ luôn luôn giữ khả năng tiếp cận ở phía sau tâm trí của bạn trong khi tạo. Chúng ta luôn có thể làm tốt hơn. 🙂
Mã hóa hạnh phúc!
[ad_2]
Source link: webdesignernews