สร้างรูปร่างรูปภาพที่น่าสนใจด้วยพร็อพเพอร์ตี้คลิปเส้นทางของ CSS

การใช้การตัดข้อความใน CSS จะช่วยให้เราออกจากส่วนต่างๆ ที่งานออกแบบมีลักษณะคล้ายกล่องสี่เหลี่ยม คุณสร้างเส้นทางคลิปได้โดยใช้รูปทรงพื้นฐานต่างๆ หรือ SVG จากนั้นตัดส่วนขององค์ประกอบที่คุณไม่ต้องการแสดงออก

Rachel Andrew

องค์ประกอบทั้งหมดในหน้าเว็บจะกำหนดไว้ในกล่องสี่เหลี่ยมผืนผ้า แต่ไม่ได้หมายความว่าเราจะต้องทำทุกอย่างให้ดูเหมือนกล่อง คุณสามารถใช้พร็อพเพอร์ตี้ CSS clip-path เพื่อตัดบางส่วนของรูปภาพหรือองค์ประกอบอื่นๆ ออก เพื่อสร้างเอฟเฟกต์ที่น่าสนใจ

ในตัวอย่างข้างต้น ภาพบอลลูนเป็นรูปสี่เหลี่ยมจัตุรัส (แหล่งที่มา) ใช้ clip-path และค่ารูปร่างพื้นฐานของ circle() ท้องฟ้าที่อยู่รอบๆ บอลลูนจะถูกตัดออก เหลือภาพวงกลมไว้ในหน้าเว็บ

เนื่องจากรูปภาพเป็นลิงก์ คุณจึงเห็นสิ่งอื่นๆ เกี่ยวกับพร็อพเพอร์ตี้ clip-path ได้ สามารถคลิกได้เฉพาะส่วนที่มองเห็นได้ของรูปภาพ เนื่องจากเหตุการณ์จะไม่เริ่มทำงานในส่วนที่ซ่อนอยู่ของรูปภาพ

การตัดใช้ได้กับองค์ประกอบ HTML ใดก็ได้ ไม่ใช่แค่รูปภาพ การสร้าง clip-path มีหลายวิธีด้วยกัน ซึ่งเราจะอธิบายในบทความนี้

ความเข้ากันได้กับเบราว์เซอร์

สำหรับเบราว์เซอร์เวอร์ชันเก่า เบราว์เซอร์สำรองอาจอนุญาตให้เบราว์เซอร์ละเว้นพร็อพเพอร์ตี้ clip-path และแสดงรูปภาพที่ไม่ได้ตรึง หากนี่เป็นปัญหา คุณสามารถทดสอบสำหรับ clip-path ในการค้นหาฟีเจอร์ และเสนอเลย์เอาต์สำรองสำหรับเบราว์เซอร์ที่ไม่รองรับ

@supports(clip-path: circle(45%)) {
  /* code that requires clip-path here. */
}

รูปทรงพื้นฐาน

พร็อพเพอร์ตี้ clip-path สามารถใช้ค่าได้หลายค่า ค่าที่ใช้ในตัวอย่างแรกคือ circle() นี่คือหนึ่งในค่ารูปร่างพื้นฐาน ซึ่งกำหนดไว้ใน ข้อกำหนดเกี่ยวกับรูปร่าง CSS ซึ่งหมายความว่าคุณสามารถตัดพื้นที่ และใช้ค่าเดียวกันสำหรับ shape-outside เพื่อทำให้ข้อความล้อมรอบรูปร่างนั้น

รายการรูปร่างพื้นฐานทั้งหมดมีดังนี้

• inset()
• circle()
• ellipse()
• polygon()

inset()

ค่า inset() จะแทรกพื้นที่ที่ตัดจากขอบขององค์ประกอบ และสามารถส่งค่าสำหรับขอบด้านบน ด้านขวา ด้านล่าง และด้านซ้าย คุณยังเพิ่ม border-radius ลงในมุมโค้งของพื้นที่ที่ตัดได้ด้วย โดยใช้คีย์เวิร์ด round

ในตัวอย่างของฉัน ฉันมี 2 กล่องที่มีคลาส .box ทั้งคู่ ช่องที่ 1 ไม่มีการคลิป ส่วนช่องที่ 2 มีการตัดทอนโดยใช้ค่า inset()

circle()

