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

تعرَّف على طرق إعادة ابتكار الخداع البصري باستخدام 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؟ متدرجة؟!

دعونا ننويع أساليبنا ونتعلم جميع طرق الإنشاء على الويب.

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

ريمكسات من المنتدى