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

תחילת העבודה עם צורות CSS

גלישת תוכן בנתיב בהתאמה אישית

Razvan Caliman

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

אפשר להגדיר צורות באופן ידני או להסיק אותן מתמונות.

נבחן דוגמה פשוטה מאוד.

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

<img class="element" src="image.png" />
<p>Lorem ipsum…</p>

<style>
.element{
  shape-outside: url(image.png);
  shape-image-threshold: 0.5;
  float: left;
}
</style>

ההצהרה shape-outside: url(image.png) ב-CSS מורה לדפדפן לחלץ צורה מהתמונה.

המאפיין shape-image-threshold מגדיר את רמת השקיפות המינימלית של הפיקסלים שישמשו ליצירת הצורה. הערך שלו חייב להיות בטווח שבין 0.0 (שקוף לחלוטין) לבין 1.0 (אטום מלא). לכן, המשמעות של shape-image-threshold: 0.5 היא שרק פיקסלים עם שקיפות של 50% ומעלה ישמשו ליצירת הצורה.

המפתח כאן הוא המאפיין float. המאפיין shape-outside מגדיר את הצורה של האזור שסביבו התוכן יתגלגל, אבל בלי ה-float לא תראו את ההשפעות של הצורה.

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

בעתיד, תוכלו להשתמש ב-shape-outside ברכיבים שלא מרחפים, בעזרת ההכללות וההחרגות של CSS.

יצירת צורות באופן ידני

מעבר לחילוץ צורות מתמונות, אפשר גם לקודד אותן באופן ידני. אפשר לבחור מבין כמה ערכים פונקציונליים כדי ליצור צורות: circle(),‏ ellipse(),‏ inset() ו-polygon(). כל פונקציית צורה מקבלת קבוצת קואורדינטות, והיא מותאמת לתיבת עזר שמגדירה את מערכת הקואורדינטות. בקרוב נסביר על תיבות העזר.

הפונקציה circle()

הסימון המלא של ערך של צורה עגולה הוא circle(r at cx cy), כאשר r הוא הרדיוס של המעגל, ו-cx ו-cy הן הקואורדינטות של מרכז המעגל בציר X ובציר Y. הקואורדינטות של מרכז המעגל הן אופציונליות. אם משמיטים אותם, מרכז הרכיב (חיתוך האלכסונים שלו) ישמש כברירת המחדל.

.element{
  shape-outside: circle(50%);
  width: 300px;
  height: 300px;
  float: left;
}

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

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

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

חזרה לצורת העיגול.

כשמשתמשים באחוזים לחישוב רדיוס המעגל, הערך מחושב בפועל באמצעות נוסחה מורכבת יותר: sqrt(width^2 + height^2) / sqrt(2). כדאי להבין זאת מכיוון שהדבר יעזור לך לדמיין מה תהיה צורת העיגול שתתקבל אם מימדי הרכיב לא שווים.

אפשר להשתמש בכל סוגי היחידות של CSS בקואורדינטות של פונקציית הצורה – px,‏ em,‏ rem,‏ vw,‏ vh וכו'. אתם יכולים לבחור את האפשרות הכי גמישה או הכי קשיחה שמתאימה לצרכים שלכם.

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

.element{
  shape-outside: circle(50% at 0 0);
}

כך ממקמים את מרכז המעגל במקור של מערכת הקואורדינטות. מהי מערכת הקואורדינטות? כאן אנחנו משיקים את תיבות העזר.

תיבות עזרה לצורות CSS

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

חשוב לזכור ש-shape-outside משנה את הצורה של אזור הציפה שסביבו התוכן יתגגל. אזור הציפה משתרע עד לקצוות החיצוניים של התיבה שמוגדרת על ידי המאפיין margin. התיבה הזו נקראת margin-box והיא תיבה שמוגדרת כברירת מחדל לצורך הפניה לצורה, אם לא צוינה תיבת הפניה אחרת.

שתי ההצהרות הבאות ב-CSS מניבות תוצאות זהות:

.element{
  shape-outside: circle(50% at 0 0);
  /* identical to: */
  shape-outside: circle(50% at 0 0) margin-box;
}

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

.element{
  shape-outside: circle(50% at 0 0) margin-box;
  margin: 100px;
}

המקור של מערכת הקואורדינטות נמצא כעת מחוץ לאזור התוכן של הרכיב (100 פיקסלים למעלה ו-100 פיקסלים משמאל), כך גם מרכז המעגל. הערך המחושב של רדיוס המעגל גדל גם הוא כדי להביא בחשבון את השטח המוגדל של מערכת הקואורדינטות שנוצרה על ידי תיבת העזרה margin-box.