סקירה מהנה של דרכים לשחזור אשליה אופטית באמצעות CSS.
בפוסט הזה נעשה קצת כיף! בטח יש 100 דרכים ליצור את האשליה האופטית הזו, ואשתף איתכם רק את הרעיונות שלי, אבל מומלץ לנסות גם את הסגנון שלכם. לנסות את הדמו ולעיין במקור.
אם אתם מעדיפים סרטון, הנה גרסה של הפוסט הזה ב-YouTube:
סקירה כללית
שם האשליה הזו הוא האשליה של קיר בית הקפה. אין שום קווים עקומים, אבל העיניים שלנו תופסות נטייה לזווית. יכול להיות שיהיה קשה להאמין, אבל בנייה מחדש תעזור לכם לראות מעבר לאשליה.
Markup
קוד ה-HTML של האפשרות הזו מורכב משורות ועמודות פשוטות. <body>
הוא המאגר עם <div class="row">
לילד או לילדה. כל שורה מכילה חמישה רכיבי <div
class="square">
.
<div class="row">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
…
סגנונות
בחרתי בCSS grid כי הוא נראה מתאים לסגנון ההצגה של השורות, וגם יש בו את justify-content
שנראה לי דרך טובה ליישר את צאצאי השורות.
קטגוריות רכב
התחלתי עם סגנונות הגוף, והשתמשתי ב-display: grid
וב-grid-auto-rows
כדי לספק את הפריסות של השורות. הערך של calc()
שמוצג בגדלי השורות מתייחס לגבול של כל שורה, ומאפשר לאפקט להתאים את עצמו למסך המלא.
body {
display: grid;
grid-auto-rows: calc(20vh - 4px);
gap: 4px;
background: gray;
margin: 0;
}
סגנונות שורות
כאן בחרתי שוב באפשרות 'מרשת', אבל במקום ליצור שורות באמצעותה, השתמשתי ב-grid-auto-flow: column
כדי לשנות את הכיוון לעמודות. לאחר מכן מגדירים את גדלי העמודות ומוסיפים קצת מרווח פנימי בשורה, כדי שהתיבות לא יגיעו לקצה שדה התצוגה. לאחר מכן, מטרגטים שורות מסוימות ומרכזים את התוכן ב-center
או ב-end
, וכך יוצרים את ההיסט שמניע את האשליה.
.row {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 9vw;
padding-inline: 4vw;
gap: 10vw;
background: white;
}
.row:nth-child(even) {
justify-content: center;
}
.row:nth-child(3n) {
justify-content: end;
}
סגנונות ריבועיים
עכשיו כל מה שנותר הוא לשנות את צבע הריבועים ולהוסיף גבול:
.square {
border-inline: 4px solid gray;
background: black;
}
סיכום
עכשיו, אחרי שסיפרתי לך איך עשיתי את זה, איך היית עושה את זה? 🙂 צפים? Flexbox? גוון מדורג?!
נרחיב את הגישות שלנו ונלמד את כל הדרכים לפיתוח באינטרנט.
אתם יכולים ליצור גרסת דמו, לשלוח לי קישורים בטוויטר ואוסיף אותה לקטע 'רמיקסים של הקהילה' שבהמשך.
רמיקסים של הקהילה
- סימון של Boots באמצעות מעברים: דוגמה וקוד