ساختن یک توهم شبکه کج

یک کاوش سرگرم کننده در راه های بازسازی یک توهم نوری با CSS.

آدام آرگیل

در این پست قصد داریم کمی سرگرم شویم! باید 100 راه برای رسیدن به این توهم نوری وجود داشته باشد، و من فقط می خواهم افکارم را با شما در میان بگذارم، اما شما را تشویق می کنم که سبک خود را امتحان کنید. نسخه ی نمایشی را امتحان کنید و منبع را مشاهده کنید .

اگر ویدیو را ترجیح می دهید، در اینجا یک نسخه YouTube از این پست وجود دارد:

بررسی اجمالی

نام این توهم توهم دیوار کافه است. هیچ خط کجی در هیچ کجا یافت نمی شود، اما چشمان ما کج ها را درک می کنند. شاید باورش سخت باشد، اما بازسازی آن قطعا به شما کمک می کند تا از طریق توهم ببینید.

نشانه گذاری

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 برای تغییر جهت به ستون استفاده کردم. سپس اندازه ستون‌ها را تعریف می‌کنم و کمی بالشتک درون خطی به سطر اضافه می‌کنم تا کادرها در لبه viewport اجرا نشوند. سپس ردیف‌های خاصی را هدف قرار می‌دهم و محتوا را در 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;
}

نتیجه

حالا که می دانی من چگونه این کار را انجام دادم، شما چطور؟! 🙂 شناور؟ فلکس باکس؟ شیب؟!

بیایید رویکردهایمان را متنوع کنیم و همه راه‌های ساخت در وب را بیاموزیم.

یک نسخه نمایشی ایجاد کنید، پیوندها را برای من توییت کنید ، و من آن را به بخش ریمیکس های انجمن در زیر اضافه می کنم!

ریمیکس های انجمن