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

חיתוך אלמנטים באמצעות התכונה clip-path של CSS.

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

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

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

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

סִינְטַקְס – 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 clip-path Polygon
CSS clip-path Polygon
CSS clip-path Polygon
CSS clip-path Polygon

וזה ה 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 clip-path Circle
CSS clip-path Circle

וזה ה 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 clip-path Ellipse
CSS clip-path Ellipse

הנה ה 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 clip-path Inset
CSS clip-path Inset

וזה ה 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 clip-path Animation & Transitions

והנה ה 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 אז השארו מעודנים והרשמו לרשימת התפוצה! תגובות ושאלות יתקבלו בברכה…. 🙂

Further Reading:

רועי יוסף
רועי יוסף

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

1תגובות...
  • אייל 20 במאי 2019, 17:29

    איזה יופי של מאמרים! איך לא הכרתי את הבלוג הזה?!!

השאירו תגובה

פעימות
Up!