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

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

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

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

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