En historia av Apple Mouse i CSS
Ta en titt på denna otroliga penna , det är en hyllning till hur radikalt Apple-musen har utvecklats genom åren. Med hjälp av en smart blandning av CSS-ritningar och övergångar, Josh Bader illustrerar den vackra enkelheten hos en enhet som vi - utan att ge en andra blick - använder oss varje dag.
Att klicka genom de olika mössen (hur meta!) Är nostalgisk. Det påminner om en tid då det som var möjligt att åstadkomma med periferalen var ingenstans lika imponerande som idag. Med appar som BetterTouchTool och Apples egna operativ system , vi kan interagera med musen på sätt som Doug Engelbart kunde aldrig ha föreställt sig 1963 (tjugo år före den ursprungliga Lisa musen).
Titta på de sömlösa övergångarna mellan de olika modellerna avslöjar några märkliga likheter i mössen och ger en känsla av musen som utvecklas. Apple-logotypen, men inte alltid med samma tonvikt, är närvarande i alla mönster. Vi börjar se den långsamma försvinnandet av standard-enkelklickgränssnittet 1998 med utgåvan av Apples USB-mus (iMac Mouse i pennan).
Genom att återanvända alla samma grundläggande element och tillämpa övergångsstilar till var och en är koden, som ämnet, elegant och enkelt. Bader har bara skapat ett unikt konstverk som kan uppskattas av dem som kanske är mindre CSS-kunniga, med hjälp av bara en handfull element med musspecifika stilar som tillämpas på var och en av dem.
Hur är det gjort?
Som tidigare nämnts, återanvändar varje mus några av samma komponenter. Detta gör att markeringen är koncis och CSS ska struktureras på ett logiskt sätt som är lätt att läsa. Varje mus representeras av sitt eget block som liknar vad som visas nedan:
/* 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 { }Jag har tagit bort de faktiska stilar så att vi kan fokusera på CSSs faktiska struktur. Det är faktiskt inte så komplicerat som man kanske tror. Om du vill gräva i vilka stilar som tillämpas där, hänvisar du till ursprunglig källa .
Formerna och färgerna uppnås mestadels med hjälp av egenskapen för gränstradie med Flera rutaskuggor , medan den faktiska storleken och placeringen av de musspecifika elementen hanteras av kabelns barnelement.
Slutligen, med lite smart Javascript, uppdaterar Bader föräldermusklassen baserat på listobjektet som användaren klickar på:
$('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'));});Sammantaget är det här väldigt roligt lite kod att leka med, även om det bara är för nostalgi. Mönstren som används här kan enkelt appliceras på andra projekt. Det är fascinerande att se att dessa projekt kommer att leva på en webbplats som Codepen, och den öppna naturen på webbplatsen innebär att någon kan förenkla denna penna och ändra den på något sätt som de passar.
Har du försökt skriva in bara CSS? Vilken är din favorit Apple-mus? Låt oss veta i kommentarerna.