Сделай полосу прокрутки на своем сайте круче

1 июня 2009 года, Размещено в категории: HTML / CSS

полоса прокрутки на сайте

Возможно Вы видели на сайтах, где цвет полосы прокрутки был изменен со стандартного на раскрашенные под цвет фона сайта.
Сейчас я покажу Вам как можно изменит полоса прокрутки на нашем сайте.

Чтобы сделает полосу прокрутки другим цветов,  нам нужно будет написать небольшой CSS код:

body {
 scrollbar-face-color:#010101; 
scrollbar-shadow-color: #ffffffB; 
scrollbar-highlight-color: #ecf7fe; 
scrollbar-3dlight-color: #ecf7fe; 
scrollbar-darkshadow-color: #5997CA; 
scrollbar-track-color: #b5bdc8; s
crollbar-arrow-color: #F6F6F6; 
}

И  этот код вставляем на странице между тегами: <head></head>
или вставляемт в свой основной CSS файл ( style.css ).

Что означает каждый параметр ?
scrollbar-3dlight-color ----- устанавливает цвет верха и левой части ползунка и кнопок со стрелками на полосе прокрутки.
scrollbar-arrow-color ----- Устанавливает цвет стрелок на кнопке со стрелками.
scrollbar-darkshadow-color ---- Устанавливает цвет тени для ползунка и кнопок со стрелками.
scrollbar-face-color ---- Устанавливает цвет ползунка и кнопок со стрелками.
scrollbar-highlight-color ---- Устанавливает эффект объёмности.
scrollbar-track-color ---- Устанавливает цвет дорожки для ползунка

Сделай полосу прокрутки, не так уж и сложно.

Мой блог находят по следующим фразам
сделать крутой фон для сайта
flash проигрыватель для сайта
title для изображений
готовая фотогалерея для сайта
плагин HeadSpace






4 комментария

  • 8 лет назад Ответить

    Интересный способ, но лучше все-таки еще добавить текстовые подсказки.

  • 8 лет назад Ответить

    Подсказки для чего??? вроде я все описал подробно.

  • 7 лет назад Ответить

    Как раз все подробно описано.)) Что тут неразобрать то?!)))
    Спасибо. 🙂

  • 3 года назад Ответить

    Вы забыли добавить, что данный способ работает только в ИЕ, поэтому ценность его минимальная.
    Для остальных браузеров нужно использовать js.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Перед отправкой формы: