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

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

Rachel Andrew

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

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

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

การตัดสามารถนำมาใช้กับองค์ประกอบ HTML ใดก็ได้ ไม่ใช่เพียงรูปภาพเท่านั้น วิธีสร้าง clip-path มีอยู่ 2-3 วิธีด้วยกัน โดยเราจะพูดถึงวิธีการต่างๆ ในโพสต์นี้

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

การสนับสนุนเบราว์เซอร์

  • 55
  • 79
  • 3.5
  • 9.1

แหล่งที่มา

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

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

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

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

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

inset()

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

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

circle()

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

ระวังขอบแบนนะ

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

วงกลมเลื่อยขอบแบน
ตอนนี้รูปภาพที่ใช้ก่อนหน้านี้มีผล circle(50%) แล้ว เนื่องจากรูปภาพไม่ใช่สี่เหลี่ยมจัตุรัส เราจึงตีกรอบขอบด้านบนและด้านล่าง ทำให้วงกลมถูกตัดออก

ellipse()

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

polygon()

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

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

รูปร่างจากค่าของช่อง

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

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

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

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

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

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

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

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

การสร้างภาพเคลื่อนไหวบริเวณที่ถูกตัด

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

การใช้ภาพเคลื่อนไหวในการตัดคลิปทำได้หลากหลายวิธี ภาพเคลื่อนไหวด้วยเส้นทางแบบคลิปในเทคนิค CSS แสดงแนวคิดบางส่วน

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