Μια ιστορία του ποντικιού της Apple στο CSS
Ρίξε μια ματιά στο αυτό το απίστευτο στυλό , είναι ένα αφιέρωμα στο πόσο ριζικά το ποντίκι της Apple έχει εξελιχθεί με τα χρόνια. Χρησιμοποιώντας ένα έξυπνο μείγμα σχεδίασης και μεταβάσεων CSS, Τζος Μπάντερ απεικονίζει την όμορφη απλότητα μιας συσκευής που - χωρίς να δίνουμε μια δεύτερη ματιά - χρησιμοποιούμε κάθε μέρα.
Κάνοντας κλικ στα διάφορα ποντίκια (πώς το meta!) Είναι νοσταλγικό. Μοιάζει με μια εποχή που αυτό που ήταν δυνατό να επιτευχθεί με το περιφερειακό δεν ήταν πουθενά τόσο εντυπωσιακό όσο είναι σήμερα. Με εφαρμογές όπως BetterTouchTool και της Apple λειτουργικό σύστημα , μπορούμε να αλληλεπιδράσουμε με το ποντίκι με τρόπους που Doug Engelbart δεν θα μπορούσε ποτέ να φανταστεί το 1963 (είκοσι χρόνια πριν από το αρχικό ποντίκι Lisa).
Παρακολουθώντας τις απρόσκοπτες μεταβάσεις μεταξύ των διαφορετικών μοντέλων αποκαλύπτει κάποιες ιδιόμορφες ομοιότητες στα ποντίκια και δίνει την αίσθηση ότι το ποντίκι εξελίσσεται. Το λογότυπο μήλων, ενώ δεν δίνεται πάντοτε η ίδια έμφαση, υπάρχει σε όλα τα σχέδια. Αρχίζουμε να βλέπουμε την αργή εξαφάνιση της τυπικής διασύνδεσης ενός κλικ το 1998 με την κυκλοφορία του ποντικιού USB της Apple (iMac Mouse στην πένα).
Επαναχρησιμοποιώντας όλα τα ίδια βασικά στοιχεία και εφαρμόζοντας στυλ μετάβασης σε καθένα, ο κώδικας είναι, όπως το θέμα, κομψό και απλό. Χρησιμοποιώντας μόνο λίγα στοιχεία με στυλ ποντικιού που εφαρμόζονται σε κάθε ένα από αυτά, ο Bader δημιούργησε ένα μοναδικό έργο τέχνης που μπορεί να εκτιμηθεί από ακόμη και εκείνους που μπορεί να είναι λιγότερο CSS-καταλαβαίνω.
Πώς γίνεται;
Όπως αναφέρθηκε προηγουμένως, κάθε ποντίκι επαναχρησιμοποιεί μερικά από τα ίδια στοιχεία. Αυτό επιτρέπει τη συνοπτική σήμανση και τη δομή του CSS με λογικό τρόπο που είναι εύκολο να το διαβάσετε. Κάθε ποντίκι αντιπροσωπεύεται από το δικό του μπλοκ παρόμοιο με αυτό που εμφανίζεται παρακάτω:
/* 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 { }Έχω απογυμνώσει τα πραγματικά στυλ, έτσι ώστε να μπορούμε να επικεντρωθούμε στην πραγματική δομή του CSS. Στην πραγματικότητα δεν είναι τόσο περίπλοκο όσο μπορεί κανείς να σκεφτεί. Αν θέλετε να ανακαλύψετε ποιες μορφές εφαρμόζονται, ανατρέξτε στο αρχική πηγή .
Τα σχήματα και τα χρώματα πραγματοποιούνται κατά κύριο λόγο χρησιμοποιώντας την ιδιότητα ακτίνας ακτίνας με Πολλαπλές σκιές κουτιού , ενώ το πραγματικό μέγεθος και τοποθέτηση των στοιχείων που αφορούν το ποντίκι χειρίζεται τα παιδικά στοιχεία του καλωδίου.
Τέλος, με κάποιο έξυπνο Javascript, ο Bader ενημερώνει την τάξη γονικού ποντικιού βάσει του στοιχείου λίστας στο οποίο κάνει κλικ ο χρήστης:
$('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'));});Συνολικά, αυτό είναι πολύ διασκεδαστικό κομμάτι του κώδικα για να παίξετε γύρω, ακόμα κι αν μόνο για τη νοσταλγία. Τα σχέδια που χρησιμοποιούνται εδώ θα μπορούσαν εύκολα να εφαρμοστούν σε άλλα έργα. Είναι συναρπαστικό να βλέπετε αυτά τα έργα να ζωντανεύουν σε έναν ιστότοπο όπως το Codepen και η ανοικτή φύση του ιστότοπου σημαίνει ότι ο καθένας είναι σε θέση να περάσει αυτό το στυλό και να το αλλάξει με οποιοδήποτε τρόπο κρίνει κατάλληλο.
Προσπαθήσατε να σχεδιάσετε μόνο CSS; Ποιο είναι το αγαπημένο σας ποντίκι της Apple; Ενημερώστε μας στα σχόλια.