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