Web Sitesi İçin Kaydırma Çubuğu Nasıl Yapılır?

Web Sitesi İçin Kaydırma Çubuğu Nasıl Yapılır?

Herkese merhabalar. Bugün sizlere web tarayacılarının genelde sağ tarafında bulunan kaydırma çubuğunu web siteniz için nasıl istediğiniz gibi değiştirileceğini anlatacağım.

Görmüşsünüzdür, bazı web sitelerinde kaydırma çubuğu veya fare değişik oluyor. Bunu siz de kendi siteniz için özelleştirmek, tasarlamak istiyor olabilirsiniz. Kaydırma çubuğunun sizin sitenizde diğer sitelerden farklı olması görüntü ve tasarım açısından fazladan bir artı olabilir.

Kaydırma çubuğunu değiştirmek için webkit araçlarını kullanıyoruz. Webkit ne yazık ki her tarayıcıyı desteklemiyor. Ama Chrome'un desteklemesi bence yeterli olabilir. Ne de olsa çoğunluk bunu kullanıyor ama diğer tarayıcılarda gayet kullanılıyor.

Webkit aracını kullanarak nasıl Kaydırma Çubuğunu değiştirebileceğimiz görelim.

Webkit Kaydırma Çubuğu özelliklerine, her türlü bilgiye istiyorsanız buraya tıklayarak ulaşabilirsiniz.

Kaydırma Çubuğu Nasıl Tasarlanır?

Kaydırma çubuğunun bazı bölümleri vardır. Bu bölümler o kaydırma çubuğunun kutusu, kaydırma çubuğu, aşağı yukarı okları gibi bölümlerdir.

Not: Şimdi yapacağımız kaydırma çubuğu bu sitedeki kaydırma çubuğudur. Görünmüyorsa Chrome üzerinden giriş yapınız.

Öncelikle biz o kutuyu yapmamız gerek. Tasarım o kutuya göre şekillenecek. Örneğin aşaığdaki kodları deneyin. Göreceksiniz ki kaydırma çubuğu incelmiş olacak. Ayrıca renklendirmek için background-color kısmındaki renk kodunu değiştirebilirsiniz.

::-webkit-scrollbar {
    width: 8px;
    background-color: #eeeeee;
}

Şimdi ise o kaydırma çubuğunun izlediği rotayı şekillendirelim. O izlediği rota kısacası kenar kısımlar olarakta geçebilir. Orada kaydırma çubuğunun kenarlarını düzenliyoruz. Böylece kaydırma çubuğunun sınırlarını belirliyoruz. Border olan kısımları yani sınırları genişletebilir (örneğin 5px yapabilir) ve renk kodlarını değiştirebilirsiniz.

::-webkit-scrollbar-track {
    border-left: 1px solid #503775;
    border-right: 1px solid #503775;
}

Ve en son olarak kaydırma çubuğunu nasıl tasarladığımızı görelim. Bu sefer rengini değiştiriyoruz ve köşelerinden biraz yuvarlatıyoruz. Böylece hoş bir görüntü elde ediyoruz. Tabii bunları da değiştirebilirsiniz.

::-webkit-scrollbar-thumb {
    background-color: #503775;
    border-radius: 5px;
}

Tüm bu kodları tüm olarak atacak olursak şöyle atabilirim.

::-webkit-scrollbar {
    width: 8px;
    background-color: #eeeeee;
}

::-webkit-scrollbar-track {
    border-left: 1px solid #503775;
    border-right: 1px solid #503775;
}

::-webkit-scrollbar-thumb {
    background-color: #503775;
    border-radius: 5px;
}

Evet, işte bu kadar. Eğer soracak olursanız o yukarı aşağı kaydırma çubukları nasıl yapılıyor diye. Orası biraz karmaşık. Ama şöyle denebilir. O webkit scrollbar kısmını bulup kutuya icon eklenebilir. Ama bana sorarsanız çok gerek yok.

Artık nasıl yaptığımızı öğrendik. Gerisi size kalmış nasıl tasarlanacağı vesayre size kalmış. İstediğiniz gibi şekillendirebilirsiniz. İyi çalışmalar :)

Web Sitesi İçin Kaydırma Çubuğu Nasıl Yapılır? | RaBlogin

Raşidin Buğda

Raşidin Buğda

2016-2017 yılından beri web tasarım ve kodlama üzerine çalışıyorum. RaBlogin benim ilk projem ve bu sitede blog yazarak kendimi keşfetmeye ve insanlara yardımcı olmaya çalışıyorum :)

Yorum Yap

Lütfen tüm alanları eksiksiz (Websiteniz yoksa orasını boş bırakın) ve doğru doldurun.

Yorumlar

Bu yazıya yorum yapılmamış. İlk yapan sen olabilirsin.