8 người đã dùng
·
14 lượt xem
Đổ bóng & kính mờ CSS
Kéo thanh trượt, thấy ngay bóng đổ mềm và hiệu ứng kính mờ.
Mẫu nhanh
Màu bóng
Màu kính
Nền xem thử
ColorME CardXem bóng và hiệu ứng ngay
CSS
Chọn chế độ Đổ bóng, bắt đầu từ Mẫu nhanh rồi kéo các thanh lệch ngang, lệch dọc, độ nhoè, độ lan và độ đậm. Mã CSS cập nhật ngay để bạn sao chép.
Là nhiều lớp bóng nhỏ chồng lên nhau với khoảng cách tăng dần. Cách này cho bóng mềm và giống bóng thật hơn một lớp bóng lớn.
Là hiệu ứng khung nửa trong suốt làm mờ phần nền phía sau như tấm kính mờ, dùng thuộc tính backdrop-filter trong CSS.
backdrop-filter chạy trên Chrome, Edge, Safari và Firefox bản mới. Công cụ đã kèm tiền tố -webkit- cho Safari.
Bóng trong tạo cảm giác lõm vào, hợp cho ô nhập liệu, nút đang được nhấn hoặc hiệu ứng neumorphism.
Có. Bóng dùng màu tối nhẹ ngả theo màu nền thường tự nhiên hơn bóng đen thuần.
Thêm Drop shadow trong Figma và nhập X, Y, Blur, Spread, độ đậm giống công cụ. Kính mờ tương ứng với hiệu ứng Background blur.
Bóng CSS nhẹ, nhưng quá nhiều lớp bóng lớn trên danh sách dài có thể làm cuộn trang kém mượt. Hãy dùng bóng vừa đủ cho thành phần quan trọng.
Bạn đổi nền phía sau thẻ mẫu để xem bóng và kính mờ hiển thị thế nào trên nền sáng, nền tối hay nền nhiều màu.
Có, phần Mẫu nhanh gồm các kiểu bóng phổ biến để bạn bấm thử rồi tinh chỉnh.
Miễn phí, không cần đăng nhập và chạy ngay trên trình duyệt.
Viền sáng mảnh giúp khung kính tách khỏi nền và trông giống cạnh kính thật hơn, đặc biệt trên nền tối.
Không có câu hỏi nào khớp. Thử từ khoá khác hoặc nhắn tư vấn.
Còn câu hỏi? Nhắn tư vấn
Công cụ khác cho người học thiết kế
- Mở khoá toàn bộ công cụ AI của ColorME: tạo ảnh, video, phụ đề… và thêm lượt tạo mockup mỗi ngày.
- Mỗi khoá học tại ColorME tặng 3 đến 24 tháng Premium, tuỳ khoá.
- Bạn bè được học viên mời: 1 tháng Premium.
Xem Premium Account
Xem khoá học
Học viên ColorME có thể mời bạn bè dùng Premium. Nhờ một học viên gửi lời mời tới email của bạn, sau đó đăng nhập bằng đúng email đó, Premium sẽ tự kích hoạt.