Uma história do mouse da Apple em CSS
Dê uma olhada esta incrível caneta , é uma homenagem ao quão radicalmente o mouse da Apple evoluiu ao longo dos anos. Usando uma mistura inteligente de desenho e transições CSS, Josh Bader ilustra a bela simplicidade de um dispositivo que - sem dar uma segunda olhada - usamos todos os dias.
Clicar nos diferentes mouses (como meta!) É nostálgico. É uma reminiscência de uma época em que o que era possível realizar com o periférico não era nem de perto tão impressionante quanto é hoje. Com aplicativos como BetterTouchTool e da própria Apple sistema operacional , podemos interagir com o mouse de maneiras que Doug Engelbart nunca poderia ter imaginado em 1963 (vinte anos antes do original Lisa Mouse).
Observar as transições contínuas entre os diferentes modelos revela algumas semelhanças peculiares nos camundongos e dá uma ideia do mouse evoluindo. O logotipo da apple, embora nem sempre tenha a mesma ênfase, está presente em todos os designs. Começamos a ver o lento desaparecimento da interface padrão de clique único em 1998 com o lançamento do Mouse USB da Apple (iMac Mouse na caneta).
Reutilizando todos os mesmos elementos básicos e aplicando estilos de transição a cada um, o código é, como o assunto, elegante e simples. Usando apenas um punhado de elementos com estilos específicos de mouse aplicados a cada um deles, Bader criou uma obra de arte única que pode ser apreciada até mesmo por aqueles que são menos experientes em CSS.
Como isso é feito?
Como dito anteriormente, cada mouse reutiliza alguns dos mesmos componentes. Isso permite que a marcação seja concisa e que o CSS seja estruturado de maneira lógica e fácil de ler. Cada mouse é representado por seu próprio bloco semelhante ao exibido abaixo:
/* 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 { }Eu tirei os estilos reais para que possamos nos concentrar na estrutura real do CSS. Na verdade, não é tão complicado quanto se poderia pensar. Se você gostaria de pesquisar quais estilos são aplicados, consulte o fonte original .
As formas e cores são realizadas principalmente usando a propriedade border-radius com Múltiplas Sombras de Caixa , enquanto o tamanho real e o posicionamento dos elementos específicos do mouse são manipulados pelos elementos filhos do cabo.
Finalmente, com algum JavaScript inteligente, o Bader atualiza a classe de mouse pai com base no item de lista em que o usuário clica:
$('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'));});No geral, esse é um código muito divertido para brincar, mesmo que seja apenas pela nostalgia. Os padrões usados aqui poderiam ser facilmente aplicados a outros projetos. É fascinante ver esses projetos ganhando vida em um site como o Codepen, e a natureza aberta do site significa que qualquer um pode usar essa caneta e alterá-la da maneira que achar melhor.
Você já tentou desenhar apenas em CSS? Qual é o seu rato favorito da Apple? Deixe-nos saber nos comentários.