סאבי / בלוג / CSS / התכונה clip-path ב CSS וכיצד להשתמש בה

התכונה clip-path ב CSS וכיצד להשתמש בה

פוסט אש (לפי גוגל אנליטיקס) •

נכתב ע״י רועי יוסף •עודכן ב- 30 לאוקטובר, 2024 • 2 תגובות

clip-path היא תכונת CSS מאד מעניינת המאפשרת לכם ״לקטום״ (clip) חלק כלשהו הגלוי לעין באלמנטים כגון SVG, תמונות ו HTML.

התכונה יוצרת צורה כלשהי הקובעת איזה חלק מהאלמנט יהיה גלוי. החלק אשר בתוך הצורה יהיה גלוי והחלק מחוצה לה יהיה נסתר.

לפני שנסביר עוד על התכונה, תנו מבט בדוגמאות הבאות כאשר אתם מרחפים מעליהן עם העכבר. אלו ניתן לבצע באמצעות clip-path יחד עם הספרייה anime.js עליה כתבתי לא מעט:

בפוסט זה לא נסביר כיצד אותן האנימציות מעלה בוצעו, אתם מוזמנים לתת מבט באתר של Codrops ולקבל הסבר ודוגמאות על כיצד זה נעשה.

<span>סִינְטַקְס – </span>Syntax

הנה האפשרויות הקיימות עבורכם לשימוש בתכונה clip-path, לא נסביר את כולן אלא נתמקד בצורות המובנות (שורות 17-20), אך עם זאת נראה מספר דוגמאות ואני בטוח כי תבינו באמצעותן כיצד להשתמש בתכונת CSS מגניבה זו:

/* Keyword values */
clip-path: none;

/*  values */ 
clip-path: url(resources.svg#c1);

/*  values */
clip-path: margin-box;
clip-path: border-box;
clip-path: padding-box;
clip-path: content-box;
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;

/*  values */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');

/* Box and shape values combined */
clip-path: padding-box circle(50px at 0 100px);

/* Global values */
clip-path: inherit;
clip-path: initial;
clip-path: unset;

קביעת צורות בסיסיות באמצעות clip-path

התכונה clip-path מאפשרת דרך פשוטה לקטום (או לחתוך) צורות בסיסיות על ידי שימוש במילות המפתח polygon, circle, ellipse או inset, אשר הינם חלק מה CSS exclusion מודול.

פּוֹלִיגוֹן – Polygon

פּוֹלִיגוֹן היא הצורה הכי פלקסבילית מהצורות האפשריות מכיוון והיא מאפשרת לכם לקבוע מספר בלתי מוגבל של נקודות בדומה ל SVG Path. הנקודות שתספקו יהיו זוגות של קואורדינטות X ו Y שיכולות להיות בפיקסלים ובאחוזים בין היתר.

מכיוון וזו הצורה הכי פלקסבילית, היא גם הכי ״מסובכת״ ליצירה וכדאי אולי שתשמשו בכלי כזה או אחר לקביעת הנקודות.

בוא ניתן מספר דוגמאות. הראשונה (מימין לשמאל) היא התמונה המקורית, לאחריה תמונה עם clip-path בצורת משולש, לאחריה צורה מעט מורכבת יותר והאחרונה בצורת כוכב:

וזה ה CSS בו השתמשנו:

.polygon1 {
    -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.polygon2 {
    -webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
    clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}
.polygon3 {
    -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

עיגול – Circle

עיגולים בתכונה clip-path מוגדרים באמצעות הסִינְטַקְס הבא:

circle(radius at posX posY)

הנה דומאות:

וזה ה CSS בו השתמשנו:

.circle1 {
    -webkit-clip-path: circle(50%);
    clip-path: circle(50%);
}

.circle2 {
    -webkit-clip-path: circle(70% at 70% 20%);
    clip-path: circle(70% at 70% 20%);
}

אליפסה – Ellipse

אליפסה מוגדרת באמצעות הסִינְטַקְס הבא:

ellipse(radiusX radiusY at posX posY)

הנה ה CSS בו השתמשנו:

.ellipse1 {
  -webkit-clip-path: ellipse(50% 65% at 70% 50%);
  clip-path: ellipse(50% 65% at 70% 50%);
}
.ellipse2 {
  -webkit-clip-path: ellipse(50% 35%);
  clip-path: ellipse(50% 35%);
}

Inset

באמצעות inset ניתן להגדיר ריבוי פנימי וכל מה שמחוץ לריבוע זה יהיה ייחתך. ניתן גם ליצור ריבוע עם קצוות מעוגלים באמצעות מילת המפתח round וערך הרדיוס:

וזה ה CSS בו השתמשנו:

.inset1 {
    -webkit-clip-path: inset(20% 25% 20% 10%);
    clip-path: inset(20% 25% 20% 10%);
}
.inset2 {
    -webkit-clip-path: inset(35% 20% 41% 20% round 20px);
    clip-path: inset(35% 20% 41% 20% round 20px);
}

אנימציות ומעברים – Animations & Transitions

ניתן להוסיף אנימציות ל clip-path בכדי ליצור אפקטים מגניבים ומעניינים. אך עליכם לוודא כל שלב של אנימציה יכיל את אותו מספר הנקודות. תנו מבט:

והנה ה CSS איתו ביצענו אנימציה זו:

.animate {
    animation: shaping 4s infinite;
}

@keyframes shaping {
    0% {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    }
    20% {
        -webkit-clip-path: polygon(28% 0, 73% 0, 100% 100%, 0% 100%);
        clip-path: polygon(28% 0, 73% 0, 100% 100%, 0% 100%);
    }
    40% {
        -webkit-clip-path: polygon(0 0, 100% 72%, 100% 100%, 0 35%);
        clip-path: polygon(0 0, 100% 72%, 100% 100%, 0 35%);
    }
    60% {
        -webkit-clip-path: polygon(50% 0, 50% 0, 100% 100%, 0% 100%);
        clip-path: polygon(50% 0, 50% 0, 100% 100%, 0% 100%);
    }
    80% {
        -webkit-clip-path: polygon(0 70%, 100% 0, 100% 32%, 0 100%);
        clip-path: polygon(0 70%, 100% 0, 100% 32%, 0 100%);
    }
    100% {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    }
}

לסיכום

ברמת תמיכת דפדפנים מומלץ להשתמש בתחילית -webkit- בכדי לכסות את הדפדפנים התומכים. מעבר לכך נאמר כי רוב הדפדפנים תומכים במרבית האפשרויות של clip-pathֿ, לבטח בצורות הבסיסיות אותן הזכרנו בפוסט זה.

בקרוב אכתוב גם על Masking ו SVG Masks אז השארו מעודנים והרשמו לרשימת התפוצה! תגובות ושאלות יתקבלו בברכה…. 🙂