Özel CSS Kaydırma Çubukları Oluşturun

Sezgisel oluşturucumuzla web sitenizin tarzına uyan güzel, modern kaydırma çubukları tasarlayın. Kodlama becerisi gerekmez!

Özelleştirmeye Başlayın Örnekleri Görüntüle

Kontrol Paneli

8px
0px

Preview

Kaydırma Çubuğu Önizleme İçeriği

Bu, özel kaydırma çubuğunuz için bir tanıtım alanıdır. Gerçek zamanlı değişiklikleri görmek için soldaki ayarları yapın.

Feature 1

Modern web siteleri ve uygulamalar için tamamen özelleştirilebilir kaydırma çubukları.

Feature 2

Farklı tarayıcılar için otomatik önek ile tarayıcılar arası destek.

Uzun metin içeriği örneği: 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.

Daha fazla metin içeriği: Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mäuris. Tamsayı in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.

Metnin sonu: Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Oluşturulan CSS Kodu

Panoya kopyalandı!

Güçlü Özellikler

Tamamen Özelleştirilebilir

Genişlik, renkler, yarıçap ve kenarlıklar dahil olmak üzere kaydırma çubuğunuzun her yönünü web sitenizin tasarımına mükemmel şekilde uyacak şekilde ayarlayın.

Çapraz Tarayıcı Desteği

Chrome, Firefox, Safari ve Edge dahil olmak üzere tüm modern tarayıcılarda çalışan CSS kodu oluşturun.

Kullanıma Hazır Ön Ayarlar

Hızlı uygulama için küratörlüğünde kaydırma çubuğu ön ayarları koleksiyonumuzu kullanarak profesyonel tasarımlarla başlayın.

Gerçek Zamanlı Önizleme

İnteraktif önizleme panelimiz ile ayarlamalar yaparken kaydırma çubuğunuzun tam olarak nasıl görüneceğini görün.

Herhangi bir şişkinlik olmadan projenize entegre edilmeye hazır, iyi biçimlendirilmiş, minimal CSS kodu alın.

Responsive Tasarım

Tutarlı bir kullanıcı deneyimi için farklı ekran boyutlarına ve cihazlara mükemmel uyum sağlayan kaydırma çubukları oluşturun.

Nasıl Kullanılır?

1

Kaydırma Çubuğunuzu Özelleştirin

Kaydırma çubuğunuzun genişliğini, renklerini, yarıçapını ve diğer özelliklerini tasarım vizyonunuzla eşleşene kadar ayarlamak için kontrol panelini kullanın.

2

Oluşturulan CSS'yi kopyalayın

Önizlemeden memnun kaldığınızda, oluşturulan kodu panonuza kopyalamak için "CSS'yi Kopyala" düğmesini tıklayın.

3

Projenize ekleyin

CSS kodunu projenizin stil sayfasına yapıştırın veya satır içi olarak kullanın. Özel kaydırma çubuğunuzun nasıl çalıştığını görmek için sınıfı herhangi bir öğeye uygulayın.

Kaydırma Çubuğu Örnekleri

Yuvarlatılmış köşelere sahip modern bir mavi kaydırma çubuğu örneği. Kurumsal web siteleri ve uygulamalar için mükemmeldir.

Bu kaydırma çubuğu, fareyle üzerine gelindiğinde renk değiştiren daha koyu mavi bir başparmağa sahip açık mavi bir parça kullanır.

Tam etkiyi görmek için aşağı kaydırın. Başparmak, pürüzsüz yuvarlatılmış kenarlar için 5 piksellik bir yarıçapa sahiptir.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Modern Mavi

Yuvarlatılmış kenarlara sahip şık mavi kaydırma çubuğu

Minimal stile sahip ince koyu kaydırma çubuğu örneği. İçerik ağırlıklı web siteleri için idealdir.

Bu kaydırma çubuğu, fareyle üzerine gelindiğinde koyulaşan orta gri bir başparmak ile çok açık gri bir iz kullanır.

Tam etkiyi görmek için aşağı kaydırın. Başparmağın yumuşak kenarlar için 3 piksellik hafif bir yarıçapı vardır.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

İnce Karanlık

İçerik siteleri için minimalist bir karanlık kaydırma çubuğu

Cesur bir stile sahip canlı yeşil kaydırma çubuğu örneği. Çevre dostu veya sağlıkla ilgili web siteleri için harika.

Bu kaydırma çubuğu, fareyle üzerine gelindiğinde koyulaşan canlı yeşil bir başparmağa sahip açık yeşil bir iz kullanır.

Tam etkiyi görmek için aşağı kaydırın. Başparmak, belirgin yuvarlatılmış kenarlar için 6 piksellik bir yarıçapa sahiptir.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Canlı Yeşil

Eko temalı siteler için koyu yeşil bir kaydırma çubuğu

Modern tasarıma sahip şık bir mor kaydırma çubuğu örneği. Yaratıcı veya portföy web siteleri için mükemmeldir.

Bu kaydırma çubuğu, fareyle üzerine gelindiğinde koyulaşan daha derin mor bir başparmağa sahip açık mor bir iz kullanır.

Tam etkiyi görmek için aşağı kaydırın. Başparmak, temiz yuvarlatılmış kenarlar için 4 piksellik bir yarıçapa sahiptir.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Şık Mor

Yaratıcı projeler için modern bir mor kaydırma çubuğu

Sıkça Sorulan Sorular

Related Tools

Stylus'tan CSS'ye Dönüştürücü

SCSS kodunuzu CSS'ye dönüştürün. Hızlı, kolay ve güvenli.

CSS Güzelleştirici

CSS kodunuzu profesyonel hassasiyetle biçimlendirin ve güzelleştirin

CSS3 Dönüşümlerini Kolaylıkla Oluşturun

Kod yazmadan karmaşık CSS3 dönüşümleri oluşturmak için güçlü, sezgisel bir araç. Değişiklikleri gerçek zamanlı olarak görselleştirin ve oluşturulan CSS'yi projelerinizde kullanmak üzere kopyalayın.

BGBM Hesaplayıcı

Kullanımı kolay hesaplayıcımızla reklam kampanyalarınız için Mil Başına Maliyeti (BGBM) hesaplayın.

HSV'den RGB'ye çevirme

Web geliştirme için HSV renk kodlarını RGB değerlerine dönüştürün

SHA-512/224 Hash Hesaplayıcı

SHA-512/224 karmalarını hızlı ve kolay bir şekilde oluşturun