Una storia del mouse Apple nei CSS
Dare un'occhiata a questa incredibile penna , è un omaggio a come radicalmente il mouse Apple si è evoluto nel corso degli anni. Usando una miscela intelligente di disegno e transizioni CSS, Josh Bader illustra la bella semplicità di un dispositivo che - senza dare una seconda occhiata - usiamo ogni singolo giorno.
Cliccando attraverso i diversi mouse (come meta!) È nostalgico. Ricorda un tempo in cui ciò che era possibile realizzare con la periferica non era neanche lontanamente impressionante come lo è oggi. Con app come BetterTouchTool e proprio di Apple sistema operativo , possiamo interagire con il mouse in modi simili Doug Engelbart non avrei mai immaginato nel 1963 (vent'anni prima dell'originale Lisa Mouse).
Guardare le transizioni senza soluzione di continuità tra i diversi modelli rivela alcune strane somiglianze nei topi e dà l'impressione che il mouse si evolva. Il logo della mela, pur non sempre con la stessa enfasi, è presente in tutti i disegni. Iniziamo a vedere la lenta scomparsa dell'interfaccia standard single-click nel 1998 con il rilascio del mouse USB Apple (mouse iMac nella penna).
Riutilizzando tutti gli stessi elementi di base e applicando gli stili di transizione a ciascuno di essi, il codice è, come l'argomento, elegante e semplice. Usando solo una manciata di elementi con stili specifici del mouse applicati a ciascuno di essi, Bader ha creato un'opera d'arte unica che può essere apprezzata anche da coloro che potrebbero essere meno esperti di CSS.
Come è fatto?
Come precedentemente affermato, ogni mouse riutilizza alcuni degli stessi componenti. Ciò consente al markup di essere conciso e il CSS da strutturare in modo logico e facile da leggere. Ogni mouse è rappresentato da un suo blocco simile a quello mostrato sotto:
/* 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 { }Ho tolto gli stili reali in modo che possiamo concentrarci sulla struttura effettiva del CSS. In realtà non è così complicato come si potrebbe pensare. Se desideri approfondire in quali stili vengono applicati, fai riferimento a fonte originale .
Le forme e i colori vengono per lo più realizzati utilizzando la proprietà border-radius Ombre multiple a scatola , mentre le dimensioni e il posizionamento effettivi degli elementi specifici del mouse sono gestiti dagli elementi figlio del cavo.
Infine, con un po 'di Javascript intelligente, Bader aggiorna la classe del mouse genitore in base alla voce di elenco su cui l'utente fa clic:
$('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'));});Nel complesso, questo è un bel pezzo di codice con cui giocare, anche se solo per la nostalgia. I modelli usati qui potrebbero essere facilmente applicati ad altri progetti. È affascinante vedere questi progetti prendere vita su un sito come Codepen, e la natura aperta del sito significa che chiunque è in grado di sborsare questa penna e cambiarla nel modo che ritengono opportuno.
Hai provato a disegnare solo in CSS? Qual è il tuo mouse Apple preferito? Fateci sapere nei commenti.