Trình tạo box-shadow CSS kèm xem trước thẻ | We.Inc
Tạo box-shadow CSS nhiều lớp và xem trên các thẻ dịch vụ và bảng giá thực tế, trên nền sáng và tối, với trạng thái focus dễ thấy. Sao chép CSS và một thành phần thẻ dựng sẵn.
Rất khó đánh giá bóng đổ trên một ô vuông màu xám. Ở đây bạn tinh chỉnh một box-shadow nhiều lớp và xem nó trên thẻ dịch vụ và thẻ bảng giá, trên trang sáng hoặc tối, với vòng focus bàn phím mà bạn có thể thử bằng phím Tab. Sao chép CSS hoặc cả thành phần thẻ khi nó trông ổn. Mọi thứ chạy trong trình duyệt của bạn. Không có gì bạn nhập được gửi đến We.Inc hay bất kỳ ai khác, và nó biến mất khi bạn đóng tab.
Bắt đầu từ một cấu hình có sẵn hoặc chỉnh lớp đầu tiên: độ lệch ngang và dọc, độ mờ, độ lan, màu, độ mờ đục và inset.
Thêm tối đa năm lớp. Bóng nhiều lớp (một lớp sắc nét cộng một lớp rộng và mềm) trông tự nhiên hơn một bóng lớn duy nhất.
Chuyển bản xem trước giữa trang sáng và tối. Nhấn Tab để chuyển focus sang các nút của thẻ và kiểm tra vòng focus vẫn hiển thị.
Các kiểm tra cảnh báo khi bóng quá mờ để thấy trên nền đã chọn và khi chữ trên thẻ thấp hơn độ tương phản WCAG AA.
Sao chép khai báo box-shadow, hoặc cả thành phần thẻ với HTML và CSS.
Trên nền tối, bóng gần như biến mất. Hãy dùng màu thẻ sáng hơn một chút hoặc viền mỏng để tách thẻ ra.
Giữ màu bóng ngả về màu nền thay vì đen thuần để có vẻ mềm hơn.
Đừng bao giờ chỉ dựa vào bóng để hiển thị focus. Hãy dùng thêm một đường viền rõ ràng.
Giá trị độ mờ lớn tốn kém hơn khi vẽ. Tránh tạo hiệu ứng động cho chúng trên các danh sách dài.
Dùng một hoặc hai mức bóng trên toàn site để chiều sâu có ý nghĩa.
Câu hỏi thường gặp
Thuộc tính CSS box-shadow hoạt động thế nào?
box-shadow nhận độ lệch ngang, độ lệch dọc, bán kính mờ tùy chọn, độ lan tùy chọn và một màu, cùng từ khóa inset cho bóng bên trong. Có thể liệt kê nhiều bóng, phân tách bằng dấu phẩy; bóng đầu tiên được vẽ ở trên cùng.
Vì sao bóng nhiều lớp trông đẹp hơn?
Vật thể thật đổ một bóng sắc nét gần nó và một bóng mềm, rộng ở xa hơn. Hai hoặc ba lớp với độ mờ tăng dần và độ mờ đục giảm dần mô phỏng điều đó.
Vì sao bóng của tôi không thấy trên nền tối?
Bóng tối trên trang tối gần như không có tương phản. Công cụ cảnh báo bạn về điều này. Hãy nâng thẻ lên bằng màu bề mặt sáng hơn hoặc một viền tinh tế.
box-shadow có ảnh hưởng đến khả năng tiếp cận không?
Bóng chỉ là trang trí, nên bản thân chúng không cần đáp ứng quy tắc tương phản. Điều quan trọng là chữ trên thẻ vẫn dễ đọc và focus được hiển thị bằng đường viền dễ thấy, không chỉ bằng thay đổi bóng.
Trình tạo bóng CSS có miễn phí không?
Có, không cần đăng ký. Sao chép mã vào bất kỳ dự án nào.
Thử bóng trên các thành phần bạn sẽ phát hành
Một cái bóng trông ổn trên một ô vuông đơn lẻ có thể trông nặng trên một hàng thẻ bảng giá hoặc biến mất dưới một bức ảnh. Xem trước nó trên các thẻ mà một site doanh nghiệp nhỏ thực sự dùng, một thẻ dịch vụ có biểu tượng và một gói giá được làm nổi bật, cho thấy kết quả bạn sẽ nhận được.
Mã thành phần bao gồm đường viền focus-visible, nên thẻ vẫn dùng được bằng bàn phím dù bạn chọn bóng nào.