สรุปวิธีใช้ฟังก์ชัน `shape()` ใหม่ของ CSS

• ฟังก์ชัน CSS shape() เริ่มรองรับแล้วในเบราว์เซอร์ Chromium และ WebKit
• ต่างจาก path() แบบเดิม ตอนนี้สามารถ กำหนดรูปทรงที่ซับซ้อน ได้ด้วย ไวยากรณ์และหน่วยแบบ CSS ที่อ่านง่ายกว่า
• เมื่อต้องสร้างรูปทรงซับซ้อนใน clip-path ก็สามารถทำได้ด้วย คำสั่งภาษาอังกฤษ แทนการใช้พิกัดแบบ SVG
• มี คำสั่งใหม่ อย่าง line, arc, curve เป็นต้น ที่ช่วยให้เขียนเส้น เส้นโค้ง และอาร์กได้กระชับขึ้น
• ตอนนี้ shape() ยัง รองรับแอนิเมชันได้จำกัด แต่ สามารถเปลี่ยนแบบไดนามิกตาม hover/focus ได้

---

ภาพรวม

• ฟังก์ชัน CSS shape() ใช้ร่วมกับ clip-path เพื่อให้สามารถ คลิปรูปทรงที่ซับซ้อน ได้ในเบราว์เซอร์
• ก่อนหน้านี้สามารถใช้รูปทรงพื้นฐานอย่าง circle, ellipse, polygon ได้ แต่ถ้าจะทำ รูปทรงอิสระต้องใช้ path() เท่านั้น
• path() ต้อง ใส่พิกัดและคำสั่งของ SVG ตรง ๆ จึงอ่านยากและมีช่วงการเรียนรู้ค่อนข้างสูง

คุณลักษณะของฟังก์ชัน shape()

• สามารถ ประกอบรูปทรงเวกเตอร์ในสไตล์แบบ CSS ได้
• ระบุจุดเริ่มต้นได้ด้วย คีย์เวิร์ดทิศทาง (from top left) หรือ ค่าพิกัด (from 0 0)
• รูปทรงจะ ประกอบด้วยชุดคำสั่งต่อเนื่องกัน เช่น line, vline, arc, curve, smooth

คำอธิบายคำสั่งหลัก

• line
  • ความหมาย: วาดเส้นจากจุดเริ่มต้น
  • วิธีใช้: ใช้คีย์เวิร์ด by เพื่อระบุตำแหน่งแบบสัมพัทธ์
  • ตัวอย่าง: line by -2px 3px
• vline
  • ความหมาย: วาดเส้นแนวตั้ง
  • วิธีใช้: ใช้ to สำหรับตำแหน่งแบบสัมบูรณ์ และ by สำหรับตำแหน่งแบบสัมพัทธ์
  • ตัวอย่าง: vline to 50px
• hline
  • ความหมาย: วาดเส้นแนวนอน
  • วิธีใช้: ใช้ to สำหรับตำแหน่งแบบสัมบูรณ์ และ by สำหรับตำแหน่งแบบสัมพัทธ์
  • ตัวอย่าง: hline to 95%
• arc
  • ความหมาย: วาดเส้นโค้งแบบวงรี
  • วิธีใช้:
    • to: จุดปลายของอาร์ก
    • with: ทิศทางการเอียงของอาร์ก (แนวนอน/แนวตั้ง)
    • of: รัศมีของวงรีที่อาร์กนั้นเป็นส่วนหนึ่งของมัน (แนวนอน/แนวตั้ง)
  • ตัวอย่าง: arc to 10% 50% of 1%
• curve
  • ความหมาย: วาดเส้นโค้งเบซิเยร์
  • วิธีใช้:
    • to: จุดปลายของเส้นโค้ง
    • with: จุดควบคุมของเส้นโค้ง (ใช้ปรับความโค้ง)
  • ตัวอย่าง: curve to 0% 100% with 50% 0%
• smooth
  • ความหมาย: วาดเส้นโค้งแบบลื่นไหล (เส้นโค้งเบซิเยร์ที่เชื่อมต่อกัน)
  • วิธีใช้:
    • to: จุดปลาย
    • by: พิกัดแบบสัมพัทธ์
    • with: จุดควบคุม

อื่น ๆ

• shape() เปลี่ยนแบบไดนามิกได้ในสถานะ hover/focus
• ในเบราว์เซอร์ปัจจุบัน แอนิเมชัน transition ยังไม่ทำงาน
• สามารถใช้ฟังก์ชันคำนวณ calc() ได้ด้วย

ลิงก์อ้างอิง

• สเปกอย่างเป็นทางการ