ฉากนี้ทำยังไง?

ทั้งฉากตลาดสดนี้ ไม่มีรูปภาพหรือ asset ภายนอกแม้แต่ไฟล์เดียว ทุกอย่าง — ทุเรียน มังคุด กล้วย หมู ปลา พวงมาลัย หม้อแกง แมว — เป็น <div> ธรรมดาที่วาดรูปทรงด้วย CSS ล้วนๆ (มีข้อยกเว้นเดียวคือหนามทุเรียน ที่ยากเกินจะทำด้วย clip-path ล้วนๆ เลยใช้ SVG สร้าง polygon 22 แฉกรอบวงด้วยสูตรตรีโกณมิติแทน)

เทคนิคหลักที่ใช้

• Gradient — radial-gradient ทำผลไม้/ผักทรงกลมให้มีมิติแสงเงา, repeating-linear-gradient/repeating-radial-gradient ทำลายไม้ ลายเขียงหมู ลายเกล็ดปลา และผ้าใบลายทาง
• clip-path polygon — ชายผ้าใบหลังคาหยักฟันปลา, หน้าจั่วโคมไฟ, หางปลา, ดาวกลีบมังคุด (calyx)
• border-radius แบบไม่สมมาตร — ทรงกล้วยโค้ง ทรงปลารูปหยดน้ำ ทรงหางแมว
• CSS custom properties + attribute selector — สลับโหมดเช้า/ค่ำด้วย [data-time="day"]/[data-time="dusk"] เปลี่ยนค่าตัวแปรสี ท้องฟ้า ความสว่างหลอดไฟ (--lamp-on, --lamp-glow-op) และโทนผ้าใบทั้งฉากในจุด เดียว
• mix-blend-mode: screen / multiply — เลเยอร์แสงหลอดไฟห้อย ทับความมืดของโหมดค่ำแบบสมจริง โดยไม่ต้องสลับสีทีละจุด
• pure CSS tooltip — ป้ายชื่อของ (เช่น "ทุเรียน") มาจาก content: attr(data-label) ล้วนๆ ไม่มี JS วาด tooltip เลย
• transform/opacity animation เท่านั้น — สะบัดหาง, ไฟแกว่ง, ไอน้ำลอย ใช้แค่ transform/opacity เพื่อให้ลื่นและปิดง่ายด้วย prefers-reduced-motion

โหมด "ดูโค้ด"

กดปุ่ม "ดูโค้ด" แล้วคลิกของชิ้นไหนก็ได้ในฉาก — popup จะโชว์ CSS จริงของชิ้นนั้น ดึงมาจาก registry เดียวใน lib/sceneData.ts ที่ผูก id ของแต่ละชิ้นเข้ากับชื่อไทยและ snippet CSS ที่ก็อปมาจาก scene.css ตรงๆ — ไม่ได้อ่าน computed style runtime เพราะฉากนี้ไม่มี JS framework หนักๆ มาช่วยคำนวณ

ส่วนที่วาดยากที่สุด

หนามทุเรียน คือจุดที่ยอมเปิดให้ SVG เข้ามาช่วย — พยายามทำด้วย box-shadow ซ้อนเป็นแฉกรอบวงด้วย CSS ล้วนๆ ก่อน แต่ควบคุมทิศทางปลายแหลมแต่ละอันให้ชี้ออกจากจุดศูนย์กลางไม่ได้ สุดท้ายจึงคำนวณพิกัดแฉกด้วยตรีโกณมิติ (lib/durianSpikes.ts) แล้ว render เป็น <polygon> 22 แฉกใน SVG แทน. รองลงมาคือ พื้นเปียกสะท้อนแสง — การสะท้อนภาพจริงต้อง duplicate DOM ทั้งฉากกลับหัวแล้วเบลอ ซึ่งหนักเกินไป จึงจำลองด้วย gradient มืดๆ ผสม highlight เฉียงที่ขยับ (shimmer) แทนการสะท้อนจริง

สถิติสนุกๆ

แรงบันดาลใจ

ได้แรงบันดาลใจจากชุมชน CSS art ที่พิสูจน์มานานว่า <div> เปล่าๆ กับ gradient/clip-path วาดอะไรก็ได้ — อย่างงานสาย #CSSArt/single-div art บน CodePen ของศิลปิน อย่าง Lynn Fisher, Ben Evans และ Diana Smith ที่ผลักดันว่า CSS ล้วนๆ ไปได้ไกลกว่าที่คนทั่วไปคิดไว้มาก