Công cụ này làm gì
Box shadow là vùng tối mềm hoặc cứng làm cho thẻ, nút hay menu trông như nổi lên khỏi trang. Trong CSS đó là một thuộc tính, box-shadow, nhưng mỗi bóng có tới sáu giá trị và có thể có nhiều bóng, rất khó hình dung chỉ qua con số. Công cụ này cho bạn dựng bóng bằng cách đổi con số và xem thẻ thay đổi, rồi đưa mã CSS để sao chép. Bạn có thể xếp tối đa tám lớp, dùng bóng inset, chọn màu có độ trong suốt và dán một box-shadow có sẵn để chỉnh sửa. Mọi thứ chạy trong trình duyệt và không có gì được tải lên.
Ý nghĩa từng con số
Cú pháp của một bóng là inset? offset-x offset-y blur spread color. Hai độ lệch đẩy bóng sang phải và xuống dưới; giá trị âm đẩy sang trái và lên trên. Độ mờ làm mềm mép: đặc tả yêu cầu làm mờ Gauss với độ lệch chuẩn bằng một nửa giá trị mờ, nên độ mờ 30px tắt dần trong khoảng 30px. Giá trị này không bao giờ âm. Độ lan phình bóng ra mọi hướng trước khi làm mờ, hoặc thu nhỏ nếu âm. Độ lan âm kèm độ lệch dọc lớn cho vẻ "nổi lên", vì bóng nhỏ hơn thẻ và chỉ lộ ra bên dưới. Độ lan 4px không mờ, không lệch là một đường viền thuần, cách mẫu Phát sáng vẽ vòng của nó. Bóng theo border-radius của thẻ và không làm thay đổi bố cục xung quanh.
Nhiều lớp trông thật hơn
Ánh sáng thật không tạo một bóng đều. Gần vật, bóng nhỏ và đậm; xa hơn, bóng rộng và nhạt. Mẫu Nhiều lớp mô phỏng điều này với năm bóng, mỗi bóng gấp đôi bóng trước và đều có độ đục 8%: 0 1px 1px, 0 2px 2px, 0 4px 4px, 0 8px 8px và 0 16px 16px. Tổng của chúng mượt hơn một bóng đơn có cùng tổng độ mờ. Trong CSS các bóng cách nhau bằng dấu phẩy và bóng đầu tiên nằm trên cùng, nên thứ tự quan trọng khi các lớp chồng nhau.
Màu, định dạng và nền tối
Bóng đẹp nhất khi dùng màu tối trong suốt thay vì xám đặc, vì màu trang xuyên qua và bóng mang sắc của nó. Độ đục là một phần của màu: rgba(0, 0, 0, 0.15) và mã hex #00000026 là cùng một màu, bạn chọn định dạng nào cũng được. Trên nền tối, bóng đen gần như vô hình, nên hãy dùng độ lệch lớn hơn, độ đục mạnh hơn hoặc ánh sáng có màu.
drop-shadow() và điều cần biết
filter: drop-shadow() là họ hàng của box-shadow, bám theo đường viền nhìn thấy của hình, hợp với ảnh PNG có góc trong suốt hay biểu tượng SVG. Nó không có độ lan và không có inset, nên công cụ chỉ đưa phiên bản đó cho các lớp không dùng hai thứ này. Box shadow được vẽ bên ngoài khung phần tử, nên phần tử cha có overflow: hidden sẽ cắt mất. Hoạt ảnh với độ mờ lớn có thể tốn tài nguyên. Ở chế độ màu bắt buộc (độ tương phản cao), trình duyệt bỏ box shadow, nên đừng chỉ dựa vào bóng để hiện vòng focus. Kết hợp với tạo gradient CSS và kiểm tra màu chữ bằng công cụ màu sắc.
