CSS Card Shadow - Mã bóng hộp tinh tế
Xây dựng mã bóng hộp CSS một cách trực quan: các thanh trượt để bù, làm mờ, trải rộng, màu sắc với độ mờ, chế độ chèn và tối đa bốn lớp với bản xem trước trực tiếp.
kết quả
Trang này mở cài đặt trước trình tạo bóng hộp cho bóng thẻ cổ điển: giảm 2px, độ mờ 8px, độ mờ đen 15%. Nó yên tĩnh một cách có chủ ý - đủ để tách một thẻ khỏi trang mà không cần thông báo - và bản xem trước cho thấy chính xác mức độ yên tĩnh.
Phạm vi này tương ứng với các bước độ cao thấp nhất trong hầu hết các hệ thống thiết kế: thẻ danh sách, menu thả xuống, cửa sổ bật lên và các hàng trong bảng khi di chuột. Nếu bạn cần nâng mạnh hơn cho các chế độ hoặc bảng điều khiển nổi, hãy tăng độ lệch Y và làm mờ cùng nhau - chúng sẽ tăng tỷ lệ để giữ cho nguồn sáng đáng tin cậy.
Sao chép dòng bóng hộp vào các kiểu thành phần của bạn hoặc sao chép nó dưới dạng lớp thứ hai với độ mờ chặt hơn để thêm nét cho cạnh. Công cụ này miễn phí và chạy hoàn toàn trong trình duyệt của bạn.