เตรียมพบกับ CSS border-shape คุณสมบัติใหม่ที่จะพลิกโฉมการแต่งขอบเว็บ
ทำความรู้จักกับ border-shape ฟีเจอร์ CSS ล่าสุดที่ช่วยให้การใส่กรอบและเงาตามรูปทรง (shapes) กลายเป็นเรื่องง่าย ไม่ต้องปวดหัวกับการตัดแต่งอีกต่อไป
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
- ฟีเจอร์ shape() และ corner-shape ช่วยแปลง SVG เป็น CSS และควบคุมมุมโค้งได้อย่างแม่นยำ
- ปัญหาใหญ่ของการทำ CSS shape ในอดีตคือการใส่ขอบ (border) และเงา (box-shadow) ที่มักจะถูกตัดทิ้งไปตาม clip-path
- คุณสมบัติ border-shape เข้ามาแก้ปัญหานี้โดยตรง ทำให้ขอบและเงาสามารถวิ่งไปตามรูปทรงของธาตุนั้นๆ ได้ทันที
- การใช้งานมีความคล้ายคลึงกับ clip-path อย่างมาก เรียนรู้ได้ไวและใช้งานง่าย
วงการ CSS กำลังจะได้พบกับความเปลี่ยนแปลงครั้งสำคัญเมื่อฟีเจอร์ใหม่อย่าง shape(), corner-shape และล่าสุดคือ border-shape กำลังเข้ามามีบทบาท โดยเฉพาะฟังก์ชัน shape() ที่ช่วยให้เราใช้งานไวยากรณ์ SVG บน clip-path และ offset-path ได้ง่ายขึ้นอย่างมาก ไม่ว่าคุณต้องการแปลงรูปทรง SVG รูปแบบใดให้กลายเป็น CSS shape ก็สามารถทำได้อย่างราบรื่น
ในส่วนของ corner-shape นั้นเป็นคุณสมบัติที่ทำงานร่วมกับ border-radius เพื่อควบคุมรูปทรงมุมของธาตุผ่านคีย์เวิร์ดสำเร็จรูป แม้ว่ารูปทรงส่วนใหญ่จะสามารถสร้างขึ้นได้ด้วย clip-path หรือ mask อยู่แล้ว แต่จุดเด่นที่เหนือกว่าของ corner-shape คือความสามารถในการเพิ่มขอบ (border) และของตกแต่งอื่นๆ ให้เข้ากับมุมเหล่านั้นได้อย่างง่ายดาย ซึ่งในอดีตการเพิ่มขอบให้กับรูปทรงแปลกตาถือเป็นความท้าทายอย่างยิ่งสำหรับนักพัฒนา
การที่ CSS พัฒนาฟีเจอร์ด้านรูปทรงอย่างต่อเนื่อง สะท้อนให้เห็นความพยายามในการลดการพึ่งพาเครื่องมือภายนอกหรือภาพกราฟิก (Images) สำหรับงานดีไซน์ที่ซับซ้อน การที่ขอบ (border) และเงา (box-shadow) สามารถเรนเดอร์ตามเส้นทางของรูปทรงได้โดยตรง (ไม่ใช่แค่กรอบสี่เหลี่ยมเดิมๆ) จะช่วยเพิ่มประสิทธิภาพการแสดงผลบนเว็บและทำให้โค้ดมีความยืดหยุ่นสูงขึ้นมาก
อย่างไรก็ตาม พระเอกตัวจริงในเรื่องนี้คือ border-shape ที่ขยายขอบเขตจากการตกแต่งแค่เพียงมุม ไปสู่การกำหนดรูปทรงของทั้งธาตุ (element) ทั้งหมด โดยรองรับค่าเดียวกับ clip-path รวมไปถึงฟังก์ชัน shape() ตัวใหม่ด้วย ความแตกต่างสำคัญคือ clip-path และ mask จะทำการตัด (clip) ทุกอย่างรวมถึงขอบและเงา ทำให้การมีเส้นขอบเป็นเรื่องที่เป็นไปไม่ได้ แต่ border-shape จะใช้วิธี "ขึ้นรูป" ธาตุนั้นแทน ทำให้ของตกแต่งทั้งหมดสามารถไหลไปตามรูปทรงใหม่ได้อย่างลงตัว
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
เมื่อใช้งาน border-shape ในโหมด Stroke (Single basic-shape) ขอบจะถูกเรนเดอร์ไปตามเส้นทางของรูปทรงด้วยความกว้างของขอบที่กำหนด เหมาะสำหรับการสร้างรูปทรงแบบมีเส้นโครงร่าง (outlined shapes) ส่วนในโหมด Fill (Two basic-shape) ขอบจะถูกเรนเดอร์เป็นพื้นที่ระหว่างเส้นทางสองเส้น โดยเส้นแรกกำหนดขอบเขตภายนอก และเส้นที่สองกำหนดขอบเขตภายใน ช่วยให้ควบคุมเรขาคณิตของขอบได้อย่างแม่นยำ นอกจากนี้ เมื่อใช้งาน border-shape ค่า border-radius จะถูกละเว้นโดยอัตโนมัติ เนื่องจากตัวธาตุถูกเปลี่ยนรูปทรงไปเรียบร้อยแล้ว
นอกจากการสร้างเส้นขอบและการเจาะช่อง (cutout shapes) แล้ว border-shape ยังเปิดโอกาสให้เราสร้างลูกเล่นแบบ breakout decorations ที่ทำให้เนื้อหาและขอบตกแต่งทับซ้อนกันได้อย่างอิสระ แม้ว่าในขณะนี้การสนับสนุน (Support) จะยังจำกัดอยู่เฉพาะบนเบราว์เซอร์ Chromium เท่านั้น แต่ก็ถือเป็นช่วงเวลาที่เหมาะสมอย่างยิ่งในการศึกษาและสำรวจศักยภาพของฟีเจอร์นี้ก่อนที่จะถูกนำมาใช้งานจริงในวงกว้าง
ที่มา: CSS-Tricks
พบข้อมูลผิดพลาดในบทความนี้? แจ้งปัญหาบทความนี้
ความคิดเห็น
แสดงความคิดเห็น