Effects & Visuals

1. Core Idea

box-shadow ใช้สร้างเงารอบ element เพื่อบอกว่า element ลอยขึ้นจากพื้นผิว เงาไม่กินพื้นที่จริงและไม่ดัน element อื่น

.card {
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.14);
}

2. Mental Model

ให้นึกถึงกระดาษบนโต๊ะ กระดาษที่วางแนบโต๊ะมีเงาน้อยมาก แต่กระดาษที่ยกขึ้นจะมีเงาชัดขึ้น ใน UI เงาช่วยให้ผู้เรียนมองออกว่า card, panel หรือ dialog อยู่คนละชั้นกับพื้นหลัง

3. Rule / Definition

4. Worked Example

• เริ่มจากเงาเบา เช่น 0 2px 8px rgba(..., 0.10)
• ถ้าต้องการให้ element ลอยมากขึ้น เพิ่ม offset-y และ blur
• ถ้าเงาดูแข็งเกินไป ลด alpha ใน rgba
• เลือกใช้เงาเฉพาะ element ที่ต้องการแยกชั้นจริง ๆ

5. Code Example

6. Recap

• box-shadow เป็น visual effect ไม่ใช่ขนาดจริงของกล่อง
• เงาเบาเหมาะกับ card ทั่วไป
• เงาหนักเหมาะกับ element ที่ต้องเด่นกว่าเพื่อน
• rgba alpha ต่ำทำให้เงาดูนุ่มและอ่านง่ายกว่าเงาทึบ

Lab 1: เพิ่มเงาเบาให้ card

เป้าหมาย: ทำให้ card แยกจากพื้นหลังด้วย box-shadow เบา ๆ

Lab 2: ทำ panel ให้ลอยขึ้น

เป้าหมาย: ใช้ offset-y และ blur ที่มากขึ้นเพื่อสื่อว่า panel เด่นกว่า card ปกติ

Lab 3: ลดเงาหนักเกิน

เป้าหมาย: ปรับเงาที่หนักเกินให้ดูเบาลงด้วย alpha ที่ไม่เกิน 0.15