สร้างสรรค์ขนมปังชีสจอร์เจีย Khachapuri ด้วย CSS ล้วน
โปรเจกต์ CSS Art สุดสร้างสรรค์ที่จำลองเมนูคอมฟอร์ทฟู้ดจอร์เจียด้วย HTML และ CSS เท่านั้นโดยไม่พึ่ง JavaScript หรือภาพกราฟิก
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
- ผลงานส่งเข้าประกวดใน Frontend Challenge: Comfort Food Edition
- จำลองขนมปังชีส Khachapuri แบบดั้งเดิมจากแคว้น Imereti
- ใช้เพียง HTML และ CSS ล้วนโดยไม่มีรูปภาพ SVG แคนวาส หรือจาวาสคริปต์
- แบ่งขนมปังออกเป็น 13 ชิ้นด้วย clip-path เพื่อสร้างแอนิเมชันการตัด
นักพัฒนาซอฟต์แวร์ได้ส่งผลงานเข้าร่วมการแข่งขัน Frontend Challenge ในหัวข้อ Comfort Food Edition โดยเลือกเมนูที่สะท้อนถึงความอบอุ่นในวัยเด็กอย่าง Imeretian Khachapuri หรือขนมปังชีสทรงกลมสอดไส้ชีสละลายสูตรดั้งเดิมจากแคว้น Imereti ทางตะวันตกของประเทศจอร์เจีย ซึ่งจุดเด่นคือแป้งนุ่มฟูอบจนเป็นสีทองและทาน้ำเนยหลังอบเสร็จ โดยตัวชีสจะอยู่ภายในเนื้อแป้งทั้งหมดแตกต่างจากพิซซ่าทั่วไป
ความท้าทายของโปรเจกต์นี้คือการสร้างสรรค์ทุกองค์ประกอบที่มองเห็น ไม่ว่าจะเป็นพื้นผิวของขนมปัง ไอร้อนที่ลอยขึ้นมา หรือแอนิเมชันการตัดแบ่ง ให้เกิดขึ้นด้วยภาษา HTML และ CSS เท่านั้น โดยไม่มีการใช้รูปภาพไฟล์กราฟิก SVG แคนวาส หรือโค้ดจาวาสคริปต์เข้ามาช่วยแต่อย่างใด
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
การทำ CSS Art โดยไม่มีการใช้ JavaScript หรือภาพกราฟิกช่วยเลยถือเป็นโจทย์ที่ทดสอบทักษะขั้นสูงของนักพัฒนา frontend การใช้เทคนิคอย่าง radial gradients ซ้อนทับกันและการตัดรูปทรงด้วย clip-path ช่วยให้สามารถจำลองพื้นผิวและมิติของอาหารได้อย่างสมจริงบนเบราว์เซอร์
ในด้านเทคนิคการเขียนโค้ด ผู้สร้างสรรค์ได้เลือกใช้วิธีแบ่งขนมปังออกเป็น 13 ชิ้นย่อยแทนที่จะสร้างก้อนขนมปังเต็มชิ้นแล้วใช้เลเยอร์มาบัง โดยอาศัยคุณสมบัติ clip-path: polygon() ซึ่งจำนวน 13 ชิ้นนี้เพียงพอที่จะทำให้ชิ้นขนมปังค่อยๆ หายไปได้อย่างแนบเนียนโดยไม่ต้องเพิ่มจำนวนองค์ประกอบ HTML มากจนเกินไป นอกจากนี้ยังมีการใช้การซ้อนทับของ radial gradients หลายชั้นเพื่อจำลองผิวสัมผัสของขนมปังที่เพิ่งอบเสร็จใหม่ๆ และใช้ CSS shapes เพื่อจัดวางข้อความให้โอบล้อมจานอาหารคล้ายกับบล็อกรีวิวอาหารจริงๆ อีกด้วย
ที่มา: Dev.to
พบข้อมูลผิดพลาดในบทความนี้? แจ้งปัญหาบทความนี้
ความคิดเห็น
แสดงความคิดเห็น