Effects & Visuals

1. Core Idea

filter ใช้ปรับภาพที่มองเห็นของ element เช่น ทำให้เบลอ มืดลง สว่างขึ้น หรือเป็นขาวดำ โดยไม่ต้องแก้ไฟล์ภาพต้นฉบับ

• blur() ทำให้ element เบลอ
• brightness() ปรับความสว่าง
• contrast() ปรับความต่างของสี
• grayscale() เปลี่ยนสีเป็นขาวดำ
• สามารถเขียนหลาย function ต่อกันใน property เดียว

2. Mental Model

ให้นึกถึงแว่นตาหรือฟิลเตอร์ในแอปรูปภาพ เราไม่ได้เปลี่ยนวัตถุจริง แค่เปลี่ยนวิธีที่ผู้ใช้มองเห็น element นั้นบนหน้าจอ

3. Rule / Definition

.archived-card {
  filter: grayscale(100%);
}

.locked-content {
  filter: blur(4px);
}

.dim-visual {
  filter: brightness(0.55);
}

4. Worked Example

• เลือก effect จากความหมายของ state ก่อน เช่น archived ใช้ grayscale
• เริ่มจากค่าน้อยก่อน เช่น blur(2px) หรือ brightness(0.8)
• ตรวจว่าเนื้อหาสำคัญยังอ่านได้
• ถ้าใช้หลายค่า ให้คั่นแต่ละ function ด้วยช่องว่าง

5. Code Example

6. Recap

• filter ปรับภาพของ element เอง
• grayscale เหมาะกับ state ที่ไม่ active
• brightness ช่วยปรับความสว่างของ visual
• blur ควรใช้กับเนื้อหาที่ไม่ต้องอ่านโดยตรง

Lab 1: ทำ archived card เป็นขาวดำ

เป้าหมาย: ใช้ grayscale เพื่อสื่อว่า card นี้ไม่ใช่เนื้อหาหลักแล้ว

Lab 2: เบลอ locked preview

เป้าหมาย: ใช้ blur เพื่อบอกว่า preview นี้ยังถูกล็อกและไม่ควรอ่านรายละเอียดตอนนี้

Lab 3: ลดความสว่าง visual

เป้าหมาย: ใช้ brightness เพื่อทำให้ visual มืดลงแบบคุมได้