Trình tạo Box Shadow CSS

Giải phẫu thuộc tính box-shadow

Một box-shadow đơn lẻ là một chuỗi các giá trị theo một trật tự cố định: độ lệch ngang, độ lệch dọc, bán kính làm mờ, bán kính giãn và màu sắc, kèm theo từ khóa inset tùy chọn. Chỉ hai độ lệch và màu sắc là bắt buộc; độ mờ và độ giãn mặc định bằng không. Vậy nên dạng viết tắt đọc là 0px 4px 12px rgba(0, 0, 0, 0.15) có nghĩa là không dịch ngang, bốn pixel xuống dưới, mười hai pixel độ mờ, không giãn, và một màu đen ở mức 15 phần trăm. Các thanh trượt trong công cụ này viết ra đúng chuỗi đó cho bạn, nhưng việc hiểu rõ trật tự sẽ khiến việc chỉnh sửa bằng tay trở nên nhẹ nhàng.

Các độ lệch đặt bóng so với hộp. Một độ lệch dọc dương dời bóng xuống dưới, đó là điều bạn muốn cho ảo giác phổ biến về một nguồn sáng phía trên phần tử; một giá trị âm sẽ nâng bóng lên. Độ lệch ngang hoạt động tương tự theo chiều trái sang phải. Các độ lệch là tín hiệu lớn nhất mà não bạn dùng để đánh giá một phần tử đang lơ lửng cao đến đâu, nên hãy với tới chúng trước bất cứ thứ gì khác.

Độ mờ và độ giãn: hai bán kính mà người ta hay nhầm lẫn

Bán kính làm mờ điều khiển độ mềm của viền. Ở mức không, bạn có một bản sao của hộp với viền cứng; khi độ mờ tăng lên, bóng nhạt dần qua một dải rộng hơn và trông giống ánh sáng khuếch tán thật hơn. Hầu hết bóng tự nhiên dùng một độ mờ vào khoảng hai đến ba lần độ lệch dọc. Lưu ý rằng độ mờ không thể là số âm.

Độ giãn là giá trị mà gần như không ai đặt, vậy mà nó lại rất mạnh mẽ. Một độ giãn dương thổi phồng bóng ra mọi hướng trước khi áp dụng độ mờ, khiến nó lớn hơn hộp; một độ giãn âm làm nó co lại. Một độ giãn âm nhỏ kết hợp với một độ lệch xuống dưới và độ mờ rộng rãi chính là công thức kinh điển cho một chiếc bóng ôm sát bên dưới một thẻ thay vì rò ra hai bên. Độ giãn cũng là cách bạn vẽ một vòng đặc: độ lệch bằng không, độ mờ bằng không, vài pixel độ giãn dương, và một màu phẳng.

Bóng inset cho các bề mặt bị nhấn lõm

Thêm từ khóa inset sẽ vẽ bóng bên trong phần tử thay vì phía sau, nên bề mặt trông như được khắc lõm vào. Đây là cách bạn khiến một ô nhập liệu trông như một cái giếng, một công tắc trông như bị nhấn xuống, hay một bảng trông như được gắn chìm vào trang. Các độ lệch giờ đây hướng về phía cạnh trong nơi đón nhận bóng, nên một độ lệch xuống dưới sẽ làm tối cạnh trong phía trên, mô phỏng ánh sáng rọi xuống từ phía trên. Hãy bật tùy chọn Inset trong công cụ này để lật qua lại giữa bóng đổ ra ngoài và bóng đổ vào trong, và xem chính những con số đó đảo ngược ý nghĩa của chúng.

Xếp lớp nhiều bóng

Thuộc tính box-shadow chấp nhận một danh sách ngăn cách bởi dấu phẩy, và trình duyệt vẽ từng bóng theo thứ tự với cái đầu tiên nằm trên cùng. Đây là mẹo hữu ích nhất để tạo chiều sâu chân thực. Vật thể thật không đổ một chiếc bóng duy nhất; chúng đổ một bóng tiếp xúc chặt và tối hơn ngay dưới mép, cùng một bóng môi trường rộng và nhạt hơn xa hơn ra ngoài. Chồng một bóng nhỏ ít mờ lên trên một bóng lớn mờ nhiều sẽ tái tạo điều đó, và kết quả trông đáng tin hơn nhiều so với bất kỳ chiếc bóng đơn lẻ nào.

