بناء وهم شبكة متعرجة

استكشاف ممتع لطرق إعادة إنشاء خدعة بصرية باستخدام 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 لأنّها بدت مناسبة لأسلوب العرض على شكل صفوف، كما أنّها تتضمّن 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؟ تدرّج الألوان؟

لنستكشف الطرق المختلفة لإنشاء مواقع إلكترونية على الويب.

يمكنك إنشاء عرض توضيحي، إرسال تغريدة إليّ تتضمّن رابطًا إليه، وسأضيفه إلى قسم "ريمكسات من المنتدى" أدناه.

ريمكسات من إنشاء المنتدى