» »

Меняем полосу прокрутки с помощью CSS


Меняем полосу прокрутки с помощью CSS

Думаю вы заметили такую деталь как прокрутка, это может быть на страницах или в мини чате, много де есть такая функция и она разная на каждом браузере. Но мы Меняем полосу прокрутки с помощью CSS кардинально ее по стилям и там поможет в этом CSS ресурса. Не чего не нужно делать, а просто скопировать и поставить в свои стили, там как видите выведен синий оттенок цвета, но вы можете сами потом сделать, тот который нужен. Есть одна ссылка, которая будет отвечать за полосу, но это больше к дизайну относиться. Так сама колея, где бегунок будет ходить, измениться в гамме своей, вообщем преобразите свой портал и это будет заметно.

Код
::-webkit-scrollbar-button {  
background-image:url('');  
background-repat:no-repeat;  
width:6px;  
height:0px  
}  

::-webkit-scrollbar-track {  
background-color:#32312e;  
box-shadow:0px 0px 3px #000 inset;  
}  

::-webkit-scrollbar-thumb {  
-webkit-border-radius: 5px;  
border-radius: 5px;  
background-color:#2492D4;  
box-shadow:0px 1px 1px #fff inset;  
background-image:url('http://zornet.ru/Ajaxoskrip/Fyrkes/59610063.png');  
background-position:center;  
background-repeat:no-repeat;  
}  

::-webkit-resizer{  
background-image:url('');  
background-repeat:no-repeat;  
width:7px;  
height:0px  
}  

::-webkit-scrollbar{  
width: 11px;  
}
25.09.2015 Просмотров: 506 Комментарий: (8)

Поделиться в социальных сетях

Материал разместил

Комментарий: 8
Kvint
Kvint 25.09.2015 18:471
0
Красиво смотрится, про светлый говорю, на темном будет совершенно другой вид, думаю лучше.
kos
kos 25.09.2015 19:212
0
Красиво! Держи!
Kosten
Kosten 25.09.2015 19:453
+1
Ставил на этот сайт, не чего так смотрится, немного дизайн нужно было настроить, но это все в стилях, цвет только по менял, изначально желтый был.
Сопрано
Сопрано 26.09.2015 03:364
0
Отлично, взял, переделаю как нужно под дизайн.
Kosten
Kosten 27.09.2015 08:265
0
Из плюшки, видать в хороший дизайн решили переделать.
workman
workman 27.09.2015 13:526
0
А можно все сделать и без картинок.Например так

Код
::-webkit-scrollbar{width:3px;height:3px}
::-webkit-scrollbar-track-piece{background-color:#FFF}
::-webkit-scrollbar-thumb:vertical{height:3px;background-color:#498BFA}
::-webkit-scrollbar-thumb:horizontal{width:3px;background-color:#498BFA}


DEMO biggrin
Dimstrik
Dimstrik 11.11.2015 16:237
0
А вот это мне пригодилось спасибки!
Kosten
Kosten 11.11.2015 18:008
0
Dimstrik, взаимно за новые фильмы.
avatar