Katso tämä uskomaton kynä , se on kunnia siitä, miten Apple-hiiri on kehittynyt radikaalisti vuosien varrella. Käyttämällä CSS-piirtämisen ja siirtymien älykäs sekoitus, Josh Bader kuvaa laitteen kaunista yksinkertaisuutta, joka - ilman toisen silmäyksen - käytämme jokaista päivää.

Klikkaamalla eri hiirillä (miten meta!) On nostalgista. Se muistuttaa ajankohtaa, jolloin se, mikä oli mahdollista saavuttaa syrjäseuduilla, ei ollut läheskään yhtä vaikuttavaa kuin nykyäänkin. Sovellusten kanssa BetterTouchTool ja Applen oma käyttöjärjestelmä , voimme vuorovaikutuksessa hiirellä tällä tavoin Doug Engelbart ei voinut kuvitella vuonna 1963 (kaksikymmentä vuotta ennen alkuperäistä Lisa Mousea).

Eri mallien välisten saumattomien siirtymien tarkastelu paljastaa hiiren erityisiä samankaltaisuuksia ja antaa hiiren tunteen kehittyvän. Alle-logo, vaikka se ei aina ole samaa painoarvoa, on mukana kaikissa kuvioissa. Aloitamme nähdä vakiokohdan yhden napsautuksen käyttöliittymän hidas katoamisen vuonna 1998 julkaisemalla Applen USB-hiiren (iMac-hiiri kynässä).

Kun käytät kaikkia samoja peruselementtejä ja siirrät tyylit kustakin, koodi on, kuten aihe, tyylikäs ja yksinkertainen. Käyttämällä vain muutamia elementtejä, joihin hiirellä on erityisiä tyylejä, heihin sovelletaan jokaista, Bader on luonut ainutlaatuisen taideteoksen, jota voidaan arvostaa jopa niille, jotka voivat olla vähemmän CSS-taju.

mice_001
mice_002
mice_003
mice_004
mice_005
mice_006
mice_007
mice_008

Miten se tehdään?

Kuten aiemmin todettiin, jokainen hiiri käyttää uudelleen joitain samoja komponentteja. Tämä mahdollistaa merkinnän olevan tiivis ja CSS on strukturoitu loogisella tavalla, joka on helppo lukea. Jokainen hiiri on sen oma lohko, joka on samanlainen kuin alla:

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

Olen poistanut todelliset tyylit, jotta voimme keskittyä CSS: n varsinaiseen rakenteeseen. Se ei todellakaan ole niin monimutkainen kuin voisi ajatella. Jos haluat kaivaa, mihin tyyliin käytetään, katso alkuperäinen lähde .

Muodot ja värit toteutetaan useimmiten raja-säteilyominaisuuden avulla Useita laatikoita , kun taas kaapelin lapsielementit käsittelevät hiirikohtaisten elementtien todellista kokoa ja sijoitusta.

Lopuksi, hienolla Javascriptilla, Bader päivittää vanhemman hiiren luokan luettelon kohteen perusteella, jonka käyttäjä napsauttaa:

$('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'));});

Kaiken kaikkiaan tämä on erittäin hauska koodinpeli, jolla pelataan, vaikka vain nostalgiaa. Täällä käytettyjä kuvioita voitaisiin helposti soveltaa muihin projekteihin. On ihanaa nähdä, että nämä hankkeet tulevat eläviksi Codepenin kaltaisella sivustolla, ja sivuston avoin luonne tarkoittaa sitä, että kuka tahansa pystyy haarukoittamaan tämän kynän ja muuttamaan sitä millään tavoin, jonka he pitävät sopivina.

Oletko yrittänyt piirtää vain CSS: ssä? Mikä on suosikki Apple-hiiri? Kerro meille kommentit.