Een geschiedenis van de Apple Mouse in CSS
Kijk eens naar deze ongelooflijke pen , het is een eerbetoon aan hoe radicaal de Apple-muis in de loop der jaren is geëvolueerd. Met behulp van een slimme combinatie van CSS-tekeningen en overgangen, Josh Bader illustreert de prachtige eenvoud van een apparaat dat we - zonder een tweede oogopslag te geven - elke dag gebruiken.
Door de verschillende muizen te klikken (hoe meta!) Is nostalgisch. Het doet denken aan een tijd waarin het mogelijk was om iets te bereiken met het randapparaat, maar dat was lang niet zo indrukwekkend als het nu is. Met apps zoals BetterTouchTool en die van Apple besturingssysteem , we kunnen op die manier met de muis communiceren Doug Engelbart had nooit kunnen bedenken in 1963 (twintig jaar voor de originele Lisa Mouse).
Kijken naar de naadloze overgangen tussen de verschillende modellen onthult een paar merkwaardige overeenkomsten in de muizen en geeft een idee van hoe de muis evolueert. Het appellogo, hoewel niet altijd hetzelfde benadrukt, is aanwezig in alle ontwerpen. We beginnen de trage verdwijning van de standaard single-click interface in 1998 te zien met de release van de USB-muis van Apple (iMac Mouse in de pen).
Door alle dezelfde basiselementen opnieuw te gebruiken en overgangsstijlen op elke basis toe te passen, is de code net als het onderwerp elegant en eenvoudig. Met slechts een handvol elementen met muisspecifieke stijlen toegepast op elk van hen, heeft Bader een uniek kunstwerk gecreëerd dat kan worden gewaardeerd door zelfs degenen die minder CSS-savvy hebben.
Hoe is het gedaan?
Zoals eerder vermeld, hergebruikt elke muis enkele van dezelfde componenten. Hierdoor kan de opmaak beknopt zijn en de CSS op een logische manier worden gestructureerd die gemakkelijk te lezen is. Elke muis wordt vertegenwoordigd door zijn eigen blok, vergelijkbaar met wat hieronder wordt weergegeven:
/* 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 { }Ik heb de werkelijke stijlen uitgekleed zodat we ons kunnen concentreren op de daadwerkelijke structuur van de CSS. Het is eigenlijk niet zo ingewikkeld als je zou denken. Als u wilt weten waar stijlen worden toegepast, raadpleegt u de originele bron .
De vormen en kleuren worden meestal bereikt met behulp van de eigenschap Randradius met Multiple Box-Shadows , terwijl de werkelijke grootte en plaatsing van de muisspecifieke elementen wordt afgehandeld door de onderliggende elementen van de kabel.
Eindelijk, met wat slimme Javascript, werkt Bader de bovenliggende muisklasse bij op basis van het lijstitem waarop de gebruiker klikt:
$('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'));});Over het algemeen is dit een leuk stuk code om mee te spelen, ook al is het alleen maar voor de nostalgie. De patronen die hier worden gebruikt, kunnen eenvoudig worden toegepast op andere projecten. Het is fascinerend om deze projecten tot leven te zien komen op een site zoals Codepen, en de open aard van de site betekent dat iedereen in staat is om deze pen te vorsen en deze te veranderen op elke manier die zij geschikt achten.
Heb je geprobeerd om alleen CSS in te tekenen? Welke is je favoriete Apple-muis? Laat het ons weten in de comments.