Une histoire de la souris Apple en CSS
Jeter un coup d'œil à cette plume incroyable , c'est un hommage à la façon dont la souris Apple a radicalement évolué au fil des ans. En utilisant un savant mélange de dessin CSS et de transitions, Josh Bader illustre la belle simplicité d'un appareil qui, sans donner un deuxième coup d'œil, est utilisé chaque jour.
En cliquant sur les différentes souris (comment meta!) Est nostalgique. Cela rappelle une époque où ce qui était possible avec le périphérique n’était pas aussi impressionnant qu’aujourd’hui. Avec des applications comme BetterTouchTool et Apple's propre système opérateur , nous pouvons interagir avec la souris d'une manière qui Doug Engelbart n'aurait jamais pu imaginer en 1963 (vingt ans avant l'original Lisa Mouse).
Regarder les transitions transparentes entre les différents modèles révèle certaines similitudes particulières chez les souris et donne une idée de l'évolution de la souris. Le logo Apple, même s'il n'est pas toujours mis en valeur, est présent dans tous les designs. Nous commençons à voir la lente disparition de l’interface en un seul clic en 1998 avec la sortie de la souris USB d’Apple (iMac Mouse dans le stylo).
En réutilisant tous les mêmes éléments de base et en appliquant des styles de transition à chacun, le code est, comme le sujet, élégant et simple. En utilisant seulement une poignée d' éléments avec des styles spécifiques à la souris appliqués à chacun d'eux, Bader a créé une œuvre d'art unique qui peut être appréciée même par ceux qui sont moins avertis en CSS.
Comment ça se passe?
Comme indiqué précédemment, chaque souris réutilise certains des mêmes composants. Cela permet de concilier le balisage et de structurer le CSS de manière logique et facile à lire. Chaque souris est représentée par son propre bloc similaire à ce qui est affiché ci-dessous:
/* 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 { }J'ai supprimé les styles réels pour pouvoir nous concentrer sur la structure même du CSS. Ce n'est pas aussi compliqué qu'on pourrait le penser. Si vous souhaitez creuser dans quels styles sont appliqués, référez-vous au source primaire .
Les formes et les couleurs sont principalement réalisées en utilisant la propriété border-radius avec Multiple Box-Shadows , tandis que la taille et le positionnement réels des éléments spécifiques à la souris sont gérés par les éléments enfants du câble.
Enfin, avec du javascript, Bader met à jour la classe de la souris parente en fonction de l'élément de liste sur lequel l'utilisateur clique:
$('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'));});Dans l'ensemble, c'est un code très amusant à jouer, même si ce n'est que pour la nostalgie. Les modèles utilisés ici pourraient facilement être appliqués à d'autres projets. Il est fascinant de voir ces projets prendre vie sur un site comme Codepen, et la nature ouverte du site signifie que tout le monde est capable de fourrer ce stylo et de le modifier comme bon lui semble.
Avez-vous essayé de dessiner en CSS? Quelle est votre souris Apple préférée? Faites le nous savoir dans les commentaires.