Eine Geschichte der Apple Maus in CSS
Sieh dir das an dieser unglaubliche Stift Es ist eine Hommage an die radikale Entwicklung der Apple-Maus im Laufe der Jahre. Mit einer cleveren Mischung aus CSS-Zeichnung und Übergängen, Josh Bader illustriert die schöne Einfachheit eines Gerätes, das wir - ohne einen zweiten Blick zu schenken - jeden einzelnen Tag nutzen.
Durch die verschiedenen Mäuse zu klicken (wie Meta!) Ist nostalgisch. Es erinnert an eine Zeit, in der das, was mit der Peripherie erreicht werden konnte, nicht annähernd so beeindruckend war wie heute. Mit Apps wie BetterTouchTool und Apples eigene Betriebssystem Wir können auf diese Weise mit der Maus interagieren Doug Engelbart hätte man sich 1963 (zwanzig Jahre vor der ursprünglichen Lisa Mouse) nie vorstellen können.
Beobachten Sie die nahtlosen Übergänge zwischen den verschiedenen Modellen, zeigen Sie einige eigenartige Ähnlichkeiten in den Mäusen und geben Sie einen Eindruck davon, wie sich die Maus entwickelt. Das Apple-Logo ist zwar nicht immer mit der gleichen Betonung versehen, aber in allen Designs vorhanden. Wir beginnen das langsame Verschwinden der Standard-Single-Click-Schnittstelle im Jahr 1998 mit der Veröffentlichung von Apples USB-Maus (iMac-Maus im Stift) zu sehen.
Durch die Wiederverwendung aller grundlegenden Elemente und das Anwenden von Übergangsstilen auf jeden einzelnen ist der Code, wie das Thema, elegant und einfach. Mit nur einer Handvoll von Elementen mit mausspezifischen Stilen, die auf jeden von ihnen angewendet werden, hat Bader ein einzigartiges Kunstwerk geschaffen, das auch von denjenigen geschätzt werden kann, die weniger CSS-fähig sind.
Wie ist es gemacht?
Wie bereits erwähnt, verwendet jede Maus einige der gleichen Komponenten. Dadurch kann das Markup übersichtlich gestaltet und das CSS logisch strukturiert und leicht lesbar gestaltet werden. Jede Maus wird durch einen eigenen Block ähnlich dem folgenden dargestellt:
/* 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 { }Ich habe die tatsächlichen Stile entfernt, so dass wir uns auf die tatsächliche Struktur des CSS konzentrieren können. Es ist eigentlich nicht so kompliziert, wie man meinen könnte. Wenn Sie herausfinden möchten, welche Stile wo angewendet werden, lesen Sie den Abschnitt Originalquelle .
Die Formen und Farben werden meist mit der border-radius- Eigenschaft mit erreicht Mehrere Box-Schatten , während die tatsächliche Größe und Platzierung der mausspezifischen Elemente von den untergeordneten Elementen des Kabels gehandhabt wird.
Schließlich aktualisiert Bader mit etwas cleverem Javascript die Eltern-Maus-Klasse basierend auf dem Listenelement, auf das der Benutzer klickt:
$('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'));});Insgesamt ist das ein sehr lustiger Code, mit dem man herumspielen kann, auch wenn es nur für die Nostalgie ist. Die hier verwendeten Muster könnten leicht auf andere Projekte übertragen werden. Es ist faszinierend zu sehen, wie diese Projekte auf einer Website wie Codepen zum Leben erwachen, und die offene Natur der Website bedeutet, dass jeder diesen Stift ausformen und ändern kann, wie er es für richtig hält.
Haben Sie versucht, nur CSS zu zeichnen? Welches ist deine Lieblings-Apple-Maus? Lassen Sie es uns in den Kommentaren wissen.