Styling Track
CSS
Effects & Visuals
Workshop: Effects & Visuals
ฝึกประกอบ border-radius, box-shadow, opacity, filter และ backdrop-filter ให้เป็นชิ้นงาน UI ขนาดเล็ก โดยไม่ใช้ layout หรือ motion ที่ยังอยู่ในบทถัดไป
Workshop 1: Profile Summary Card
สร้าง profile card ที่ใช้ radius, shadow และ opacity เพื่อแยกชั้นข้อมูลโดยยังใช้ layout พื้นฐานแบบ block ธรรมดา
Workshop 2: Archived Lesson Tile
สร้าง tile ที่ใช้ filter และ opacity เพื่อสื่อว่าเป็นเนื้อหาที่เก็บไว้แล้ว แต่ยังเปิดอ่านได้
Workshop 3: Glass Notice Panel
สร้าง glass panel ด้วย background โปร่งบางส่วนและ backdrop-filter โดยให้ข้อความด้านหน้าอ่านชัด