CSS ile Siteye Scrollbar (Site Kaydırma Çubuğu) Ekleme Kodları

CSS ile Siteye Scrollbar (Site Kaydırma Çubuğu) Ekleme Kodları

Herkese selamlar arkadaşlar. Bu yazımızda bir başka css dersiyle karşınızdayız. Bu sayfa altından siteye renkli scrollbar (site kaydırma çubuğu) nasıl eklenir onun kodlarını paylaşacağız. Şimdiden iyi çalışmalar dileriz.

Scrollbar, genelde web sitelerin sağ tarafında bulunan gri renkli site kaydırma çubuğuna verilen isimdir. Bu çubuğa kodlarla özel olarak tasarım yapabilir ve renk verebilirsiniz. Siteye css ile kaydırma çubuğu eklemek için 7 tane farklı kod bulunuyor. Bunlar aşağıdaki gibidir;

  • ::-webkit-scrollbar ==> Kaydırma çubuğunu eklemek için css kısmına yazmamız gereken kod. Bunu yazmadan diğer 6 kodu aktif edemeyiz.
  • ::-webkit-scrollbar-button ==> Bu kod ile yukarıdaki resimde gördüğünüz gibi yukarı ve aşağı yön butonları eklenmektedir.
  • ::-webkit-scrollbar-track ==> Bu kısım ise yukarıda gördüğünüz gibi kaydırma çubuğunun tüm alanının olduğu yerdir.
  • ::-webkit-scrollbar-track-piece ==> Burası kaydırma çubuğunun olmadığı kısımdır.
  • ::-webkit-scrollbar-thumb ==> Bu alan kaydırma çubuğunu temsil eder. Çubuğun rengini buradan ayarlayabiliriz. Hover’da verirsek mouse üzerine geldiğinde renk değişimi yapılabilir.
  • ::-webkit-scrollbar-corner ==> Burası sağ alt köşedeki kesişim yeridir.
  • ::-webkit-resizer ==> Son olarak burası ise bazı sitelerin sağ en altında bulunan mouse ile üzerine basıldığında sayfa boyutunu ayarlamaya yarayan koddur.

Bu şekilde kodları css alanına ekleyerek ve içerisini doldurarak özel scrollbar yani kaydırma çubuğu yapabilirsiniz. Şimdi örnek bir kod ve ekran görüntüsü paylaşalım.

CSS Renkli Scrollbar Yapımı Örnek Kodları;

Kodlar bu şekildedir arkadaşlar. Renklerini kendiniz düzenleyebilirsiniz. Renk kodlarının tamamını öğrenmek için html renk kodları sayfamıza bakabilirsiniz. Şimdi ekran görüntüsüne bakalım ve kod anlatımına geçelim.

Gördüğünüz gibi kodların ekran görüntüsü bu şekilde olur. Biz örnek olması açısından bu renkleri tercih ettik siz tabii ki istediğiniz rengi seçebilirsiniz. Mantık olarak arkadaşlar üstte paylaştığımız css kodlarını style.css veya hangi css dosyasını kullanıyorsanız onun içine ekleyin. Html kısmından vs. başka bir kod yazmanıza gerek yok. Bu kodları sadece css dosyasına eklediğinizde scrollbar’ı aktif etmiş olursunuz. Tasarım açısından ise hangi kısmı ayarlayacaksanız onun parantez içine istediğiniz kodları yazabiliyorsunuz. Mesela biz arka planı açık mavi yapmışız gördüğünüz gibi onu ayarlamak için;

::-webkit-scrollbar-track-piece{
background: #ade0d8;
border-radius:10px;
}

bu kodların içindeki yerleri değiştirebilirsiniz. Border-radius ile kaydırma çubuğuna yuvarlık kenarlık ekledik. Mesela bunun oranın ayarlayabilirsiniz veya kaldırabilirsiniz. Aynı şekilde background bölümünden arka plan rengini düzenleyebilirsiniz.

Bu arada hover kısmı fare ile üzerine gelindiğinde meydana gelen tasarım kısmıdır. Yani biz yukarıda fare ile kaydırma çubuğu üzerine geldiğimizde renk biraz daha koyu sarıya dönüşecek şekilde ayarladık. Siz istediğinizi yapabilirsiniz.

En basit haliyle scrollbar kodları;

Son olarak en basit haliyle siteye bu küçük kodları ekleyerek kaydırma çubuğu oluşturabilirsiniz. Artık ne kadar eleman kodu eklerseniz o kadar tasarım yapmış olursunuz tercih size kalmış.

Bu şekilde css kodları ile sitenize renkli scrollbar sayfa kaydırma çubuğu ekleyebilirsiniz ve tasarımını istediğiniz gibi renklendirebilirsiniz. Daha detaylı örnekler için buradaki ve buradaki kodları da inceleyebilirsiniz. Teşekkürler iyi dersler dileriz…


---Bizlere Destek Olmak İçin Aşağıdan Yorum Yazmayı ve Yazılarımızı Sosyal Medyada Paylaşmayı Unutmayınız---
admin

Merhabalar sitemizde sizler için birbirinden kaliteli paylaşımlar yapmaktayız.Her konuda bilgili editör arkadaşlarımızla sizlere faydalı ve eğitici makaleler paylaşmaktayız.Ders notları,seo,oyun,dini bilgiler vb. tüm alanda sizler için en iyi içerikleri üretmekteyiz.Bizleri takip ettiğiniz için teşekkür ederiz...

Benzer Yazılar

Bu yazıya henüz yorum yapılmamıştır, ilk yorumu yapmak için tıklayın.

Bir Cevap Yazın

E-posta hesabınız yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*
*