Bu yazımız ile sizlere web sitesi için kaydırma çubuğu nasıl yapılır bu konudan bahsedeceğiz. Böylece sitenize özel kaydırma çubukları ile daha renkli bir görünüme kavuşabilirsiniz. Tarayıcılarınızda bulunan kaydırma çubuklarının özelleştirilmesi ile daha modern görünümler elde edebilirsiniz.
Bazı web sitelerinde çok renkli ve güzel kaydırma çubukları görmüşsünüzdür. Bu çubuklar webkit araçları ile yapılmaktadır. Günümüzde çoğu tarayıcı webkit desteklemektedir. Bu yazımızda web sitesi için kaydırma çubuğu yapımını öğreneceksiniz.
Web Sitesi için Kaydırma Çubuğu Nasıl Yapılır?
Kaydırma çubuğunda bölümler bulunmaktadır. Bu bölümler kaydırma çubuğunun kutusu, çubuğun kendisi ve yön okları olmak üzere bölümlere ayrılabilir. Bu örneğimizde mor renkli özel bir kaydırma çubuğu yapacağız.
Örnek projemizi Chrome tarayıcısı üzerinden yapacağız. Öncelikle kaydırma çubuğunun kutusunu yapacağız. Bu kutu üzerinden tasarımımız devam edecek. Şağıdaki kodlar ile kaydırma çubuğumuzun arka plan rengini belirleyeceğiz.
::-webkit-scrollbar {
width: 8px;
background-color: #eeeeee;
}Kaydır çubuğuna rotasını verme zamanı geldi. Bu rota kenar kenar bölüm olarak da adlandırılabilir. O bölümde kaydırma çubuğunun kenarlarını düzenliyoruz. Böylece çubuğumuzun sınırları belli oluyor. Dilerseniz çubuğun büyüklüğünü de değiştirebilir, farklı renkler kullanabilirsiniz.
::-webkit-scrollbar-track {
border-left: 1px solid #503775;
border-right: 1px solid #503775;
}Son olarak kaydırma çubuğunun nasıl tasarlandığına bir göz atalım. Şimdiki kodlarımız ile çubuğun rengini dğeiştiriyoruz ve köşelerini biraz oval yapıyoruz ki göze güzel görünsün. Kullanıcı deneyimi açısından bu oldukça önemli bir konu.
::-webkit-scrollbar-thumb {
background-color: #503775;
border-radius: 5px;
}Yukarıda verdiğimiz kodları tek bir bütün olarak vermemiz gerekirse aşağıdaki gibi sitenize kopyala yapıştır yaparak işleminizi yapabilirsiniz.
::-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;
}Sonuç
Web Sitesi için Kaydırma Çubuğu Nasıl Yapılır rehberimiz ile özelleştirilmiş kenar çubuğu yapmak işte bu kadar basit. Sizde farklı webkit kodlarını kullanarak diğer web tasayıcıları için özelleştirilmiş kena kaydırma çubukları tasarlayabilr, ziyaretçilerinize daha farklı, renkli ve zengin bir görsellik sunabilirsiniz. Sizler de kullandığınız farklı tasarımların kodlarını yorumlar kısmında bizimle paylaşarak diğer kullanıcılara da yardımcı olabilirsiniz. Web tasarım için oldukça faydalı bir özelleştirme türü ile sizlere umarız yardımcı olabilmişizdir.