Tạo box shadow CSS

Cách sử dụng

1. Bắt đầu từ một mẫu dựng sẵn — đó là công thức hai lớp, không phải một bóng đơn.
2. Chỉnh độ dịch, độ mờ, độ lan và màu của từng lớp, thêm lớp mới nếu cần chiều sâu hơn.
3. Kiểm tra trên cả hai nền: bóng chỉnh trên nền trắng thường biến mất trên nền tối.
4. Sao chép khai báo CSS, hoặc dán một box-shadow có sẵn vào để chỉnh.

Tính năng

• Làm việc theo lớp, vì chiều sâu thật là một bóng tiếp xúc đậm và hẹp cộng với một bóng rộng và mềm — một bóng mờ duy nhất chính là thứ tạo ra quầng xám quanh thẻ.
• Đọc ngược được bóng có sẵn từ CSS, kể cả giá trị nhiều lớp, nên bạn chỉnh cái đang có thay vì dựng lại từ đầu.
• Xử lý đúng dấu phẩy bên trong rgba() khi phân tích — chỗ mà cách tách chuỗi ngây thơ luôn hỏng.
• Hỗ trợ bóng trong (inset) cho hiệu ứng nhấn lõm, ở bất kỳ lớp nào.
• Xem trước trên nền sáng và nền tối, vì độ mờ đủ thấy trên nền trắng có thể hoàn toàn vô hình trên nền xám đậm.

Câu hỏi thường gặp

Vì sao các mẫu dựng sẵn dùng hai bóng thay vì một?

Vì chiều sâu thật trông như vậy. Một bề mặt nhô lên tạo bóng nhỏ và khá đậm ở chỗ gần chạm mặt giấy, cùng một bóng lớn hơn và mềm hơn nhiều lan ra ngoài. Một bóng duy nhất với độ mờ lớn và màu đen 40% chính là quầng xám bẹt mà các hệ thống thiết kế đã bỏ từ lâu. Thêm lớp gần như không tốn gì — trình duyệt vẽ tất cả trong một lượt.

Lớp nào nằm trên?

Lớp đầu tiên trong danh sách. Bóng được vẽ theo thứ tự, nên bóng tiếp xúc hẹp phải viết trước và lớp môi trường rộng nằm dưới nó. Viết ngược thứ tự này là lý do phổ biến khiến bóng nhiều lớp tự gõ tay trông đục và bẩn.

Độ mờ và độ lan khác nhau ra sao?

Độ lan thay đổi kích thước bóng trước khi làm mờ; độ mờ làm nhoè viền của nó. Độ lan âm kết hợp độ mờ lớn chính là mẹo đằng sau hầu hết hiệu ứng nổi hiện đại: bóng được kéo sát vào dưới phần tử rồi toả mềm ra ngoài, cho cảm giác chiều sâu chứ không phải một đường viền.

Vì sao bóng của tôi biến mất ở chế độ tối?

Vì bóng hoạt động bằng cách làm tối phần nền phía sau, mà nền tối thì gần như không còn gì để làm tối thêm. Giao diện tối thường thể hiện độ nổi bằng cách khác — dùng màu bề mặt sáng hơn, thêm viền trên mảnh, hoặc dùng bóng có độ mờ cao hơn nhiều và độ lan lớn hơn. Hãy dùng nút chuyển nền ở đây để kiểm tra trước khi phát hành.

Công cụ liên quan