דף זה תורגם על ידי Cloud Translation API.

יצירת צורות תמונה מעניינות באמצעות מאפיין נתיב הקליפ של CSS

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

Rachel Andrew

כל הרכיבים בדפי אינטרנט מוגדרים בתוך תיבה מלבנית. עם זאת, זה לא אומר שאנחנו צריכים לגרום להכול להיראות כמו קופסה. אפשר להשתמש במאפיין 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 כדי לגרום לטקסט לגלוש סביב הצורה הזו.

הערה: חשוב לזכור שאפשר להחיל צורות CSS רק על רכיבים צפים. המאפיין clip-path לא מחייב שהרכיב יהיה צף.

הרשימה המלאה של הצורות הבסיסיות:

`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 מתבצעת על בסיס כמה רעיונות.

תמונה מאת Matthew Henry ב-Burst.