יצירת אשליה של רשת עקומה

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

Adam Argyle

בפוסט הזה נעשה קצת כיף! בטח יש 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? גוון מדורג?!

נרחיב את הגישות שלנו ונלמד את כל הדרכים לפיתוח באינטרנט.

אפשר ליצור הדגמה, לשלוח ציוץ לי ולהוסיף אותה לקטע 'רמיקסים של הקהילה' בהמשך!

רמיקסים של הקהילה