Xếp lớp cũng là cách các hệ thống thiết kế dựng nên các thang độ cao: độ cao theo phong cách Material thường là hai hoặc ba chiếc bóng được chồng lên và tinh chỉnh cùng nhau, và nâng một thẻ lên một mức sẽ thay cả ngăn xếp bóng thay vì nhích một con số. Bạn thậm chí có thể trộn một bóng inset với các bóng đổ ra ngoài trong cùng một khai báo để có một cạnh được chiếu sáng và một bóng đổ cùng lúc.

Ví dụ thực tế: một bóng thẻ mềm mại

Đây là một công thức trông đẹp trên gần như mọi bề mặt sáng. Bắt đầu với không độ lệch ngang để bóng giữ ở giữa, một độ lệch dọc khoảng 8px, một độ mờ chừng 24px, và một độ giãn quanh mức âm 6px để nó nép vào dưới thẻ. Dùng một màu gần đen nhưng hạ độ đục xuống khoảng 12 phần trăm, biểu diễn là rgba(0, 0, 0, 0.12). Độ giãn âm giữ cho viền mềm khỏi tràn ra ngoài các góc, độ đục thấp ngăn nó trông như một vệt nhòe, và độ lệch vừa phải gợi lên một thứ ánh sáng nhẹ nhàng từ trên cao. Để có kết quả sắc nét hơn nữa, hãy xếp một bóng thứ hai với độ lệch 1px, độ mờ gần như bằng không, và khoảng 6 phần trăm màu đen để giả lập một đường tiếp xúc sắc bén.

Những lỗi thường gặp và cách tránh

Lỗi thường gặp nhất là một chiếc bóng đen thuần, đục hoàn toàn với độ mờ cao, nó hiện ra đầy bùn và giả tạo thay vì như ánh sáng. Nền có màu khiến điều này tệ hơn: một bóng đen trên nền lam bão hòa trông bẩn, nên hãy nhuốm bóng theo hướng sắc nền thay vào đó. Một lỗi khác là coi độ giãn như một bộ điều khiển độ mờ thứ hai; nó không phải vậy, và việc để nó ở mức không trong khi vặn độ mờ lên cao chính là lý do một số chiếc bóng vừa nhòe vừa quá nhỏ.

Người ta cũng hay nhầm box-shadow với bộ lọc drop-shadow. box-shadow luôn bám theo hộp chữ nhật của phần tử, bao gồm cả border-radius của nó, nên một ảnh PNG trong suốt nằm trong hộp vẫn nhận được một chiếc bóng hình chữ nhật. Bộ lọc drop-shadow lần theo chính các pixel không trong suốt, đó là điều bạn muốn cho các hình dạng bất quy tắc và ảnh cắt rời. Hãy dùng box-shadow cho thẻ, nút và bảng; với tới bộ lọc khi đường nét bao quanh không phải là một hình chữ nhật.

Hiệu năng và cái bẫy độ mờ lớn

Bóng được trình duyệt vẽ ra, và những bán kính làm mờ rất lớn thật sự tốn kém, đặc biệt khi chúng hoạt họa hoặc xuất hiện trên nhiều phần tử cùng lúc. Hoạt họa độ mờ hay độ giãn của một chiếc bóng lớn có thể gây vẽ lại ở mỗi khung hình và giật trên các thiết bị cấu hình thấp. Nếu bạn cần một chiếc bóng lớn dần khi hover, một cách mượt hơn là vẽ sẵn chiếc bóng lớn trên một phần tử giả rồi hoạt họa độ đục của nó thay thế, bởi độ đục rất rẻ để dựng hình hợp thành. Hãy giữ các giá trị độ mờ ở mức hợp lý, tránh để hàng trăm nút có bóng cùng hiện trên màn hình một lúc, và giao diện của bạn sẽ luôn mượt mà.