Effects & Visuals

1. Core Idea

backdrop-filter ปรับภาพของสิ่งที่อยู่ด้านหลัง element ไม่ใช่ตัว element เอง จึงเหมาะกับ glass effect ที่พื้นหลังด้านหลังเบลอ แต่ข้อความด้านหน้าอ่านชัด

• ต้องมีสิ่งที่มองเห็นอยู่ด้านหลัง element
• element ด้านหน้าควรมี background ที่โปร่งบางส่วน เช่น rgba
• blur() เป็น function ที่ใช้บ่อยที่สุด
• ถ้าพื้นหลังของ element ทึบสนิท effect จะมองไม่ออก

2. Mental Model

ให้นึกถึงกระจกฝ้า สิ่งที่อยู่หลังกระจกจะเบลอ แต่ข้อความหรือสติกเกอร์ที่ติดบนกระจกยังคมชัด นี่คือความต่างหลักระหว่าง filter และ backdrop-filter

3. Rule / Definition

.glass-card {
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

4. Worked Example

• สร้างพื้นหลังที่มีสีหรือ gradient ก่อน
• วาง card ที่มี background แบบ rgba ทับด้านหน้า
• เพิ่ม backdrop-filter: blur(...) ให้ card
• เพิ่ม border หรือ shadow เบา ๆ เพื่อแยกขอบ card ให้ชัด

5. Code Example

6. Recap

• backdrop-filter ปรับสิ่งที่อยู่ด้านหลัง element
• ต้องใช้พื้นหลังโปร่งบางส่วนเพื่อเห็น effect
• filter กับ backdrop-filter ไม่ได้ทำงานกับสิ่งเดียวกัน
• ใช้ blur อย่างพอดีเพื่อให้เนื้อหาด้านหน้าอ่านง่าย

Lab 1: สร้าง glass card

เป้าหมาย: ใช้ background แบบ rgba ร่วมกับ backdrop-filter blur

Lab 2: ปรับ alpha ให้เห็นด้านหลัง

เป้าหมาย: แก้ background ที่ทึบเกินไปให้โปร่งบางส่วน เพื่อให้ backdrop-filter มองเห็นผล

Lab 3: แยก filter กับ backdrop-filter

เป้าหมาย: ใช้ backdrop-filter กับ card ด้านหน้า โดยไม่ทำให้ข้อความด้านในเบลอ