clip-path היא תכונת CSS מאד מעניינת המאפשרת לכם ״לקטום״ (clip) חלק כלשהו הגלוי לעין באלמנטים כגון SVG, תמונות ו HTML.
התכונה יוצרת צורה כלשהי הקובעת איזה חלק מהאלמנט יהיה גלוי. החלק אשר בתוך הצורה יהיה גלוי והחלק מחוצה לה יהיה נסתר.
לפני שנסביר עוד על התכונה, תנו מבט בדוגמאות הבאות כאשר אתם מרחפים מעליהן עם העכבר. אלו ניתן לבצע באמצעות clip-path
יחד עם הספרייה anime.js עליה כתבתי לא מעט:
בפוסט זה לא נסביר כיצד אותן האנימציות מעלה בוצעו, אתם מוזמנים לתת מבט באתר של Codrops ולקבל הסבר ודוגמאות על כיצד זה נעשה.
<span>סִינְטַקְס – </span>Syntax
הנה האפשרויות הקיימות עבורכם לשימוש בתכונה clip-path, לא נסביר את כולן אלא נתמקד בצורות המובנות (שורות 17-20), אך עם זאת נראה מספר דוגמאות ואני בטוח כי תבינו באמצעותן כיצד להשתמש בתכונת CSS מגניבה זו:
קביעת צורות בסיסיות באמצעות clip-path
התכונה clip-path
מאפשרת דרך פשוטה לקטום (או לחתוך) צורות בסיסיות על ידי שימוש במילות המפתח polygon, circle, ellipse או inset, אשר הינם חלק מה CSS exclusion מודול.
פּוֹלִיגוֹן – Polygon
פּוֹלִיגוֹן היא הצורה הכי פלקסבילית מהצורות האפשריות מכיוון והיא מאפשרת לכם לקבוע מספר בלתי מוגבל של נקודות בדומה ל SVG Path. הנקודות שתספקו יהיו זוגות של קואורדינטות X ו Y שיכולות להיות בפיקסלים ובאחוזים בין היתר.
מכיוון וזו הצורה הכי פלקסבילית, היא גם הכי ״מסובכת״ ליצירה וכדאי אולי שתשמשו בכלי כזה או אחר לקביעת הנקודות.
בוא ניתן מספר דוגמאות. הראשונה (מימין לשמאל) היא התמונה המקורית, לאחריה תמונה עם clip-path
בצורת משולש, לאחריה צורה מעט מורכבת יותר והאחרונה בצורת כוכב:
![CSS clip-path Polygon](https://savvy.co.il/wp-content/themes/thesis/images/clip3.jpg.webp)
![CSS clip-path Polygon](https://savvy.co.il/wp-content/themes/thesis/images/clip3.jpg.webp)
![CSS clip-path Polygon](https://savvy.co.il/wp-content/themes/thesis/images/clip3.jpg.webp)
![CSS clip-path Polygon](https://savvy.co.il/wp-content/themes/thesis/images/clip3.jpg.webp)
וזה ה CSS בו השתמשנו:
עיגול – Circle
עיגולים בתכונה clip-path
מוגדרים באמצעות הסִינְטַקְס הבא:
הנה דומאות:
![CSS clip-path Circle](https://savvy.co.il/wp-content/themes/thesis/images/clip.jpg.webp)
![CSS clip-path Circle](https://savvy.co.il/wp-content/themes/thesis/images/clip.jpg.webp)
וזה ה CSS בו השתמשנו:
אליפסה – Ellipse
אליפסה מוגדרת באמצעות הסִינְטַקְס הבא:
![CSS clip-path Ellipse](https://savvy.co.il/wp-content/themes/thesis/images/clip.jpg.webp)
![CSS clip-path Ellipse](https://savvy.co.il/wp-content/themes/thesis/images/clip.jpg.webp)
הנה ה CSS בו השתמשנו:
Inset
באמצעות inset ניתן להגדיר ריבוי פנימי וכל מה שמחוץ לריבוע זה יהיה ייחתך. ניתן גם ליצור ריבוע עם קצוות מעוגלים באמצעות מילת המפתח round וערך הרדיוס:
![CSS clip-path Inset](https://savvy.co.il/wp-content/themes/thesis/images/clip.jpg.webp)
![CSS clip-path Inset](https://savvy.co.il/wp-content/themes/thesis/images/clip.jpg.webp)
וזה ה CSS בו השתמשנו:
אנימציות ומעברים – Animations & Transitions
ניתן להוסיף אנימציות ל clip-path
בכדי ליצור אפקטים מגניבים ומעניינים. אך עליכם לוודא כל שלב של אנימציה יכיל את אותו מספר הנקודות. תנו מבט:
![CSS clip-path Animation & Transitions](https://savvy.co.il/wp-content/themes/thesis/images/clip2.jpg.webp)
והנה ה CSS איתו ביצענו אנימציה זו:
לסיכום
ברמת תמיכת דפדפנים מומלץ להשתמש בתחילית -webkit-
בכדי לכסות את הדפדפנים התומכים. מעבר לכך נאמר כי רוב הדפדפנים תומכים במרבית האפשרויות של clip-pathֿ
, לבטח בצורות הבסיסיות אותן הזכרנו בפוסט זה.
בקרוב אכתוב גם על Masking ו SVG Masks אז השארו מעודנים והרשמו לרשימת התפוצה! תגובות ושאלות יתקבלו בברכה…. 🙂
איזה יופי של מאמרים! איך לא הכרתי את הבלוג הזה?!!
תודה אייל! שמח לשמוע שאתה אוהב 🙂