CSS ile Kaydırma Çubuğunu Özelleştirme

kaydırma çubuğu animasyonKaydırma çubuğu (scrollbar), tarayıcıların en çok kullanılan fakat kullanıldığından daha az dikkat çeken bir kısmıdır. Bir internet sitesi tasarımı komple olmalıdır ve ufak detaylar tasarımınızı farklı kılmanıza çok büyük katkılar sağlayabilir. Web sitenizin kenarında bulunması kaçınılmaz olan kaydırma çubuğu, web tarayıcıların standart tasarımına sahiptir fakat komple bir tasarım sağlamak için kaydırma çubuğunu da özelleştirmek mümkündür. Her ne kadar ilk bakışta ufak bir detay gibi gözükse de aslında uygun bir özelleştirme ile tasarıma renk katmak mümkündür.

Bilgisayar kullanmaya başladığından beri herkesin bir şekilde gözünün önünde olduğu kaydırma çubuğunu şekillendirmek için webkit fonksiyonlarına ihtiyaç duyulmakta. İhtiyaç duyulan kodları paylaşmadan önce ufak bir bilgilendirme: Belirli bir sınıf üzerinde özelleştirme yapmak istiyorsanız örnek olarak “.SINIF” ön eki ile kullanabilirsiniz.

Kaydırma Çubuğu Özelleştirme

Görsel: CSS-Tricks

Yukarıdaki görüntüde işaretlenmiş olan bölümleri şekillendirmek için aşağıdaki kodları kullanabilirsiniz:

  1. ::-webkit-scrollbar ➜ Kaydırma alanının genel hattını tanımlar.
  2. ::-webkit-scrollbar-button ➜ Kaydırma tuşlarını özelleştirmeyi sağlar.
  3. ::-webkit-scrollbar-track ➜ Kaydırma çubuğundaki tuşların altında kalan genel alanı tanımlar.
  4. ::-webkit-scrollbar-track-piece ➜ Kaydırma tutamacının altındaki (aşağıya kaydırıldığında üzerindeki) alanı tanımlar.
  5. ::-webkit-scrollbar-thumb ➜ Tutamacı özelleştirmeyi sağlar.
  6. ::-webkit-scrollbar-corner ➜ Dikey ve yatay kaydırma alanının kesişimini tanımlar.
  7. ::-webkit-resizer ➜ Dikey ve yatay kaydırma alanının kesişimindeki boyutlandırma seçeneğini özelleştirmeyi sağlar.

Basit bir örnek ile açıklamak gerekirse:


#style-1::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: white;
}

Kaydırma çubuğunun arkaplanına gölge efekti verdik, köşelerine radius verdik ve son olarak arkaplan rengini beyaz yaptık.


#style-1::-webkit-scrollbar {
width: 12px;
background-color: white;
}

Kaydırma çubuğunun genişliğini 12px olarak ayarladık ve arkaplan rengini beyaz yaptık.


#style-1::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: black;
}

Kaydırma çubuğunun tutamacının köşelerine radius verdik, gölge efekti verdik ve arkaplanını siyah yaptık.

Örnekleri Görüntüle / Örnekleri İndir

Renk geçişli kaydırma çubukları yapmak için CSS3 Gradient Kullanımına göz atabilirsiniz.

14.06.2016 CSS 1 yorum

, , ,

1 yorum

Bilgipat04.08.2016

Harika bir paylaşım olmuş, paylaşımınız için teşekkür ederim, aynı zamanda bloguma davetlisiniz.

Yorum Yazın

kod.gen.tr