การใช้การตัดคลิปใน CSS จะช่วยให้เราออกจากทุกสิ่งในการออกแบบที่ดูเหมือนกล่องได้ การใช้รูปร่างพื้นฐานต่างๆ หรือ SVG จะช่วยให้คุณสร้างเส้นทางคลิปได้ จากนั้นตัดส่วนขององค์ประกอบที่ไม่ต้องการแสดงออก
องค์ประกอบบนหน้าเว็บทั้งหมดจะถูกระบุไว้ภายในกล่องสี่เหลี่ยมผืนผ้า
แต่นั่นไม่ได้หมายความว่าเราต้องทำให้ทุกอย่างดูเหมือนกล่อง
คุณใช้พร็อพเพอร์ตี้ clip-path
ของ CSS เพื่อตัดบางส่วนของรูปภาพหรือองค์ประกอบอื่นๆ ออกเพื่อสร้างเอฟเฟกต์ที่น่าสนใจได้
ในตัวอย่างด้านบน ภาพบอลลูนเป็นสี่เหลี่ยมจัตุรัส (แหล่งที่มา)
ใช้ clip-path
และค่ารูปร่างพื้นฐานของ circle()
ท้องฟ้าที่เกินมารอบๆ บอลลูนจะถูกตัดออกจากรูปภาพวงกลมในหน้าเว็บ
เนื่องจากรูปภาพเป็นลิงก์ คุณจึงดูสิ่งอื่นเกี่ยวกับพร็อพเพอร์ตี้ clip-path
ได้
คุณจะคลิกได้เฉพาะพื้นที่ที่มองเห็นได้ของรูปภาพเท่านั้น
เนื่องจากเหตุการณ์จะไม่เริ่มทำงานในส่วนที่ซ่อนอยู่ของรูปภาพ
การตัดสามารถนำมาใช้กับองค์ประกอบ HTML ใดก็ได้ ไม่ใช่เพียงรูปภาพเท่านั้น
วิธีสร้าง clip-path
มีอยู่ 2-3 วิธีด้วยกัน โดยเราจะพูดถึงวิธีการต่างๆ ในโพสต์นี้
ความเข้ากันได้กับเบราว์เซอร์
สำหรับเบราว์เซอร์รุ่นเดิม เบราว์เซอร์สำรองอาจมีการอนุญาตให้เบราว์เซอร์ละเว้นพร็อพเพอร์ตี้ 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 (ไม่บังคับ) ช่วยให้คุณกำหนดจุดศูนย์กลางของวงกลมได้
ในตัวอย่างด้านล่าง ฉันใช้ค่าคีย์เวิร์ดเพื่อตั้งค่าวงกลมที่ตัดไว้ด้านบนขวา
หรืออาจระบุความยาวหรือเปอร์เซ็นต์ก็ได้
ระวังขอบแบนนะ
โปรดระวังค่าทั้งหมดนี้ที่รูปร่างจะถูกตัดออกโดยกล่องระยะขอบในองค์ประกอบ ถ้าคุณสร้างวงกลมในรูปภาพ และรูปร่างนั้นจะขยายออกนอกขนาดปกติของรูปภาพ คุณจะมีขอบแบน
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