Lộ trình tác vụ / từ đầu vào đến kết quả
Cách dựng một bảng glassmorphism
- 01
Chọn màu tint kính
Chọn một Màu tint kính. Bản xem trước thả nổi bảng trên hai khối cầu màu, để chất liệu được đánh giá trên một nền rối mắt đúng như cách nó sẽ xuất hiện trên màn hình thật. Độ mờ · Nền · Thẻ / Nút / Tròn
- 02
Đặt độ mờ và độ nhòe
Độ mờ bề mặt chạy từ 0.05 đến 0.8 — thấp hơn nghĩa là trong suốt hơn — và Làm nhòe hậu cảnh từ 0 đến 40 px làm mềm bất cứ thứ gì nằm sau bảng.
- 03
Tinh chỉnh độ bão hòa, viền và góc bo
Độ bão hòa (50–200%) làm đậm hoặc dịu hậu cảnh, Độ mờ viền (0–0.8) viền quanh mép bằng màu tint, và Bán kính góc (0–48 px) bo tròn bảng.
- 04
Cân bằng chất liệu
Các điều khiển bề mặt đánh đổi lẫn nhau: độ mờ thấp cần nhiều nhòe hơn để đọc như kính, và Độ bão hòa trên 100% giữ một hậu cảnh rối mắt khỏi bị bạc màu sau một tint nhạt. Chất liệu mặc định — tint trắng ở độ mờ 0.22, nhòe 18 px, bão hòa 140% — là một điểm giữa đã được kiểm chứng.
- 05
Sao chép CSS của bảng
Nhấn Sao chép CSS hoặc Tải xuống .css để lưu toolars-glass-panel.css. Quy tắc .glass-panel kết hợp nền rgba, backdrop-filter kèm bản song sinh -webkit-, một đường viền tint 1 px và một bóng đổ mềm.
- 06
Lên kế hoạch dự phòng
Nếu backdrop-filter không có, nền rgba, viền và bóng vẫn hiển thị. Đặt Độ mờ nền bằng không chỉ là cách ước lượng giao diện dự phòng, vì bộ lọc bão hòa vẫn có thể hoạt động. Hãy thử CSS trong trình duyệt đích và tăng Độ mờ đục bề mặt nếu chữ cần thêm tương phản. HTML chứa CSS hiện tại và ví dụ hoạt động. Điều khiển gốc hỗ trợ bàn phím.