تأثير تشويه الماء خفيف الوزن

أنشأت Ksenia Kondrashova عرضًا توضيحيًا باستخدام تظليل جميل بتأثير مائي. تبدو واقعية، مثل الماء يتحرك في حمام السباحة. إنه يشعر بالهدوء والمنوم.

تأثير المنظر ثلاثي الأبعاد على التحويم

يقوم تيماني عفيف بإنشاء تأثيرات مذهلة باستخدام علامة صورة واحدة. هذا مثال رائع: تنشئ علامة HTML واحدة تأثيرًا ثلاثي الأبعاد مذهلاً... والكود بسيط جدًا! لا يتطلب العرض التوضيحي سوى 18 سطرًا من CSS!

التشبع الانتقائي عند التمرير

عرض توضيحي رائع آخر باستخدام عنصر صورة واحد. استخدمت آنا تيودور مرشحات SVG لتطبيق قناع استكمال الألوان وإبراز عناصر الصورة بناءً على اللون.

البطاطا المزعجة

ستحتاج إلى تشغيل مكبرات الصوت لهذا العرض التوضيحي الممتع لصوفيا وود (المعروفة أيضًا باسم Fractal Kitty). انقر على أزرار الصوت أو اضغط على الأزرار من 1 إلى 8 لتجعل البطاطس تتحدث... ولكن كن حذرًا، فقد يكون الأمر مسليًا ومزعجًا بنفس القدر.

معرض العجلات (CSS فقط)

معرض دائري متحرك أنشأه كريس بولسون. مرر الماوس فوق الصور وشاهدها متحركة. تعجبني الطريقة التي يظهر بها العنوان جنبًا إلى جنب مع حركة الصورة. سلس.

التنقيطية صور ناسا

عرض توضيحي آخر لصوفيا وود. لقد استخدمت P5 لتوليد النقاط التي يتم إنشاؤها بلا حدود. سيكون حجم كل دورة أصغر، مما يكشف عن صورة فضائية. كالعادة، مزيج إبداعي من الفن والبرمجة.

جدول المدقق اللون على النقيض من ذلك

يعد هذا عرضًا توضيحيًا لإمكانية الوصول "غير عادي": شبكة تحتوي على جميع أسماء ألوان CSS ومجموعة تباين الألوان الخاصة بها. استخدم ديف روبرت مواصفات WCAG 2.1 لتحديد النتائج.

علامة يارد الخاصة بي

يكرر كريس كويير هذه العلامة المميزة، ويطبق الرسوم المتحركة التي تعتمد على التمرير لجعل جميع الأسطر تضبط خطها ديناميكيًا (النص قابل للتحرير) بحيث تشغل جميع الأسطر نفس العرض. نظرًا لأنه يستخدم خاصية نطاق الرسوم المتحركة، فإن هذا العرض التوضيحي سيعمل فقط على Chrome.

مجموعة بطاقات متحركة تعتمد على التمرير مع أحداث تمرير سريعة

يقوم Paul Noble بإنشاء مجموعة بطاقات مذهلة تجمع بين الرسوم المتحركة التي تعتمد على التمرير وأحداث التمرير المفاجئة. يجب عليك استخدام لوحة التتبع (لن يعمل هذا العرض التوضيحي باستخدام الماوس) للاستمتاع بالانتقالات الرائعة.

تقدم مزدوج سريع

عرض توضيحي آخر لآنا تيودور. الكود نظيف وقصير ودلالي. أعجبني تصميم هذا المكون (من سؤال Reddit؟) ويمكنني أن أرى نفسي أستخدم شيئًا مشابهًا في بعض المشاريع.

إذا أعجبتك هذه القائمة، فاطلع على العروض التوضيحية للشهر الماضي!