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

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

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

צור הדגמה (דמו), ציוץ לי קישורים ואני אוסיף אותה לקטע 'רמיקסים של הקהילה' למטה!

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