تاريخ أبل ماوس في المغلق
إلقاء نظرة على هذا القلم لا يصدق ، إنه تحية لمدى تطوّر ماوس أبل على مرّ السنين. باستخدام مزيج ذكي من رسم CSS وتحولاته ، جوش بدر يوضح البساطة الجميلة للجهاز الذي نستخدمه كل يوم - دون إلقاء نظرة ثانية.
النقر من خلال الفئران المختلفة (كيف الفوقية!) هو الحنين إلى الماضي. إنها تذكرنا بالوقت الذي كان فيه ما يمكن تحقيقه مع المحيط الخارجي بعيدًا بقدر ما هو مثير للإعجاب اليوم. مع تطبيقات مثل BetterTouchTool وأبل الخاصة نظام التشغيل يمكننا التفاعل مع الماوس بطرق دوغ إنجلبارت لا يمكن أبدا أن يتصور في عام 1963 (عشرون عاما قبل الأصلي ليزا ماوس).
إن مشاهدة التحولات السلسة بين النماذج المختلفة تكشف عن بعض أوجه التشابه الغريبة في الفئران ، وتعطي فكرة عن تطور الفأرة. شعار التفاح ، على الرغم من عدم التركيز دائمًا ، موجود في جميع التصميمات. نبدأ في رؤية الاختفاء البطيء لواجهة قياسية بنقرة واحدة قياسية في عام 1998 مع إطلاق ماوس USB من Apple (iMac Mouse في القلم).
من خلال إعادة استخدام كل العناصر الأساسية نفسها ، وتطبيق أنماط النقل على كل منها ، فإن الشفرة ، مثل الموضوع ، أنيقة وبسيطة. باستخدام عدد قليل من العناصر باستخدام أنماط خاصة بالماوس مطبقة على كل منها ، ابتكر Bader عمل فني فريد يمكن تقديره حتى لأولئك الذين قد يكونوا أقل إدراكًا لـ CSS.
كيف يتم ذلك؟
كما ذكر سابقاً ، يقوم كل ماوس بإعادة استخدام بعض المكونات نفسها. هذا يسمح للعلامات أن تكون مختصرة وأن يتم تنظيم CSS بطريقة منطقية يسهل قراءتها. يتم تمثيل كل فأر بمجموعته الخاصة المشابهة لما هو معروض أدناه:
/* Name *//* Shapes and Colors */.name.mouse, .lisa.mouse .top { }.name.mouse { }.name.mouse .top { }.name .cable, .lisa .cable i, .lisa .button { }.name .cable { }/* Common styles for all “cable” elements like side buttons or cable protectors */.name .cable i { }/* Handles size and positioning of “cable” elements */.name .cable i:nth-child(1) { }.name .cable i:nth-child(2) { width: 60px; height: 10px; top: 90px; left: -25px; }.name .cable i:nth-child(3) { }.name .cable i:nth-child(4) { }.name .cable i:nth-child(5) { }/* These are self-explanatory */.name .button { }.name .logo { }لقد جردت الأنماط الفعلية حتى نتمكن من التركيز على البنية الفعلية لـ CSS. انها في الواقع ليست معقدة كما قد يعتقد المرء. إذا كنت ترغب في الحفر في الأنماط المطبقة ، فارجع إلى المصدر الأصلي .
يتم إنجاز الأشكال والألوان في الغالب باستخدام خاصية border-radius مع متعددة الظلال مربع ، بينما يتم التعامل مع الحجم الفعلي وموضع العناصر الخاصة بالماوس بواسطة العناصر الفرعية للكبل.
وأخيرًا ، مع بعض جافا سكريبت الذكية ، يقوم Bader بتحديث فئة الماوس الأم استنادًا إلى عنصر القائمة الذي يقوم المستخدم بالنقر فوقه:
$('li').on('click', function() {var self = $(this);$('.active').removeClass('active');self.addClass('active');self.closest('ul').attr('data-mouse', self.data('mouse') + ' mouse');$('.mouse').removeAttr('class').addClass('mouse ' + self.data('mouse'));});وعموما ، هذا هو القليل جدا من التعليمات البرمجية للعب مع ، حتى لو كان فقط من أجل الحنين إلى الماضي. يمكن بسهولة تطبيق الأنماط المستخدمة هنا على مشاريع أخرى. من الرائع رؤية هذه المشاريع تنبض بالحياة على موقع مثل Codepen ، وتعني الطبيعة المفتوحة للموقع أن أي شخص قادر على تشريب هذا القلم وتغييره بأي طريقة يرونها مناسبة.
هل حاولت الرسم في CSS فقط؟ ما هو ماوس أبل المفضل لديك؟ اسمحوا لنا أن نعرف في التعليقات.