Bài 17. Bo góc, bóng đổ, độ mờ và hiệu ứng chữ

Những chi tiết nhỏ như bo góc, bóng đổ, độ trong suốt, viền ảnh, hiệu ứng kính mờ và chữ chuyển màu tạo nên cảm giác hiện đại cho giao diện. Bài này hệ thống các thuộc tính trang trí và cách dùng chừng mực.

40 phútCơ bản
Bạn sẽ học được
  • Dùng border-radius các kiểu
  • Tạo box-shadow nhiều lớp, bóng trong
  • Dùng opacity và màu alpha đúng chỗ
  • Hiệu ứng chữ: text-shadow, chữ gradient, backdrop-filter

Một số khái niệm

Bóng đổ mô phỏng ánh sáng: bóng mềm, lệch xuống dưới, nhiều lớp nhẹ trông tự nhiên hơn một lớp đậm. Cú pháp box-shadow: x y blur spread màu; thêm inset cho bóng bên trong. Phân biệt opacity (làm mờ cả phần tử và con) với màu alpha (chỉ mờ màu nền).

Bo góc và bóng đổ

<style>
  .b { display: inline-grid; place-items: center; width: 120px; height: 80px; margin: 10px; background: #fff; font-size: 12px; text-align: center; }
  .s1 { border-radius: 8px; box-shadow: 0 1px 3px rgb(0 0 0 / .2); }
  .s2 { border-radius: 16px; box-shadow: 0 10px 25px -5px rgb(0 0 0 / .15), 0 4px 6px -4px rgb(0 0 0 / .1); }
  .s3 { border-radius: 30px 0; box-shadow: 6px 6px 0 #2e7d32; border: 2px solid #2e7d32; }
  .s4 { border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #ffecb3; box-shadow: inset 0 -6px 0 rgb(0 0 0 / .1); }
  .s5 { border-radius: 12px; box-shadow: 0 0 0 4px #bbdefb, 0 0 20px #64b5f6; }
</style>
<div class="b s1">bóng nhẹ</div><div class="b s2">bóng mềm nhiều lớp</div><div class="b s3">bóng cứng</div><div class="b s4">hình quả trứng + inset</div><div class="b s5">viền phát sáng</div>
Kết quả hiển thị

Độ mờ và kính mờ

<style>
  .nen { position: relative; height: 150px; border-radius: 12px; background: url("https://picsum.photos/seed/taxua/700/300") center/cover; padding: 14px; display: flex; gap: 10px; align-items: flex-end; }
  .x { padding: 10px 12px; border-radius: 10px; font-size: 13px; color: #fff; }
  .op { background: #000; opacity: .5; }             /* chữ cũng mờ theo */
  .al { background: rgb(0 0 0 / .5); }               /* chỉ nền mờ */
  .kinh { background: rgb(255 255 255 / .2); backdrop-filter: blur(8px); border: 1px solid rgb(255 255 255 / .4); }
</style>
<div class="nen"><div class="x op">opacity .5</div><div class="x al">nền alpha .5</div><div class="x kinh">kính mờ backdrop-filter</div></div>
Kết quả hiển thị

Hiệu ứng chữ

<style>
  .c1 { font-size: 34px; font-weight: 900; background: linear-gradient(90deg, #2e7d32, #00acc1, #7b1fa2); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0; }
  .c2 { font-size: 28px; font-weight: 800; color: #fff; text-shadow: 0 2px 0 #1b5e20, 0 4px 10px rgb(0 0 0 / .3); background: #43a047; display: inline-block; padding: 4px 12px; border-radius: 8px; }
  .c3 { font-size: 26px; font-weight: 800; color: transparent; -webkit-text-stroke: 1.5px #e65100; }
</style>
<p class="c1">Chữ chuyển màu</p><span class="c2">Bóng chữ</span> <span class="c3">Chữ viền</span>
Kết quả hiển thị
Mẹo hay

Lấy cảm hứng bóng đổ “mềm” tại các hệ thiết kế như Tailwind (shadow-sm đến shadow-2xl) hoặc dùng công cụ tạo bóng trực tuyến rồi chỉnh lại.

Lưu ý

Lạm dụng bóng, gradient và kính mờ khiến giao diện rối và nặng (backdrop-filter tốn tài nguyên trên máy yếu). Chọn 1–2 hiệu ứng nhất quán cho toàn trang.

Thực hành
  1. Tạo 3 cấp bóng (nhỏ, vừa, lớn) dùng cho thẻ, menu, hộp thoại.
  2. Làm thanh menu kính mờ đè lên ảnh nền.
  3. Làm tiêu đề trang chữ gradient.
  4. Tạo thẻ có viền phát sáng khi focus.
Tóm tắt bài học
  • border-radius nhiều kiểu, 50% cho hình tròn.
  • box-shadow nhiều lớp, inset, viền bằng spread.
  • opacity mờ cả phần tử; alpha chỉ mờ màu.
  • background-clip: text, text-shadow, backdrop-filter.