چگونه انجام می شود؟

همانطور که قبلا گفته شد، هر ماوس از برخی از اجزای مشابه استفاده مجدد می کند. این اجازه می دهد تا نشانه گذاری مختصر باشد و 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 در واقع آنقدرها هم که تصور می شود پیچیده نیست. اگر می‌خواهید بدانید چه سبک‌هایی در کجا اعمال می‌شوند، به آن مراجعه کنید منبع اصلی.

شکل ها و رنگ ها بیشتر با استفاده از شعاع مرزی دارایی با جعبه-سایه های متعدد، در حالی که اندازه واقعی و قرارگیری عناصر خاص ماوس توسط عناصر فرزند کابل کنترل می شود.

در نهایت، با استفاده از جاوا اسکریپت هوشمندانه، Bader کلاس ماوس والد را به روز می کند روی آیتم لیستی که کاربر روی آن کلیک می کند روی:

$('li').روی('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 امتحان کرده اید؟ موس اپل مورد علاقه شما کدام است؟ در نظرات به ما اطلاع دهید.