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

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

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

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

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