CSS Scrollbar Oluşturucu
Gerçek zamanlı önizleme ile kaydırma çubuklarını sezgisel olarak tasarlayın.
WebKit ve Firefox uyumlu CSS kodunu otomatik olarak oluşturun.
Preview
Önizleme burada görünecektir. Tasarımı görmek için aşağı kaydırın. Bu, kaydırılabilir bir alan oluşturmak için kullanılan bir sahte metindir. Web sitenizin tasarımına uyması için genişliği, renkleri ve kenar yarıçapını ayarlayın.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Customization
Generated CSS Code
Bunu da beğenebilirsiniz
CSS Scrollbar Oluşturucu Hakkında
CSS Scrollbar Oluşturucu, web sitenizin kaydırma çubuklarının tasarımını özelleştirmenize ve gerekli CSS kodunu anında oluşturmanıza olanak tanıyan ücretsiz bir çevrimiçi araçtır.
Gerçek zamanlı önizlemeleri görüntülerken renkler, genişlik ve kenar yarıçapı gibi kaydırma çubuğunun (thumb) ve arka planın (track) stillerini ayarlamak için kaydırıcıları ve renk seçicileri kullanmanız yeterlidir.
Oluşturulan kod yalnızca Chrome, Safari ve Edge gibi WebKit tarayıcılarıyla uyumlu olmakla kalmaz, aynı zamanda scrollbar-color ve scrollbar-width aracılığıyla Firefox'u da destekler. Tüm işlemler tarayıcınız içinde tamamlanır, bu da onu herhangi bir kurulum veya kayıt olmadan güvenli, hızlı ve ücretsiz hale getirir.
Oluşturucu Nasıl Kullanılır
Boyutu ve Şekli Belirleyin
Kaydırma çubuğunuzun genişliğini ve kenar yarıçapını ayarlamak için kontrol panelindeki kaydırıcıları kullanın. Önizleme alanı ayarlamalarınızı hemen yansıtır, bu nedenle bunları sitenizin tasarımına uyacak şekilde ince ayar yapın.
Renkleri Özelleştirin
Kaydırma Çubuğu Rengi, Arka Plan Rengi ve Üzerine Gelme Rengini seçmek için renk seçicileri kullanın. Sitenizin teması veya vurgu renkleriyle uyumlu renkleri seçin.
Kopyalayın ve Uygulayın
Önizlemeden memnun kaldığınızda, ekranın alt kısmında otomatik olarak oluşturulan CSS kodunu kontrol edin ve "CSS'i Kopyala" düğmesine tıklayın. Uygulamayı tamamlamak için web sitenizin stil sayfasına yapıştırın.
CSS Scrollbar Sözlüğü
- WebKit Öneki (::-webkit-scrollbar)
- Chrome, Safari ve Edge gibi WebKit/Blink motorları tarafından desteklenen tarayıcılarda kaydırma çubuklarını özelleştirmek için kullanılan standart dışı bir CSS sözde öğesidir. Son derece özelleştirilebilir tasarımlara olanak tanır.
- Kaydırma Çubuğu Arka Planı (Track)
- Kaydırma çubuğunun arka planı veya oluğu. Arka plan rengini veya iç gölgelerini ayarlamak için ::-webkit-scrollbar-track kullanarak stillendirebilirsiniz.
- Kaydırma Çubuğu (Thumb)
- Kaydırma çubuğunun kaydırma konumunu gösteren sürüklenebilir kısmı. Rengini ve kenar yarıçapını ayarlamak için ::-webkit-scrollbar-thumb kullanılarak stillendirilir.
- scrollbar-color ve scrollbar-width
- WebKit öneklerini desteklemeyen Firefox gibi tarayıcılar tarafından desteklenen W3C standart CSS özellikleri. Kaydırma çubuğu ve arka plan renklerini ayarlamanıza ve genişliği (auto, thin veya none) tanımlamanıza olanak tanır.
- Çapraz Tarayıcı Uyumluluğu
- Bir web sitesinin farklı web tarayıcılarında (Chrome, Firefox, Safari vb.) tutarlı bir şekilde çalışma ve görüntülenme yeteneği. Aracımız, tüm büyük tarayıcılarda sorunsuz çalışan kod üretir.
Sıkça Sorulan Sorular
- Q.Üretilen CSS akıllı telefonlarda çalışacak mı?
- Evet, iOS'ta Safari ve Android'de Chrome gibi WebKit tabanlı mobil tarayıcılarda çalışır. Ancak, işletim sistemi özelliklerine bağlı olarak kaydırma çubuğu yalnızca kaydırma yaparken görünebilir.
- Q.Kaydırma çubuğunu yalnızca belirli bir öğeye (div gibi) uygulayabilir miyim?
- Evet, yapabilirsiniz. Oluşturulan koddaki .custom-scrollbar'ı belirli öğenizin sınıfı veya kimliği ile (örneğin, .my-container veya #scroll-box) değiştirmeniz yeterlidir.
- Q.Firefox tarayıcısıyla uyumlu mu?
- Evet, uyumludur. Bu araç yalnızca WebKit sözde öğelerini (pseudo-elements) değil, aynı zamanda Firefox için W3C standardı scrollbar-color ve scrollbar-width özelliklerini de otomatik olarak oluşturur.
- Q.Bu aracı kullanırken verilerim bir sunucuya kaydediliyor mu?
- Hayır, kaydedilmez. Bu araç, JavaScript kullanarak tamamen tarayıcınızda çalışır, bu nedenle ayarlarınız ve oluşturulan kod hiçbir zaman harici sunuculara gönderilmez.
- Q.Kaydırma çubuğunu tamamen nasıl gizleyebilirim?
- Kaydırma işlevini korurken kaydırma çubuğunu gizlemek için WebKit için ::-webkit-scrollbar { display: none; } ve Firefox için scrollbar-width: none; kullanabilirsiniz.
Özel Scrollbar Kullanım Senaryoları
Marka Renklerini Birleştirmek
Kurumsal sitenizdeki veya portföyünüzdeki kaydırma çubuklarının rengini marka renklerinize uyacak şekilde değiştirin ve genel tasarım tutarlılığını artırın.
Özel Kullanıcı Arayüzü Web Uygulamaları
Dahili kaydırma alanlarına (div'ler) sahip olduğunuz ve daha şık bir görünüm için standart işletim sistemi kaydırma çubuğunu gizlemek istediğiniz sohbet uygulamaları veya panolar gibi web uygulamaları için mükemmeldir.
Karanlık Mod Desteği
Kaydırma çubuğunuzu web sitenizin karanlık moduna sorunsuz bir şekilde uyum sağlaması için koyu gri veya benzeri tonlara ayarlayın, böylece kullanıcılar için parlamayı ve göz yorgunluğunu azaltın.
Minimalist Tasarım Arayışı
Kaydırma çubuğu genişliğini son derece ince olacak şekilde ayarlayın, böylece göze batmaz ve kullanıcıların odak noktasını gerçek içeriğinizde tutar.
Geri Bildirim Gönder
Aracı geliştirmemize yardımcı olmak için lütfen düşüncelerinizi bize bildirin.
Geri bildirim geçici olarak askıya alındı
Sunucu meşgul veya spam koruması etkin. Lütfen daha sonra tekrar deneyin.