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

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

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

أنشئ عرضًا توضيحيًا وأرسِل إلينا رابطًا على Twitter، وسنضيفه إلى قسم الريمكسات التي أنشأها المستخدمون أدناه.

الريمكسات التي أنشأها المستخدمون