Historie myš Apple v CSS
Podívejte se na toto neuvěřitelné pero , je to pocta, jak radikálně se myš Apple vyvinula v průběhu let. Pomocí chytré kombinace výkresů a přechodů CSS, Josh Bader znázorňuje krásnou jednoduchost zařízení, které - aniž bychom dali druhý pohled - používáme každý den.
Klepání na různé myši (jak meta!) Je nostalgická. To připomíná dobu, kdy bylo možné dosáhnout toho, co bylo periferní, zrovna tak působivé jako dnes. S aplikacemi, jako je BetterTouchTool a vlastní Apple operační systém , my můžeme interakci s myší způsobem, který Doug Engelbart by si nikdy nemohl představit v roce 1963 (dvacet let před původní myškou Lisa).
Sledování plynulých přechodů mezi různými modely odhaluje některé zvláštní podobnosti u myší a dává pocit, že myši se vyvíjejí. Logo loga jablka, přestože ne vždy má stejný důraz, je přítomno ve všech návrzích. Začínáme vidět pomalé zmizení standardního rozhraní s jedním kliknutím v roce 1998 s uvolněním USB myši USB (myši iMac v peru).
Tím, že znovu použijete všechny stejné základní prvky a používáte přechodové styly ke každému, je kód stejně jako předmět elegantní a jednoduchý. Použitím několika hrdelních prvků s myšlenkovými styly aplikovanými na každý z nich vytvořil Bader jedinečné umělecké dílo, které mohou ocenit i ti, kteří mohou být méně CSS-důvtipní.
Jak se to dělá?
Jak již bylo uvedeno výše, každá myš opakovaně používá některé stejné součásti. To umožňuje, aby označení bylo stručné a aby byl CSS strukturován logickým způsobem, který je snadno čitelný. Každá myš je reprezentována vlastním blokem podobným tomu, který je zobrazen níže:
/* 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 { }Odstranil jsem skutečné styly, abychom se mohli soustředit na skutečnou strukturu CSS. Ve skutečnosti není tak složité, jak by si myslel. Pokud byste chtěli vyřešit, jaké styly se používají, podívejte se na původním zdrojem .
Tvary a barvy se většinou dosahují pomocí vlastnosti okrajového poloměru Více stínů v krabičce , zatímco skutečná velikost a umístění prvků specifických pro myši jsou ovládány podřízenými prvky kabelu.
Nakonec, s nějakým chytrým Javascriptem, Bader aktualizuje třídu nadřazené myši na základě položky seznamu, na které uživatel klikne:
$('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'));});Celkově je to velmi zábavný bit kódu, který hraje s sebou, i když jen pro nostalgii. Vzory, které se zde používají, by mohly být použity i pro jiné projekty. Je fascinující vidět, že tyto projekty ožívají na webu, jako je Codepen, a otevřená povaha stránky znamená, že každý může tuto pero vidět a změnit ji jakýmkoli způsobem, který považuje za vhodné.
Pokoušeli jste se kreslit pouze CSS? Která je vaše oblíbená myš Apple? Dejte nám vědět v komentářích.