เจาะลึกเทคนิคการทำแอนิเมชัน CSS border-image ให้เว็บไซต์น่าสนใจขึ้น

การตกแต่งขอบองค์ประกอบบนหน้าเว็บไซต์ด้วยเส้นขอบธรรมดาอย่าง solid หรือ dashed อาจดูน่าเบื่อเกินไปสำหรับยุคนี้ ทางออกที่น่าสนใจคือการนำรูปภาพหรือกราเดียนต์มาใช้เป็นขอบแทน แต่สิ่งที่น่าตื่นเต้นยิ่งกว่าคือการทำแอนิเมชันให้ขอบเหล่านี้เคลื่อนไหวได้ เพื่อสร้างส่วนติดต่อผู้ใช้ที่ดึงดูดสายตายิ่งขึ้น

อย่างไรก็ตาม การใช้ border-image มีข้อจำกัดใหญ่อยู่ข้อหนึ่งคือ ตัวขอบจะไม่โค้งไปตามรูปทรงขององค์ประกอบ ซึ่งถือเป็นอุปสรรคสำคัญสำหรับการทำแอนิเมชันที่ต้องวิ่งวนรอบองค์ประกอบ แต่เราสามารถหาแนวทางหลีกเลี่ยงข้อจำกัดนี้ได้ หรือจะเลือกใช้วิธีอื่นอย่าง CSS mask ของ Temani Afif ก็เป็นอีกหนึ่งตัวเลือกที่ยอดเยี่ยมเช่นกัน

เหตุผลที่น่าสนใจในการเลือกใช้ border-image มีดังนี้

• มีความคุ้มค่าและมีประสิทธิภาพสูงมาก โดยเฉพาะเมื่อต้องทำแอนิเมชันให้กับขอบและกราเดียนต์
• ช่วยให้การคัดลอกดีไซน์ไปยังขอบทุกด้านทำได้อย่างง่ายดายและเป็นอัตโนมัติ
• สามารถตัดแบ่งภาพได้ด้วยคุณสมบัติ border-image-slice ในลักษณะเดียวกับ background-size และ background-position

ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง

ในการเริ่มต้นใช้งาน เราสามารถสร้างองค์ประกอบพื้นฐานด้วย div สำหรับข้อความ จากนั้นกำหนดขนาดพื้นฐานและใส่ภาพพื้นหลังลงไป สำหรับตัวเส้นขอบ เราสามารถใช้ CSS gradient แบบสีเดี่ยวเพื่อความสะดวกในการสาธิตแอนิเมชัน และแยกค่าของ border-image ออกเป็น properties ย่อยๆ เพื่อให้เห็นภาพชัดเจนว่าค่าใดส่งผลต่อส่วนไหนของกราเดียนต์บ้าง

ความท้าทายหลักของการทำแอนิเมชันกราเดียนต์คือ โดยค่าเริ่มต้นแล้วเราไม่สามารถสั่งแอนิเมตกราเดียนต์ตรงๆ ได้ เนื่องจากจุดเริ่มต้นและจุดสิ้นสุดของกราเดียนต์ถูกกำหนดเป็นเปอร์เซ็นต์ การเปลี่ยนผ่านระหว่างสีจึงทำได้ยาก วิธีแก้คือการลงทะเบียน custom property ของเราเอง ซึ่งเปิดช่องให้เราสามารถแอนิเมตตัวแปร CSS ได้สำเร็จ

นอกเหนือจาก linear-gradient แบบเรียบง่ายแล้ว เรายังสามารถประยุกต์ใช้ conic-gradient ร่วมกับการแอนิเมตค่า border-image-slice และใช้ border-image-repeat แบบ round เพื่อเรียงต่อชิ้นส่วนภาพให้พอดีกับขอบเว็บไซต์ได้อย่างลงตัว

ที่มา: CSS-Tricks