Historia myszy Apple w CSS
Spojrzeć na to niesamowite pióro , to hołd złożony temu, jak radykalnie mysz Apple ewoluowała przez lata. Używanie sprytnego połączenia rysunków i przejść CSS, Josh Bader ilustruje piękną prostotę urządzenia, które - bez rzucania drugiego spojrzenia - wykorzystujemy każdego dnia.
Kliknięcie w różne myszy (jak meta!) Jest nostalgiczne. Przypomina to czas, w którym to, co było możliwe do osiągnięcia przy pomocy urządzeń peryferyjnych, nie było tak imponujące jak obecnie. W aplikacjach takich jak BetterTouchTool i własne Apple system operacyjny możemy interakcję z myszą w taki sposób Doug Engelbart nigdy nie wyobrażał sobie w 1963 roku (dwadzieścia lat przed oryginalną myszką Lisa).
Oglądanie płynnych przejść między różnymi modelami ujawnia pewne szczególne podobieństwa u myszy i daje poczucie ewolucji myszy. Logo jabłek, choć nie zawsze było takie samo podkreślenie, jest obecne we wszystkich wzorach. Zaczynamy dostrzegać powolne znikanie standardowego interfejsu pojedynczego kliknięcia w 1998 r. Wraz z wydaniem USB Mouse firmy Apple (iMac Mouse in the pen).
Dzięki ponownemu wykorzystaniu wszystkich tych samych podstawowych elementów i zastosowaniu stylów przenoszenia do każdego z nich kod jest podobny do przedmiotu, elegancki i prosty. Używając zaledwie kilku elementów ze specyficznymi dla myszy stylami zastosowanymi do każdego z nich, Bader stworzył wyjątkowe dzieło sztuki, które może być docenione nawet przez tych, którzy mogą być mniej doświadczeni w CSS.
Jak to się stało?
Jak wcześniej wspomniano, każda mysz używa ponownie tych samych składników. Pozwala to na zwięzłość znaczników i struktury CSS w logiczny sposób, który jest łatwy do odczytania. Każda mysz jest reprezentowana przez własny blok podobny do tego, który jest wyświetlany poniżej:
/* 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 { }Usunąłem rzeczywiste style, abyśmy mogli skupić się na faktycznej strukturze CSS. W rzeczywistości nie jest tak skomplikowane, jak mogłoby się wydawać. Jeśli chcesz dowiedzieć się, jakie style są stosowane, odwołaj się do Pierwotnym źródłem .
Kształty i kolory są w większości realizowane przy użyciu własności border-radius z Wiele Box-Shadows , podczas gdy rzeczywisty rozmiar i rozmieszczenie elementów specyficznych dla myszy jest obsługiwane przez elementy potomne kabla.
Wreszcie, dzięki sprytnej obsłudze JavaScript, Bader aktualizuje klasę myszy nadrzędnej na podstawie elementu listy, który użytkownik kliknie:
$('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'));});Ogólnie rzecz biorąc, jest to bardzo zabawna zabawa z kodem, nawet jeśli tylko z powodu nostalgii. Zastosowane tu wzorce można z łatwością zastosować do innych projektów. Fascynujące jest to, że projekty te ożywają na stronie takiej jak Codepen, a otwarty charakter strony oznacza, że każdy jest w stanie rozwidlić to pióro i zmienić je w dowolny sposób, jaki uzna za stosowny.
Czy próbowałeś wciągnąć tylko CSS? Jaka jest twoja ulubiona mysz Apple? Daj nam znać w komentarzach.