השימוש בחיתוך ב-CSS יכול לעזור לנו להתרחק מכל מה שנמצא בעיצובים שלנו שנראים כמו קופסה. אפשר ליצור נתיב לקליפ באמצעות מגוון צורות בסיסיות או SVG. לאחר מכן אפשר לחתוך ולהסיר את החלקים של האלמנט שאתם לא רוצים להציג.
רכיבים בדפי אינטרנט מוגדרים כולם בתוך תיבה מלבנית.
עם זאת, אין זה אומר שעלינו לעצב הכל כקופסה.
ניתן להשתמש במאפיין 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()
הערך inset() מגדיר את האזור החתוך מקצה האלמנט, ואפשר להעביר לו ערכים בקצה העליון, מימין, מהתחתית ובקצה השמאלי.
אפשר גם להוסיף border-radius כדי לעקל את הפינות של השטח שנחתך, באמצעות מילת המפתח round.
בדוגמה שלי יש שתי תיבות עם מחלקה של .box.
בתיבה הראשונה אין חיתוך, השנייה נחתכת בהתאם לערכים של inset().
circle()
כפי שראית, הערך circle() יוצר שטח עגול עם חיתוך.
הערך הראשון הוא אורך או אחוז, והוא רדיוס המעגל.
ערך אופציונלי שני מאפשר לך להגדיר את מרכז המעגל.
בדוגמה שלמטה אני משתמש בערכי מילות מפתח כדי להגדיר את העיגול הקטוע שלי בפינה הימנית העליונה.
אפשר גם להשתמש באורכים או באחוזים.
חשוב להיזהר בקצוות שטוחים.
בכל הערכים האלה, צריך לשים לב שהצורה תיחתך על ידי תיבת השוליים של הרכיב. אם יוצרים עיגול על תמונה, והצורה הזו חורגת מהגודל הטבעי של התמונה, מקבלים קצה ישר.
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;
}
בשלב זה, דפדפנים לא תומכים בשימוש בערכי תיבה עבור הנכס clip-path.
עם זאת, הן נתמכות עבור shape-outside.
שימוש ברכיב SVG
כדי שתהיה לכם יותר שליטה על האזור הקטוע בקשר לצורות הבסיסיות, כדאי להשתמש ברכיב clipPath של SVG.
לאחר מכן צריך להפנות למזהה הזה, ולהשתמש ב-url() כערך של clip-path.
יצירת אנימציה של אזור החיתוך
אפשר להחיל אנימציות ומעברים של CSS ב-clip-path כדי ליצור אפקטים מעניינים.
בדוגמה הבאה אני יוצר אנימציה של מעגל בעת העברת העכבר, על ידי מעבר בין שני מעגלים עם ערך רדיוס שונה.
יש הרבה דרכים יצירתיות שבהן אפשר להשתמש באנימציה עם קליפים. אנימציה עם נתיב קליפ בטריקים של CSS מבוססת על כמה רעיונות.
צילום: מתיו הנרי ב-Burst.