Effects & Visuals

1. Core Idea

opacity ควบคุมความทึบหรือโปร่งใสของ element ทั้งชิ้น ค่า 1 คือทึบปกติ ค่า 0 คือมองไม่เห็น แต่ element ยังอยู่ในหน้าและยังกินพื้นที่เดิม

• opacity: 1 คือค่าเริ่มต้น
• opacity: 0.5 ทำให้ element จางลงครึ่งหนึ่ง
• opacity: 0 ทำให้มองไม่เห็น แต่ไม่ได้ลบ element
• ลูก element ทั้งหมดจะจางตาม parent เสมอ

2. Mental Model

ให้นึกถึงแผ่นฟิล์มใสที่วางทับทั้งกล่อง เมื่อฟิล์มจางลง ทุกอย่างในกล่องจะจางตาม ทั้งพื้นหลัง เส้นขอบ ข้อความ และ element ลูก

3. Rule / Definition

.disabled-button {
  opacity: 0.4;
  pointer-events: none;
}

4. Worked Example

• ถามก่อนว่าต้องการให้จางทั้ง element หรือแค่สีพื้นหลัง
• ถ้าต้องการให้ทุกอย่างในกล่องจางพร้อมกัน ใช้ opacity
• ถ้าเป็น disabled visual ให้ใช้ opacity ร่วมกับ pointer-events: none
• อย่าลด opacity ของข้อความมากเกินไป เพราะอาจอ่านยาก

5. Code Example

6. Recap

• opacity ส่งผลกับ element ทั้งชิ้น
• opacity: 0 ไม่ได้ลบ element ออกจาก layout
• parent ที่จางจะทำให้ลูกทุกตัวจางตาม
• ข้อความควรมี opacity สูงพอให้อ่านชัด

Lab 1: ทำ preview card ให้จาง

เป้าหมาย: ใช้ opacity เพื่อบอกว่า card นี้เป็น preview ที่ยังไม่ใช่ state หลัก

Lab 2: ทำปุ่ม disabled visual

เป้าหมาย: ทำให้ปุ่มดูยังไม่พร้อมกดด้วย opacity และหยุดการคลิกด้วย pointer-events

Lab 3: ลดน้ำหนักข้อความรอง

เป้าหมาย: ใช้ opacity กับ caption ให้ดูเป็นข้อมูลรอง แต่ยังอ่านออก