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