Neumorphism CSS Shadow - Mã hai lớp
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ở trình tạo với cặp trung tính cổ điển đã được tạo sẵn: độ lệch lớp sáng −8px/−8px gần như trắng và độ lệch lớp tối 8px/8px với màu xanh xám nhạt, cả hai đều mờ 16px. Chuyển đổi giữa hai lớp trong danh sách lớp để điều chỉnh từng bên một cách độc lập.
Tính đa hình (giao diện người dùng mềm) là phong cách in nổi đạt đỉnh cao vào khoảng năm 2020: các phần tử trông như nổi lên từ nền thay vì nổi phía trên nền. Thành thật mà nói, nó đi kèm với sự đánh đổi thực sự — hiệu ứng chỉ hoạt động khi nền của phần tử khớp với nền trang và các cạnh có độ tương phản thấp có thể ảnh hưởng đến khả năng truy cập — vì vậy hầu hết các nhóm hiện sử dụng nó làm điểm nhấn chứ không phải toàn bộ ngôn ngữ thiết kế.
Nếu kiểu này phù hợp với dự án của bạn, thì khai báo hai lớp này là điểm bắt đầu chuẩn: sao chép CSS, đặt phần tử và nền trang thành cùng một màu xám mềm và thêm bán kính đường viền phù hợp. Mọi thứ chạy cục bộ trong trình duyệt của bạn.