גלישת תוכן סביב נתיבים מותאמים אישית
במשך תקופה ארוכה, מעצבי אתרים נאלצו ליצור במסגרת אילוצי המלבן. רוב התוכן באינטרנט עדיין נלכד בתיבות פשוטות, מאחר שרוב היוזמות היצירתיות לפריסה לא מלבנית מסתיימות בתסכול. זה עומד להשתנות עם ההשקה של צורות CSS, שזמינות החל מ-Chrome 37. צורות 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>
הצהרת CSS shape-outside: url(image.png) מנחה את הדפדפן לחלץ צורה מהתמונה.
המאפיין shape-image-threshold מגדיר את רמת האטימות המינימלית של פיקסלים שישמשו ליצירת הצורה. הערך שלו חייב להיות בטווח שבין 0.0 (שקיפות מלאה) לבין 1.0 (אטום לחלוטין). לכן, המשמעות של shape-image-threshold: 0.5 היא שרק פיקסלים עם שקיפות של 50% ומעלה ישמשו ליצירת הצורה.
המאפיין float הוא המפתח כאן. המאפיין shape-outside מגדיר את צורת האזור שמסביב לתוכן הדף, אבל בלי הצף, לא תראו את השפעות הצורה.
לרכיבים יש אזור צף בצד הנגדי לערך שלהם מסוג float. לדוגמה, אם רכיב עם תמונה של ספל קפה צף שמאלה, האזור הצפה ייווצר מימין לספל. למרות שניתן להנדס תמונה עם פערים בשני הצדדים, התוכן יקיף את הצורה רק בצד הנגדי שצוין על ידי המאפיין הצף, משמאל או מימין, אף פעם לא בשניהם.
בעתיד, ניתן יהיה להשתמש ב-shape-outside באלמנטים שאינם צפים עם המבוא להחרגות CSS.
יצירת צורות באופן ידני
מעבר לחילוץ צורות מתמונות, אפשר גם לתכנת אותן באופן ידני. אפשר לבחור מבין כמה ערכים פונקציונליים כדי ליצור צורות: circle(), ellipse(), inset() ו-polygon(). כל פונקציית צורה מקבלת קבוצת קואורדינטות והיא מותאמת לתיבת הפניה שיוצרת את מערכת הקואורדינטות. עוד מעט מידע על תיבות הפניה.
הפונקציה מעגלים()
הסימון המלא של ערך צורת עיגול הוא circle(r at cx cy), כאשר r הוא רדיוס העיגול, בעוד ש-cx ו-cy הן קואורדינטות של מרכז המעגל על ציר ה-X וציר ה-Y. הקואורדינטות של מרכז המעגל הן אופציונליות. אם משמיטים אותם, מרכז הרכיב (הצטלבות האלכסונים) ישמש כברירת המחדל.
.element{
shape-outside: circle(50%);
width: 300px;
height: 300px;
float: left;
}
בדוגמה שלמעלה, התוכן יכסה את החלק החיצוני של נתיב מעגלי. הארגומנט היחיד 50% מציין את רדיוס המעגל, שבמקרה הזה הוא מחצית מהרוחב או הגובה של הרכיב. שינוי מידות האלמנט ישפיע על הרדיוס של צורת העיגול. זוהי דוגמה בסיסית לאופן שבו צורות CSS יכולות להיות רספונסיביות.
לפני שנמשיך, יש מעבר למה שחשוב לזכור: חשוב לזכור שצורות CSS משפיעות רק על צורת השטח הצף שמסביב לאלמנט. אם לרכיב יש רקע, הוא לא ייחתך על ידי הצורה. כדי להשיג את האפקט הזה, צריך להשתמש במאפיינים מ-CSS Masking (הוספת מסיכות CSS) – clip-path או mask-image המאפיין clip-path מועיל מאוד כי הוא מופיע באותו סימון כמו צורות CSS, כך שאפשר לעשות שימוש חוזר בערכים.
באיורים שבמסמך הזה נעשה שימוש בחיתוך כדי להדגיש את הצורה ולעזור לך להבין את האפקטים.
חזרה לצורת העיגול.
כשמשתמשים באחוזים עבור רדיוס המעגל, הערך מחושב למעשה באמצעות נוסחה קצת יותר מורכבת: sqrt(width^2 + גובה^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.
בכל רגע נתון, אפשר להשתמש רק בתיבת הפניה אחת עם הצהרת shape-outside. כל תיבת הפניה תשפיע על הצורה באופן שונה, ולפעמים עדין. יש מאמר נוסף שמתעמק בנתונים ועוזר לך להבין תיבות עזר לצורות CSS.
הפונקציה ellipse()
שלוש נקודות נראות כמו עיגולים מכווצים. הן מוגדרות כ-ellipse(rx ry at cx cy), כאשר rx ו-ry הם הרדיוסים של האליפסה בציר ה-X ובציר ה-Y, ואילו cx ו-cy הן הקואורדינטות של מרכז האליפסה.
.element{
shape-outside: ellipse(150px 300px at 50% 50%);
width: 300px;
height: 600px;
}
ערכי האחוזים יחושבו מהמאפיינים של מערכת הקואורדינטות. אין צורך במתמטיקה מצחיקה כאן. אפשר להשמיט את הקואורדינטות של מרכז האליפסה, והן יוסקו ממרכז מערכת הקואורדינטות.
ניתן להגדיר רדיוסים בציר X ובציר Y גם באמצעות מילות מפתח: farthest-side מניב רדיוס השווה למרחק בין מרכז האליפסה וצלע תיבת העזר הרחוק ביותר ממנה, ואילו closest-side פירושו בדיוק ההפך - השתמש במרחק הקצר ביותר בין המרכז לצלע.
.element{
shape-outside: ellipse(closest-side farthest-side at 50% 50%);
/* identical to: */
shape-outside: ellipse(150px 300px at 50% 50%);
width: 300px;
height: 600px;
}
האפשרות הזו יכולה להועיל כאשר המידות של האלמנט (או תיבת ההפניה) עשויות להשתנות בדרכים בלתי צפויות, אבל אתם רוצים שצורת האליפסה תתאים.
ניתן להשתמש באותן מילות מפתח farthest-side ו-closest-side גם עבור הרדיוס בפונקציית הצורה circle().
הפונקציה template()
אם המעגלים והאליפסות מגבילות מדי, הפונקציה של צורת הפוליגון פותחת עולם שלם של אפשרויות. הפורמט הוא polygon(x1 y1, x2 y2, ...) שבו מציינים זוגות של קואורדינטות x y לכל קודקוד (נקודה) בפוליגון. מספר הזוגות המינימלי לציון פוליגון הוא שלוש, משולש.
.element{
shape-outside: polygon(0 0, 0 300px, 300px 600px);
width: 300px;
height: 600px;
}
הקודקודים ממוקמים במערכת הקואורדינטות. בפוליגונים רספונסיביים אפשר להשתמש בערכי אחוזים בחלק מהקואורדינטות או בכולן.
.element{
/* polygon responsive to font-size*/
shape-outside: polygon(0 0, 0 100%, 100% 100%);
width: 20em;
height: 40em;
}
יש פרמטר fill-rule אופציונלי, מיובא מ-SVG, שמורה לדפדפן איך להתחשב ב'פנים' של פוליגון במקרה של נתיבים או צורות מוקפות שמצטלבים. ג'וני טרית'ול מסביר היטב איך פועל כלל כלל המילוי ב-SVG. אם המדיניות לא מוגדרת, ברירת המחדל של fill-rule היא nonzero.
.element{
shape-outside: polygon(0 0, 0 100%, 100% 100%);
/* identical to: */
shape-outside: polygon(nonzero, 0 0, 0 100%, 100% 100%);
}
הפונקציה inset()
פונקציית הצורה inset() מאפשרת ליצור צורות מלבניות מסביבן כדי לעטוף את התוכן. זה יכול להישמע לא אינטואיטיבי אם כי ההנחה הראשונית היא ש-CSS מעצב תוכן אינטרנט חינמי מתיבות פשוטות. יכול מאוד להיות. עדיין לא מצאתי תרחיש לדוגמה עבור inset() שלא ניתן כבר להשיג באמצעות צפים ושוליים או באמצעות polygon(). למרות ש-inset() מספק ביטוי קריא יותר לצורות מלבניות מאשר polygon().
הסימון המלא של פונקציית inset הוא inset(top right bottom left border-radius). ארבעת הארגומנטים של המיקום הראשונים מקוזזים כלפי מעלה מהקצוות של הרכיב. הארגומנט האחרון הוא רדיוס הגבול של הצורה המלבנית. היא אופציונלית, לכן אפשר לא לכלול אותה. הוא תואם לסימון המקוצר border-radius שבו אתם כבר משתמשים ב-CSS.
.element{
shape-outside: inset(100px 100px 100px 100px);
/* yields a rectangular shape which is 100px inset on all sides */
float: left;
}
יצירת צורות מתיבות עזר
אם לא מציינים פונקציית צורה למאפיין shape-outside, אפשר לאפשר לדפדפן להסיק צורה מתיבת ההפניה של הרכיב. תיבת העזר שמוגדרת כברירת מחדל היא margin-box. אין שום דבר אקזוטי בינתיים. ככה הצפות כבר פועלות. אבל אם משתמשים בשיטה הזו, אפשר לעשות שימוש חוזר בגיאומטריה של יסוד מסוים. נסתכל על הנכס border-radius.
אם משתמשים בו כדי לעגל את הפינות של רכיב צף, מקבלים את אפקט החיתוך אבל האזור הצף נשאר מלבני. צריך להוסיף shape-outside: border-box כדי להקיף את הקו המתאר שנוצר על ידי border-radius.
.element{
border-radius: 50%;
shape-outside: border-box;
float: left;
}
כמובן שניתן להשתמש באופן הזה בכל תיבות העזר. הנה שימוש נוסף לצורות נגזרות – היסט של מירכאות.
ניתן להשיג את אפקט המשיכה של המירכאות על ידי שימוש במאפיינים צפים ושוליים בלבד. עם זאת, לשם כך עליכם למקם את רכיב הציטוט בעץ ה-HTML בנקודה שבה אתם רוצים שהוא יוצג.
כך ניתן להשיג את אותו אפקט של מירכאות כפולות עם תוספת גמישות:
.pull-quote{
shape-outside: content-box;
margin-top: 200px;
float: left;
}
הגדרנו במפורש את תיבת ההפניה content-box עבור מערכת הקואורדינטות של הצורה. במקרה הזה, כמות התוכן במירכאות מגדירת את הצורה סביבה שבה התוכן החיצוני יגלש. המאפיין margin-top משמש כאן כדי למקם (לקטוע) את המירכאות המשיכה, ללא קשר למיקום שלו בעץ ה-HTML.
עיצוב של שולי הצורה
תוכל לראות שעטיפת תוכן סביב צורה עלולה לגרום להישך קרוב מדי לאלמנט. אפשר להוסיף ריווח סביב הצורה באמצעות המאפיין shape-margin.
.element{
shape-outside: circle(40%);
shape-margin: 1em;
float: left;
}
ההשפעה דומה לזו שהתרגלתם להשתמש בה במאפיין margin הרגיל, אבל shape-margin משפיע רק על הרווח שמסביב לערך shape-outside. הוספת ריווח מסביב לצורה רק אם יש לה מקום במערכת הקואורדינטות. זו הסיבה לכך שבדוגמה שמעל רדיוס העיגול מוגדר ערך של 40% ולא 50%. אם הרדיוס הוגדר ל-50%, העיגול היה תופס את כל השטח במערכת הקואורדינטות ולא משאיר מקום להשפעה של shape-margin. חשוב לזכור שהצורה מוגבלת בסופו של דבר ל-margin-box של האלמנט (האלמנט ו-margin שמסביבו). אם הצורה גדולה וגולשת, היא תיחתך ל-margin-box ובסופו של דבר תיווצר צורה מלבנית.
חשוב להבין ש-shape-margin מקבל רק ערך חיובי אחד. אין לו סימון ארוך. בכל מקרה, מה זה שולי צורה של עיגול?
אנימציה של צורות
אתם יכולים לשלב צורות CSS עם תכונות רבות אחרות של CSS, כמו מעברים ואנימציות. עם זאת, חשוב לי להדגיש שזה מעצבן מאוד כשפריסת הטקסט משתנה במהלך הקריאה. אם מחליטים לטובת האנימציה של צורות, כדאי לשים לב במיוחד לחוויה.
אפשר להוסיף אנימציה של הרדיוסים והמרכזים של צורות circle() ו-ellipse(), כל עוד הן מוגדרות בערכים שהדפדפן יכול לבצע אינטרפולציה. אפשר לעבור מcircle(30%) אל circle(50%). עם זאת, יצירת אנימציה מ-circle(closest-side) עד circle(farthest-side) תחנוק את הדפדפן.
.element{
shape-outside: circle(30%);
transition: shape-outside 1s;
float: left;
}
.element:hover{
shape-outside: circle(50%);
}
אפשר לקבל אפקטים מעניינים יותר כשמוסיפים אנימציה של צורות polygon(), עם הערה חשובה: בפוליגון צריך להיות אותו מספר קודקודים בין שני מצבי האנימציה. לדפדפן אין אפשרות לבצע אינטרפולציה אם מוסיפים או מסירים קודקודים.
טריק אחד הוא להוסיף את כמות הקודקודים המקסימלית הדרושה ולמקם אותם מקובצים יחד במצב ההנפשה, שבו רוצים פחות קצוות תפסים.
.element{
/* four vertices (looks like rectangle) */
shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transition: shape-outside 1s;
}
.element:hover{
/* four vertices, but second and third overlap (looks like triangle) */
shape-outside: polygon(0 0, 100% 50%, 100% 50%, 0 100%);
}
גלישת תוכן בתוך צורה
הטיוטה הראשונית של המפרט של צורות CSS כללה מאפיין shape-inside שמאפשר לך לעטוף תוכן בתוך צורה. היו אפילו יישומים ב-Chrome וב-Webkit במשך תקופה מסוימת. עם זאת, כשכוללים תוכן במיקום שרירותי בנתיב מותאם אישית, נדרש הרבה יותר מאמץ ומחקר כדי לכסות את כל התרחישים האפשריים ולהימנע מבאגים. לכן הנכס shape-inside נדחה לצורות CSS ברמה 2 וההטמעות שלו בוטלו.
עם זאת, אם משקיעים מאמץ וקצת פשרות, עדיין אפשר להשיג את האפקט של גלישת תוכן בתוך צורה מותאמת אישית. בפריצה נעשה שימוש בשני רכיבים צפים, כאשר השדה shape-outside נמצא בצדדים הנגדיים של מאגר. הפשרה היא שעליך להשתמש באלמנט ריק אחד או שניים שאין להם משמעות סמנטית, אלא לשמש כתשתיות ליצירת אשליה של צורה שבתוכו.
<div>
<div class='left-shape'></div>
<div class='right-shape'></div>
Lorem ipsum...
</div>
יש חשיבות למיקום של רכיבי ה-strut .left-shape ו-.right-shape בחלק העליון של המכל, כי הם יצופו משמאל וימינה כדי לתחום את התוכן.
.left-shape{
shape-outside: polygon(0 0, ...);
float: left;
width: 50%;
height: 100%;
}
.right-shape{
shape-outside: polygon(50% 0, ...);
float: right;
width: 50%;
height: 100%;
}
בעקבות הסגנון הזה, שתי התוויות הצפות תופסות את כל השטח בתוך הרכיב, אבל מאפייני shape-outside תופסים מקום לשאר התוכן.
אם הדפדפן לא תומך בצורות CSS, זה יניב אפקטים מכוערים על ידי דחיפת כל התוכן למטה. לכן חשוב להשתמש בתכונה הזו באופן שישתפר בהדרגה.
בדוגמאות לאנימציה של צורות מוקדמות יותר, תבחינו שהזזת טקסט בתמונה יכולה להיות מטרידה. לא כל התרחישים לדוגמה מחייבים צורה מונפשת. עם זאת, אפשר להוסיף אנימציה לנכסים אחרים שמקיימים אינטראקציה עם צורות CSS כדי להוסיף אפקט כאשר הדבר הגיוני.
בהדגמה של אליס בארץ הפלאות של צורות CSS, השתמשנו במיקום הגלילה כדי לשנות את השוליים העליונים של התוכן. הטקסט מכווץ בין שני רכיבים צפים. כשהוא זז למטה, הוא צריך להתמסר בהתאם לshape-outside של שני הרכיבים הצפים. כך נוצר הרושם שהטקסט הזה יורד בחור של הארנב, וזה מוסיף לחוויית סיפור סיפורים. טקסט על גבול מיותר? אולי. אבל זה נראה מגניב.
מאחר שפריסת הטקסט מתבצעת באופן טבעי על ידי הדפדפן, הביצועים טובים יותר מהשימוש בפתרון JavaScript. עם זאת, שינוי השוליים העליון בזמן הגלילה גורם להפעלה של הרבה אירועים של עיבוד נתונים ועיבוד, וייתכן שזה יפגע בביצועים באופן משמעותי. צריך להשתמש באפשרות הזו בזהירות! עם זאת, שימוש בצורות CSS ללא אנימציה שלהן לא מניב היט ביצועים מורגש.
שיפור הדרגתי
קודם כל, בהנחה שהדפדפן לא תומך בצורות CSS, ומתבסס על כך כאשר מזהים את התכונה. פתרון מודרני הוא פתרון טוב לזיהוי תכונות, ומתבצעת בדיקה של צורות CSS בקטע זיהוי שאינו ליבה.
דפדפנים מסוימים מספקים זיהוי תכונות ב-CSS באמצעות כלל @supports ללא צורך בספריות חיצוניות. Google Chrome, שתומך גם בצורות CSS, מבין את הכלל @supports. כך משתמשים בו כדי לשפר בהדרגה:
.element{
/* styles for all browsers */
}
@supports (shape-outside: circle(50%)){
/* styles only for browsers which support CSS Shapes */
.element{
shape-outside: circle(50%);
}
}
לאה וורו כתבה מידע נוסף על איך משתמשים בכלל @supports של CSS.
הבחנה בין החרגות בשירותי CSS
מה שאנחנו מכירים היום כ'צורות CSS' נקרא 'אי-הכללה של CSS' ו'צורות CSS' בימים הראשונים של המפרט. השינוי במתן שמות עשוי להיראות כאילו הוא שונה, אבל למעשה הוא חשוב מאוד. החרגות ב-CSS הן עכשיו מפרט נפרד, שמאפשרות לעטוף תוכן סביב אלמנטים שממוקמים באופן שרירותי, ללא צורך במאפיין צף. נניח שעוטפים את התוכן סביב רכיב במיקום מוחלט. זה מקרה לדוגמה של החרגות ב-CSS. צורות CSS רק מגדירות את הנתיב שסביבו יגולש התוכן.
לכן, הצורות וההחרגות אינן זהות, אך הן משלימות זו את זו. צורות CSS זמינות כיום בדפדפנים, בעוד שהחרגות CSS עדיין לא מיושמות באינטראקציה של צורות.
כלים לעבודה עם צורות CSS
אפשר ליצור נתיבים בכלים הקלאסיים ליצירת תמונות, אבל אף אחד מהם, בזמן כתיבת ההודעה הזו, לא מייצא את התחביר הנדרש לערכים של צורות CSS. גם אם כן, זה לא יהיה מעשי מדי.
צורות CSS נועדו לשימוש בדפדפן, שבו הן מגיבות לרכיבים אחרים בדף. כדאי מאוד להמחיש את ההשפעות של עריכת הצורה על התוכן שמקיף אותו. יש כמה כלים שיעזרו לכם בתהליך העבודה הזה:
סוגריים מרובעים: התוסף CSS Formss Editor לרשימת סוגריים משתמש במצב תצוגה מקדימה בזמן אמת של עורך הקודים, כדי ליצור שכבת-על של עורך אינטראקטיבי לעריכת ערכי צורות.
Google Chrome: התוסף CSS shas Editor עבור Google Chrome מרחיב את הכלים למפתחים בדפדפן עם פקדים ליצירה ולעריכה של צורות. המערכת ממקמת עורך אינטראקטיבי מעל לרכיב שנבחר.
בכלי הבדיקה ב-Google Chrome יש תמיכה מובנית להדגשת צורות. מעבירים את העכבר מעל רכיב עם המאפיין shape-outside, והוא יואר כדי להמחיש את הצורה.
צורות מתמונות: אם אתם מעדיפים ליצור תמונות ולאפשר לדפדפן לחלץ מהן צורות, רבקה האק כתבה מדריך טוב ל-Photoshop.
Polyfill: Google Chrome הוא הדפדפן הגדול הראשון שמספק צורות CSS. בקרוב תהיה תמיכה בתכונה הזו ב-iOS 8 וב-Safari 8 של Apple. ייתכן שספקי דפדפנים אחרים ישקלו זאת בעתיד. עד אז, תוכלו להשתמש בפוליפיל של צורות CSS שמספק תמיכה בסיסית.
סיכום
באינטרנט שבו התוכן כלוכד בעיקר בתיבות פשוטות, צורות CSS מאפשרות ליצור פריסה מעוררת הבעה, המגשרת על הפער המדויק בין עיצוב האינטרנט לעיצוב הדפוס. כמובן, ניתן לנצל לרעה צורות וליצור הסחות דעת. אבל אם משתמשים בטעם ובשיקול דעת, אפשר לשפר את הצגת התוכן ולמקד את תשומת הלב של המשתמשים בדרך ייחודית.
יש לי אוסף עבודות של אחרים, בעיקר מדפוס, שבו ניתן לראות שימושים מעניינים בפריסה שאינה מלבנית. אני מקווה שזה ייתן לך השראה לנסות צורות CSS ולהתנסות ברעיונות חדשים לעיצוב.
תודה רבה לפרל צ'ן, אלן סטרנס וזולטן הורוואת' על הביקורת ועל התובנות החשובות שקיבלנו.