Una historia del ratón de Apple en CSS
Echa un vistazo a esta pluma increíble , es un homenaje a cuán radicalmente ha evolucionado el ratón de Apple a lo largo de los años. Usando una combinación inteligente de dibujo CSS y transiciones, Josh Bader ilustra la hermosa simplicidad de un dispositivo que, sin dar un segundo vistazo, usamos todos los días.
Al hacer clic en los diferentes ratones (¿cómo meta!) Es nostálgico. Es una reminiscencia de un momento en que lo que era posible lograr con el periférico no era tan impresionante como lo es hoy. Con aplicaciones como BetterTouchTool y el propio de Apple sistema operativo , podemos interactuar con el mouse de forma que Doug Engelbart Nunca podría haber imaginado en 1963 (veinte años antes que el original Lisa Mouse).
Ver las transiciones sin interrupciones entre los diferentes modelos revela algunas similitudes peculiares en los ratones y da la sensación de que el ratón está evolucionando. El logotipo de la manzana, aunque no siempre recibe el mismo énfasis, está presente en todos los diseños. Comenzamos a ver la lenta desaparición de la interfaz estándar de un solo clic en 1998 con el lanzamiento del ratón USB de Apple (iMac Mouse en la pluma).
Al reutilizar todos los mismos elementos básicos y aplicar estilos de transición a cada uno, el código es, al igual que el tema, elegante y simple. Usando solo un puñado de elementos con estilos específicos de ratón aplicados a cada uno de ellos, Bader ha creado una obra de arte única que puede ser apreciada incluso por aquellos que pueden tener menos conocimiento de CSS.
Como esta hecho?
Como se dijo anteriormente, cada mouse reutiliza algunos de los mismos componentes. Esto permite que el marcado sea conciso y que el CSS esté estructurado de manera lógica y fácil de leer. Cada ratón está representado por su propio bloque similar a lo que se muestra a continuación:
/* 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 { }Eliminé los estilos reales para poder centrarnos en la estructura real del CSS. En realidad no es tan complicado como uno podría pensar. Si desea profundizar en qué estilos se aplican, consulte el fuente original .
Las formas y los colores se logran principalmente utilizando la propiedad border-radius con Múltiples sombras de caja , mientras que el tamaño real y la ubicación de los elementos específicos del mouse se manejan mediante los elementos secundarios del cable.
Finalmente, con un Javascript ingenioso, Bader actualiza la clase de mouse padre en función del elemento de lista en el que el usuario hace clic:
$('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'));});En general, este es un código muy divertido para jugar, aunque solo sea por la nostalgia. Los patrones utilizados aquí podrían aplicarse fácilmente a otros proyectos. Es fascinante ver cómo estos proyectos cobran vida en un sitio como Codepen, y la naturaleza abierta del sitio significa que cualquier persona puede bifurcar este bolígrafo y cambiarlo de la forma en que lo crea conveniente.
¿Has intentado dibujar solo CSS? ¿Cuál es tu ratón Apple favorito? Háganos saber en los comentarios.