Se på denne utrolige pennen , det er en hyllest til hvor radikalt Apple-musen har utviklet seg gjennom årene. Ved hjelp av en smart blanding av CSS-tegninger og overganger, Josh Bader illustrerer den vakre enkelheten til en enhet som - uten å gi et nytt blikk - bruker hver eneste dag.

Å klikke gjennom de forskjellige musene (hvordan meta!) Er nostalgisk. Det minner om en tid da det som var mulig å oppnå med periferien, ikke var så nær så imponerende som det er i dag. Med programmer som Better og Apples egen operativsystem , vi kan samhandle med musen på måter som Doug Engelbart kunne aldri ha forestilt seg i 1963 (tyve år før den opprinnelige Lisa-musen).

Å se på de sømløse overgangene mellom de forskjellige modellene, viser noen spesielle likheter i musene, og gir en følelse av at musen utvikler seg. Apple-logoen, mens den ikke alltid har samme vekt, er til stede i alle designene. Vi begynner å se den langsomme forsvinden av standard enkeltklikkgrensesnitt i 1998 med utgivelsen av Apples USB-mus (iMac Mouse i pennen).

Ved å gjenbruke alle de samme grunnleggende elementene, og bruke overgangsstiler til hver, er koden, som emnet, elegant og enkelt. Ved å bruke bare en håndfull elementer med musespesifikke stiler som er brukt til hver av dem, har Bader skapt et unikt kunstverk som kan verdsettes av selv de som kanskje er mindre CSS-kunnskapsrike.

mice_001
mice_002
mice_003
mice_004
mice_005
mice_006
mice_007
mice_008

Hvordan er det gjort?

Som tidligere nevnt, bruker hver mus noen av de samme komponentene. Dette gjør at oppslaget kan være konsistent og CSS skal struktureres på en logisk måte som er lett å lese. Hver mus er representert av sin egen blokk som ligner på det som vises nedenfor:

/* 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 { }

Jeg har fjernet de faktiske stilene slik at vi kan fokusere på den faktiske strukturen til CSS. Det er faktisk ikke så komplisert som man kanskje tror. Hvis du vil grave deg inn i hvilke stiler som brukes der, se i original kilde .

Formen og fargene blir for det meste gjennomført ved bruk av grensen-radiusegenskapen med Flere boks-skygger , mens den faktiske størrelsen og plasseringen av de musespesifikke elementene håndteres av kabelens barnelementer.

Endelig, med noen klare Javascript, oppdaterer Bader den overordnede museklassen basert på listen-elementet som brukeren klikker 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'));});

Samlet sett er dette veldig morsomt litt kode å leke med, selv om det bare er for nostalgi. Mønstrene som brukes her, kan lett brukes til andre prosjekter. Det er fascinerende å se at disse prosjektene kommer til live på et område som Codepen, og den åpne naturen til nettstedet betyr at alle kan gaffel denne pennen og endre den på en måte som de passer.

Har du prøvd å tegne bare CSS? Hvilket er din favoritt Apple-mus? Gi oss beskjed i kommentarene.