19
Trong thiết kế web hiện đại, hiệu ứng bóng đổ không chỉ giúp giao diện bớt đơn điệu mà còn tạo ra chiều sâu, giúp các khối nội dung trông như những thẻ (cards) nổi bật. Bài viết này sẽ giúp bạn làm chủ kỹ thuật box-shadow chỉ trong vài phút.
1. Công thức cơ bản
box-shadow: [ngang] [dọc] [độ nhòe] [độ rộng] [màu sắc];
2. Giải thích các thông số
- Ngang (Offset-x): Đẩy bóng sang trái hoặc phải.
- Dọc (Offset-y): Đẩy bóng xuống dưới hoặc lên trên. Số càng lớn bóng càng đổ xuống sâu.
- Độ nhòe (Blur): Làm bóng mờ đi. Số càng lớn bóng càng lan tỏa tự nhiên.
- Màu sắc (RGBA): Thường dùng màu đen có độ trong suốt cao như
rgba(0,0,0,0.15)để bóng nhìn thật hơn.
Mã code
<div style="background-color: #ffffff; border-left: 5px solid #0ba300; padding: 15px; margin-bottom: 25px; box-shadow: 0 8px 20px rgba(0,0,0,0.15); border-radius: 4px;">
<div style="color: #b000d1; font-weight: bold;">Ví dụ: 早上好</div>
<div style="color: #0ba300;"><em>Zǎoshang hǎo</em></div>
<div>Chào buổi sáng.</div>3. Các mẫu đổ bóng ứng dụng
Kiểu 1: Bóng đổ sâu (Deep Shadow) – Phù hợp để làm nổi bật khối quan trọng.
Ví dụ: 早上好
Zǎoshang hǎo
Chào buổi sáng.
Kiểu 2: Bóng đổ nhẹ nhàng (Soft Shadow) – Dùng cho danh sách nhiều câu hội thoại.
Ví dụ: 下班了吗？
Xiàbān le ma?
Tan ca rồi hả?
4. Bí quyết để có bóng đổ đẹp
- Độ nhòe gấp đôi độ sâu: Nếu đổ dọc 4px, hãy để độ nhòe 8px hoặc 12px.
- Đừng dùng màu đen đậm: Hãy giữ độ trong suốt (Alpha) từ 0.05 đến 0.2.
- Kết hợp Bo góc: Luôn dùng
border-radiusđể các khối trông hiện đại hơn.
Chúc các bạn thành công trong việc trang trí website trên hov.vn!
