ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Меняем полосу прокрутки с помощью 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 Сентября 2015 Просмотров: 4072 Комментариев: (11)

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

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

Kosten

Похожие материалы

Оставь свой отзыв

Комментарии: 11
Порядок вывода комментариев: Kvint 25 Сентября 2015 18:47¹ 0 Красиво смотрится, про светлый говорю, на темном будет совершенно другой вид, думаю лучше. kos 25 Сентября 2015 19:21² 0 Красиво! Держи! Kosten 25 Сентября 2015 19:45³ +1 Ставил на этот сайт, не чего так смотрится, немного дизайн нужно было настроить, но это все в стилях, цвет только по менял, изначально желтый был. Сопрано 26 Сентября 2015 03:36⁴ 0 Отлично, взял, переделаю как нужно под дизайн. Kosten 27 Сентября 2015 08:26⁵ 0 Из плюшки, видать в хороший дизайн решили переделать. workman 27 Сентября 2015 13:52⁶ 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 Dimstrik 11 Ноября 2015 16:23⁷ 0 А вот это мне пригодилось спасибки! Kosten 11 Ноября 2015 18:00⁸ 0 Dimstrik, взаимно за новые фильмы. JAMLIGHT777 08 Мая 2017 12:46⁹ 0 Работает,но только в web kit браузерах Kosten 09 Мая 2017 07:33¹⁰ 0 На хроме проверял и изображение делал не знаю как на других. JAMLIGHT777 09 Мая 2017 10:30¹¹ 0 хром и так на вэбкит движке