Bu yazıda kaydırma çubukları dünyasına dalacağız. Kulağa çok çekici gelmediğini biliyorum, ama inanın bana, iyi tasarlanmış bir sayfa eşleşen bir kaydırma çubuğuyla el ele gider. Eski moda krom kaydırma çubuğu o kadar sığmıyor.
Bir kaydırma çubuğunun önemli ayrıntılarına bakacağız ve ardından bazı harika örneklere bakacağız.
Kaydırma çubuğunun bileşenleri
Bu daha çok bir tazeleme, gerçekten. bir tam burada CSS-Tricks'te bir sürü gönderi CSS'de özel kaydırma çubuğu stili söz konusu olduğunda derin ayrıntılara girer.
Bir kaydırma çubuğuna stil vermek için kaydırma çubuğunun anatomisine aşina olmanız gerekir. Bu resme bir göz atın:
Burada akılda tutulması gereken iki ana bileşen şunlardır:
- The iz çubuğun altındaki arka plandır.
- The başparmak kullanıcının tıklayıp sürüklediği kısımdır.
Satıcı ön ekini kullanarak tam kaydırma çubuğunun özelliklerini değiştirebiliriz.::-webkit-scrollbar seçici. Kaydırma çubuğuna sabit bir genişlik, arka plan rengi, yuvarlatılmış köşeler verebiliriz… pek çok şey! Bir sayfanın ana kaydırma çubuğunu özelleştiriyorsak, kullanabiliriz ::-webkit-scrollbar doğrudan HTML öğesinde:
html::-webkit-scrollbar {
/* Style away! */
}Bunun sonucu olan bir kaydırma kutusunu özelleştiriyorsak overflow: scroll, o zaman kullanabiliriz ::-webkit-scrollbar bunun yerine bu öğede:
.element::-webkit-scrollbar {
/* Style away! */
}HTML öğesinin kaydırma çubuğunu kırmızı bir arka planla geniş olacak şekilde stillendiren hızlı bir örnek:
Ya sadece kaydırma çubuğunun başparmağını veya izini değiştirmek istersek? Tahmin ettiniz - bu ikisi için özel ön ekli sözde öğelerimiz var: ::-webkit-scrollbar-thumb ve ::-webkit-scrollbar-track, sırasıyla. İşte tüm bunları bir araya getirdiğimizde nelerin mümkün olabileceğine dair bir fikir:
Yeter fırçalama! Size üç derecelik özel kaydırma çubuğu stilini göstermek ve ardından ilham almak için web'den alınan büyük bir eski örnek vitrini açmak istiyorum.
Basit ve şık kaydırma çubukları
Özel bir kaydırma çubuğu yine de minimum düzeyde olabilir. Başparmak veya izde hafif bir renk değişikliği veya arka planda biraz hafif stil ile görünümü ustaca değiştiren bir grup örneği bir araya getirdim.
Gördüğünüz gibi, kaydırma çubuğu stili söz konusu olduğunda çıldırmak zorunda değiliz. Bazen genel temayla eşleşen bir kaydırma çubuğuyla genel kullanıcı deneyimini geliştirmek için küçük bir değişiklik yapılması yeterlidir.
Harika göz alıcı kaydırma çubukları
Ama kabul edelim: biraz aşırıya kaçmak ve biraz yaratıcılık uygulamak eğlencelidir. İşte bazı durumlarda "çok fazla" olabilecek bazı tuhaf ve benzersiz kaydırma çubukları, ancak kesinlikle dikkat çekicidirler.
Bir tane daha…
Kaydırma çubuğunu başparmak için bir trende döndürmek için ve raylar için raylara götürmeye ne dersiniz?
