En historie med Apple Mouse i CSS
Se på denne utrolige pen , det er en hyldest til, hvor radikalt Apple musen har udviklet sig gennem årene. Ved hjælp af en smart blanding af CSS tegning og overgange, Josh Bader illustrerer den smukke enkelhed af en enhed, der - uden at give et andet blik - bruger vi hver eneste dag.
Klikning gennem de forskellige mus (hvordan meta!) Er nostalgisk. Det minder om en tid, hvor det, der var muligt at opnå med periferien, ikke var så nær så imponerende som det er i dag. Med apps som BetterTouchTool og Apples egen operativ system , vi kan interagere med musen på måder som Doug Engelbart kunne aldrig have forestillet sig i 1963 (tyve år før den originale Lisa Mouse).
At se de sømløse overgange mellem de forskellige modeller afslører nogle mærkelige ligheder i musene og giver en følelse af musens udvikling. Apple-logoet, men ikke altid med samme vægt, er til stede i alle design. Vi begynder at se den langsomme forsvinden af standard-enkelt-klik-grænsefladen i 1998 med udgivelsen af Apples USB-mus (iMac Mouse i penen).
Ved at genbruge alle de samme grundelementer og anvende overgangsstile til hver enkelt, er koden som det emne, elegant og simpelt. Ved at bruge bare en håndfuld elementer med musespecifikke stilarter, der er anvendt til hver af dem, har Bader skabt et unikt kunstværk, der kan værdsættes af dem, der måske er mindre CSS-kyndige.
Hvordan er det gjort?
Som tidligere nævnt genbruger hver mus nogle af de samme komponenter. Dette gør det muligt at opdele markeringen, og CSS'en skal struktureres på en logisk måde, der er let at læse. Hver mus er repræsenteret af sin egen blok svarende til det, der 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 stilarter, så vi kan fokusere på den faktiske struktur af CSS. Det er faktisk ikke så kompliceret som man måske tror. Hvis du gerne vil grave ind i, hvilke stilarter der anvendes hvor henvises til original kilde .
Formerne og farverne opnås for det meste ved hjælp af grænseradiusegenskaben med Flere boks-skygger , mens den faktiske størrelse og placering af de musespecifikke elementer håndteres af kabelens barnelementer.
Endelig opdaterer Bader med nogle klog Javascript, forældremusklassen baseret på det listemateriale, som brugeren 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 set er det meget sjovt lidt kode at lege med, selvom det bare er for nostalgi. De her anvendte mønstre kan let anvendes til andre projekter. Det er fascinerende at se, at projekterne kommer til live på et websted som Codepen, og webstedets åbne natur betyder, at alle er i stand til at gaffel denne pen og ændre den på enhver måde, de finder passende.
Har du forsøgt at tegne i bare CSS? Hvilket er din foretrukne Apple-mus? Lad os vide i kommentarerne.