Saga Apple Mouse í CSS
Sjáðu þetta ótrúlega Pen , það er heiður að því hversu róttækan Apple músin hefur þróast í gegnum árin. Notkun snjall blanda af CSS teikningum og umbreytingum, Josh Bader sýnir fallega einfaldleika tækisins sem við notum á hverjum einasta degi án þess að gefa annað sýn.
Smellið í gegnum mismunandi mýs (hvernig meta!) Er ættkvísl. Það minnir á þann tíma sem það var hægt að ná með útlimum var hvergi nærri eins áhrifamikill og það er í dag. Með forritum eins og BetterTouchTool og eigin Apple stýrikerfi , við getum átt samskipti við músina á þann hátt sem Doug Engelbart hefði aldrei getað ímyndað sér árið 1963 (tuttugu árum áður en upphaflega Lisa músin).
Að horfa á óaðfinnanlega umbreytingarnar á milli mismunandi módelar sýnir nokkrar sérkennilegar líkt í músum og gefur til kynna að músin þróist. Eplalögmálið, en ekki alltaf með sama áherslu, er til staðar í öllum hönnununum. Við byrjum að sjá hægfara í venjulegu einföldu viðmótinu árið 1998 með því að gefa út USB-mús Apple (iMac Mouse í pennanum).
Með því að endurnýta öll sömu grunnþætti og beita umbreytingarstílum við hvert og eitt er kóðinn, eins og viðfangsefnið, glæsilegt og einfalt. Með því að nota aðeins handfylli þætti með músarákvörðunarstílum sem notaðar eru til þeirra, hefur Bader búið til einstakt listaverk sem hægt er að meta jafnvel þeim sem kunna að vera minna CSS-kunnátta.
Hvernig er það gert?
Eins og áður hefur komið fram, nýtir hver mús nokkur af sömu hlutum. Þetta gerir merkingunni kleift að vera nákvæm og CSS er skipulögð á rökréttan hátt sem auðvelt er að lesa. Hver mús er táknuð með eigin blokk sinni svipað og sýnt er hér að neðan:
/* 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 { }Ég hef fjarlægt raunverulegan stíl þannig að við getum einbeitt okkur að raunverulegri uppbyggingu CSS. Það er í raun ekki eins flókið og maður gæti hugsað. Ef þú vilt grafa í hvaða stíll er beitt þar, vinsamlegast hafðu samband við upprunalega uppspretta .
Eyðublöð og litir eru að mestu framleiddar með því að nota landamærisgeislunar eign með Margfeldi kassi-skuggi , en raunveruleg stærð og staðsetning músarþáttaþátta er meðhöndluð af barnaþáttum snúrunnar.
Að lokum, með nokkrum snjöllum Javascript, uppfærir Bader foreldrismúsaklasann miðað við listann sem notandinn smellir á:
$('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'));});Á heildina litið er þetta mjög gaman hluti af kóða til að leika við, jafnvel þótt bara sé fyrir nostalgíu. Hægt er að nota mynstur sem notað er hér að öðrum verkefnum. Það er heillandi að sjá þessi verkefni koma á lífi á síðuna eins og Codepen og opna eðli vefsvæðisins þýðir að einhver getur fært þessa pennann og breytt því á nokkurn hátt sem þeir sjá hæfileika.
Hefur þú reynt að teikna bara CSS? Hver er uppáhalds Apple músin þín? Láttu okkur vita í athugasemdunum.