CSS ile Scrollbar Ayarları

CSS ile Scrollbar Ayarları

sola ok  Kaldırılan İçerikler

29.12.2015

1,650 Gösterim

Bu içeriği 1 dakika okuyabilirsiniz.

Web Sitesinde Scrollbar Değiştirme


Web sitelerinde bulunan scrollbar(kaydırma çubuğu) webmaster'ın isteğine göre kişiselleştirilebilir. Bu kişiselleştirme için birkaç css kodu kullanmak yeterlidir. Aşağıda örneğini yazdığım MasivaTurk.com scrollbar'ının kodlarını kullanarak, css yardımıyla, farklı ve yaratıcı scrollbarlar oluşturabilirsiniz.


CSS Kodları


Aşağıdaki kodu .css uzantılı stil dosyanıza kopyalamanız yeterlidir.
::-webkit-scrollbar {width:15px;}
::-webkit-scrollbar-track {background-color:transparent;}
::-webkit-scrollbar-thumb {background-color: #88adbd;}
::-webkit-scrollbar-thumb:hover {box-shadow:0 0 30px 0 #000;}


Kod Açıklaması


::-webkit-scrollbarScrollbar'ın kalınlığı
::-webkit-scrollbar-trackScrollbar'ın arka planı (Kaydırma çubuğunun arkasında sabit kalan kısım)
::-webkit-scrollbar-thumbScrollbar'ın kendisi
::-webkit-scrollbar-thumb:hoverScrollbar'ın üzerine mouse ile gelindiğinde yapılacak eylem

Sağ tarafta bulunan scrollbara bakarak önizlemeyi görebilirsiniz.






Bu içeriği MasivaTurk.com sitesini kaynak göstererek kullanabilirsiniz. İçeriklerin; MasivaTurk.com sitesi kaynak gösterilmeden herhangi bir web sayfasında, sosyal medyada ve görsel basında yayınlanması yasaktır. Ayrıntılı bilgi için Kullanım Koşulları sayfasını okuyabilirsiniz.

29.12.2015

İçerik hakkında soru sorabilir veya yorumda bulunabilirsiniz.

İsim
Web Site
E-Posta
Mesaj

Yorumlar (3)

  1. Efe

    Oldukça güzel bir uygulama. Bu kod ile siteler daha güzel bir görünüme kavuşabilirler.

  2. Köksal

    Giderek daha sade bir hal almış. Ne varsa sadelikte var.

  3. Daha önce yabancı bir blogdan bulmuştum, kodlar daha uzundu. Sizin paylaştığınız bir satır kadar. Gölge efekti ile de çok daha güzel gözüküyor, teşekkürler.


Bu İçerikler de İlginizi Çekebilir...

Kopyalanan Yazıya Otomatik Kaynak Adresi Ekleme
24.04.2016
1,696 Gösterim

Kopyalanan Yazıya Otomatik Kaynak Adresi Ekleme

Kaynak belirtilmeden kopyalanan yazılara otomatik kaynak adresi eklemek için küçük bir javascript kod blogunun siteye eklenmesi yeterli olacaktır.

Localhost .htaccess Ayarı
24.01.2016
1,712 Gösterim

Localhost .htaccess Ayarı

Php ile kodlama yaparken herkesin kullandığı .htaccess dosyası localhostta aktif değildir. Kodlama esnasında birçok sorunu önlemek için .htaccess dosyasını localhostta aktif etmek gerekmektedir.

Görsellere Büyüteç ile Bakma
27.12.2015
1,850 Gösterim

Görsellere Büyüteç ile Bakma

Web sitenizde bulunan görsellerin üzerine gelindiğinde büyüteç efekti ile görseli görüntülemek için gereken HTML/CSS kodları.

Php SMTP ile Mail Gönderme (İletişim Formu) Yapımı
29.01.2016
14,980 Gösterim

Php SMTP ile Mail Gönderme (İletişim Formu) Yapımı

Php SMTP Sınıfı olan PHPMailer ile mail gönderme anlatımı - PHP İletişim Formu yapımı - PHP SMTP İletişim Formu

Amazing Slider Yazısını Kaldırma
21.11.2015
3,701 Gösterim

Amazing Slider Yazısını Kaldırma

3 boyutlu slider uygulaması Amazing Slider'ın ücretsiz versiyonunda, slider'ın üzerinde bulunan "Amazing Slider" yazısı kaldırılamıyor. Bu konuda yazının nasıl kaldırabileceğini öğrenebilirsiniz.


Genel Kültür İçerik Platformu | MasivaTurk.com]
X

MasivaTurk.com içeriklerini
YouTube'dan takip edebilirsiniz.

YOUTUBE KANALIMA ÜCRETSİZ
ABONE OLMAK İÇİN TIKLA