CSS

Scrollbar css renklendirme kodu ie, chrome, firefox

merhaba arkadaşlar.

İE (internet explorer), Chrome, Firefox gbi tarayıcılarda sorunsuz çalışacak olan renkli scrollbar kodlarını artık
javascriptlere ihtiyaç duymadan ve zahmetsizce css ile yapılacak.

İnternet Explorer (ie) İçin css scrollbar renklendirme kodu

body{
  scrollbar-base-color: #C0C0C0;
  scrollbar-base-color: #C0C0C0;
  scrollbar-3dlight-color: #C0C0C0;
  scrollbar-highlight-color: #C0C0C0;
  scrollbar-track-color: #EBEBEB;
  scrollbar-arrow-color: black;
  scrollbar-shadow-color: #C0C0C0;
  scrollbar-dark-shadow-color: #C0C0C0;
}

Bu kodların scrollbar da nereleri renklendirdiğini bilmiyorsanızaşağıdaki resimde size yardımcı olması için gerekli

açıklama yapılmıştır.

Bu açıklamalardan da yararlanarak güzel scrollbar lar oluşturabilirsiniz.

ie-explorer-scrollbar

Chrome için css scrollbar renklendirme kodu

::-webkit-scrollbar { width: 3px; height: 3px;}
::-webkit-scrollbar-button {  background-color: #666; }
::-webkit-scrollbar-track {  background-color: #999;}
::-webkit-scrollbar-track-piece { background-color: #ffffff;}
::-webkit-scrollbar-thumb { height: 50px; background-color: #666; border-radius: 3px;}
::-webkit-scrollbar-corner { background-color: #999;}}
::-webkit-resizer { background-color: #666;}

ie için yukarda renklendirme kodunu verdim aşağıda da chrome için css renklendirme kodunu veriyorum

aşağıdaki resimden faydalanarak scrollbar için renkleri düzenleyebilirsiniz.

chrome-scroll

firefox için css scrollbar renklendirme kodu

aşağıdaki kodlarla firefox için css scrollbar renklendirme yapabilirsiniz.

::-webkit-scrollbar {
  height: 12px;
  width: 12px;
  background: #969696;
  -webkit-border-radius: 1ex;
}

::-webkit-scrollbar-thumb {
  background: #2B2B2B;
  -webkit-border-radius: 1ex;
  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}

::-webkit-scrollbar-corner {
  background: #1A1A1A;
}

İlgili Makaleler

Bir Yorum

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Başa dön tuşu