จากที่เห็น ค่า circle() สร้างพื้นที่ที่ตัดเป็นวงกลม ค่าแรกคือความยาวหรือเปอร์เซ็นต์ และเป็นรัศมีของวงกลม ค่าที่ไม่บังคับที่ 2 ช่วยให้คุณกำหนดจุดศูนย์กลางของวงกลมได้ ในตัวอย่างด้านล่าง ฉันใช้ค่าคีย์เวิร์ดเพื่อตั้งค่าวงกลมที่ตัดออกที่ด้านขวาบน คุณยังใช้ความยาวหรือเปอร์เซ็นต์ได้ด้วย

ระวังอย่าให้โดนขอบแบน!

โปรดทราบว่าค่าทั้งหมดเหล่านี้จะทำให้รูปร่างถูกตัดโดยกล่องระยะขอบบนองค์ประกอบ หากคุณสร้างวงกลมในรูปภาพ และรูปร่างนั้นจะขยายออกนอกขนาดธรรมชาติของรูปภาพ ขอบจะแบน

ellipse()

วงรีโดยพื้นฐานแล้วคือวงกลมที่ถูกบีบอัด จึงทํางานคล้ายกับ circle() มาก แต่ยอมรับรัศมีสําหรับ x และรัศมีสําหรับ y รวมถึงค่าสําหรับจุดศูนย์กลางของวงรี

polygon()

ค่า polygon() ช่วยให้คุณสร้างรูปร่างที่ค่อนข้างซับซ้อนได้ กำหนดจุดได้มากตามที่ต้องการ โดยการตั้งค่าพิกัดของแต่ละจุด

เพื่อช่วยคุณสร้างรูปหลายเหลี่ยมและดูสิ่งที่เป็นไปได้ โปรดดู Clippy โปรแกรมสร้าง clip-path จากนั้นให้คัดลอกและวางโค้ดลงในโปรเจ็กต์ของคุณเอง

รูปร่างจากค่าในช่อง

รูปร่างที่กําหนดไว้ในรูปร่าง CSS ก็คือรูปร่างจากค่ากล่อง ค่าเหล่านี้เกี่ยวข้องกับรูปแบบ CSS Box ซึ่งได้แก่ ช่องเนื้อหา ช่องระยะห่างจากขอบ ช่องเส้นขอบ และช่องขอบซึ่งมีค่าคีย์เวิร์ด content-box, border-box, padding-box และ margin-box

ค่าเหล่านี้สามารถใช้เพียงอย่างเดียวหรือใช้ร่วมกับรูปร่างพื้นฐานเพื่อกำหนดกล่องอ้างอิงที่รูปร่างใช้ ตัวอย่างเช่น ตัวอย่างต่อไปนี้จะตัดรูปร่างกับขอบของเนื้อหา

.box {
  clip-path: content-box;
}

ในตัวอย่างนี้ วงกลมจะใช้ content-box เป็นช่องอ้างอิงแทน margin-box (ซึ่งเป็นค่าเริ่มต้น)

.box {
  clip-path: circle(45%) content-box;
}

ปัจจุบันเบราว์เซอร์ไม่รองรับการใช้ค่าช่องสำหรับพร็อพเพอร์ตี้ clip-path แต่รองรับ shape-outside

การใช้องค์ประกอบ SVG

สำหรับการควบคุมพื้นที่ที่ตัดมากกว่าที่ทำได้ด้วยรูปร่างพื้นฐาน ใช้องค์ประกอบ SVG clipPath จากนั้นอ้างอิงรหัสนั้นโดยใช้ url() เป็นค่าสำหรับ clip-path

ภาพเคลื่อนไหวบริเวณที่เสียรายละเอียด

คุณสามารถใช้การเปลี่ยนและภาพเคลื่อนไหวของ CSS กับ clip-path เพื่อสร้างเอฟเฟกต์ที่น่าสนใจ ในตัวอย่างต่อไปนี้ ฉันกำลังสร้างวงกลมเมื่อเลื่อนเมาส์ไปวาง โดยการเปลี่ยนระหว่างวงกลม 2 วงที่มีค่ารัศมีต่างกัน

คุณใช้ภาพเคลื่อนไหวร่วมกับคลิปได้หลายวิธีอย่างสร้างสรรค์ การสร้างภาพเคลื่อนไหวโดยใช้เส้นทางคลิปในเทคนิค CSS จะเป็นแนวทางบางอย่าง

รูปภาพโดย Matthew Henry ใน Burst