CSS'de Apple Mouse'un Tarihi
Şuna baksana bu inanılmaz kalem Apple'ın yıllardır nasıl kökten geliştiğine dair bir saygı duruşu. CSS çizim ve geçişlerinin akıllı bir karışımını kullanarak, Josh Bader Bir cihazın güzel sadeliğini - ikinci bir bakış vermeden - her gün kullanıyoruz.
Farklı farelere tıkladığınızda (meta nasıl!) Nostaljiktir. Periferik ile mümkün olanın, bugün olduğu kadar etkileyici bir yer olmadığı zamanları anımsatır. Gibi uygulamalar ile BetterTouchTool ve Apple’ın kendi işletim sistemi , fare ile etkileşime girebiliriz. Doug Engelbart 1963'te (orijinal Lisa Mouse'dan yirmi yıl önce) asla hayal edilemezdi.
Farklı modeller arasındaki kesintisiz geçişleri izlemek farelerde bazı garip benzerlikleri ortaya çıkarır ve farenin evrimleşmesini sağlar. Elma logosu, her zaman aynı vurguyu vermezken, tüm tasarımlarda mevcuttur. 1998'de Apple'ın USB Mouse'unun (kalemdeki iMac Mouse) serbest bırakılmasıyla standart tek tıklama arayüzünün yavaşça kaybolmasını görmeye başladık.
Tüm aynı temel öğeleri yeniden kullanarak ve her birine geçiş stilleri uygulayarak, kod konuya benzer, zarif ve basittir. Her birine uygulanan fareye özgü stilleri olan bir avuç elemanın kullanılmasıyla, Bader, daha az CSS-meraklısı olanlar tarafından bile takdir edilebilecek eşsiz bir sanat eseri yaratmıştır.
Nasıl yapılır?
Daha önce belirtildiği gibi, her fare aynı bileşenlerin bazılarını yeniden kullanır. Bu, işaretlemenin kısa olmasına ve CSS'nin okunması kolay mantıksal bir şekilde yapılandırılmasına olanak tanır. Her fare, aşağıda gösterilene benzer kendi bloğu ile temsil edilir:
/* 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 { }Gerçek stilleri çıkardım, böylece CSS'nin gerçek yapısına odaklanabilelim. Aslında düşünebileceği kadar karmaşık değil. Hangi stillerin uygulandığını öğrenmek isterseniz, bkz. orjinal kaynak .
Şekiller ve renkler çoğunlukla sınır yarıçapı özelliği kullanılarak gerçekleştirilir. Çoklu Kutu Gölgeler fareye özgü elemanların gerçek boyutu ve yerleşimi kablonun çocuk öğeleri tarafından ele alınır.
Son olarak, bazı zeki Javascript ile Bader, kullanıcının tıkladığı liste maddesini temel alarak ana fare sınıfını günceller:
$('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'));});Genel olarak, bu sadece nostalji için bile olsa, etrafında oynamak için çok eğlenceli bir kod. Burada kullanılan desenler diğer projelere kolayca uygulanabilir. Bu projelerin Codepen gibi bir sitede yaşandığını görmek çok etkileyici ve sitenin açık doğası, herkesin bu kalemi kaldırabileceği ve uygun gördüğü herhangi bir şekilde değiştirebileceği anlamına geliyor.
Sadece CSS'de çizim yapmayı denediniz mi? En sevdiğin Apple mouse hangisi? Yorumlarda bize bildirin.