Box Shadow Generator
Generate box shadows
Generate box shadows Chạy cục bộ trong trình duyệt của bạn
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.10);
About the
Box Shadow Generator tạo bóng từ offset, làm mờ, trải rộng, màu sắc và độ mờ, với bản xem trước trực tiếp và CSS. Hai cài đặt mà mọi người nhầm lẫn là độ mờ và độ lan rộng: độ mờ làm mềm cạnh ra ngoài và vào trong của hình dạng bóng, trong khi độ lan rộng tăng hoặc thu nhỏ kích thước của bóng trước khi xảy ra bất kỳ hiện tượng mờ nào. Mức chênh lệch âm là yếu tố giúp bóng mềm không trông giống quầng sáng, đó là lý do tại sao giá trị mặc định ở đây sử dụng giá trị âm nhỏ.
Where people use the
- Xây dựng thang đo độ cao cho thẻ, phương thức và menu.
- Tạo trạng thái được nhấn hoặc tập trung với bóng bên trong.
- Làm mềm đường viền mà không cần thêm đường viền thực.
- Kiểm tra xem giá trị bóng của thông số thiết kế thực sự trông như thế nào.
How to use the
- 1
Đặt độ lệch
Offset X di chuyển bóng sang phải, offset Y di chuyển bóng xuống. Các giá trị âm di chuyển nó theo cách khác.
- 2
Đặt độ mờ và độ lan rộng
Blur làm mềm cạnh. Spread mở rộng bóng trước khi làm mờ; sử dụng mức chênh lệch âm nhỏ cho bóng nằm bên dưới phần tử thay vì xung quanh nó.
- 3
Chọn màu sắc và độ mờ
Màu đen thuần khiết ở độ mờ hoàn toàn trông có vẻ khắc nghiệt. Độ mờ thấp, khoảng từ 8 đến 20 phần trăm, được coi là độ sâu chứ không phải là bụi bẩn.
- 4
Đánh dấu vào phần bên trong nếu bạn muốn có bóng bên trong
Inset vẽ bóng bên trong phần tử thay vì phía sau nó, phù hợp với các trạng thái và giếng được ép.
- 5
Sao chép CSS
Quy tắc bao gồm màu rgba, vì vậy nó có thể được dán thẳng vào biểu định kiểu.
Lời khuyên và phương pháp hay nhất
- Hai lớp bóng trông đẹp hơn nhiều so với một lớp dày.
- Giữ nguồn sáng nhất quán: nếu một lá bài hướng xuống bên phải thì tất cả chúng đều như vậy.
- Để ý bóng bị cha mẹ cắt bớt với phần tràn bị ẩn.
Câu hỏi thường gặp
Sự khác biệt giữa mờ và lan rộng là gì?
Độ lan rộng thay đổi kích thước hình dạng của bóng trước khi mềm đi, dương tăng lên và âm co lại. Blur sau đó làm mềm cạnh theo bán kính nhất định. Để có được bóng chặt dưới tấm thiệp, bạn cần có một chút mờ và độ lan tỏa hơi âm.
Tại sao bóng của tôi trông xám và bẩn?
Bởi vì nó có màu đen tuyền ở độ mờ cao. Sử dụng hệ số alpha thấp, khoảng 0,08 đến 0,2 và cân nhắc việc pha màu bóng theo màu nền để đọc tự nhiên hơn nhiều.
Tôi có thể có nhiều hơn một cái bóng không?
Đúng. Phân tách một số bóng bằng dấu phẩy trong cùng một khai báo; chúng xếp chồng lên nhau nên cái đầu tiên ở trên cùng. Bóng phân lớp là cách tạo độ cao mềm mại, chân thực.
Bóng hộp có ảnh hưởng đến bố cục không?
Không. Bóng được vẽ bên ngoài hộp của phần tử và không chiếm không gian, vì vậy chúng có thể bị phần tử gốc cắt bớt khi phần tràn bị ẩn hoặc bằng một hộp chứa chật.
Hoạt hình cho bóng hộp có đắt không?
Vâng, tương đối. Việc thay đổi độ mờ hoặc trải rộng buộc trình duyệt phải sơn lại bóng mỗi khung hình. Để có chuyển động mượt mà, thay vào đó, hãy tạo hiệu ứng mờ hoặc biến đổi sinh động hoặc làm mờ chéo giữa hai bóng được kết xuất trước.