Меняем цвет полосы прокрутки

Очень немногие сайты используют этот прием, так как грамотно подобрать сочетание цветов очень сложно, но еcлu это удается и цвет гармонично вписывается в дизайн сайта, то у страницы будет больше шансов запомниться пользователю. А именно этого и добиваются большинство web мастеров. Если внимательно присмотреться, то у полосы прокрутки можно выделить несколько составных частей:

scrollbar-track-color - цвет полоски, по которой ездит ползунок.
scrollbar-face-color - цвет самого ползунка и кнопок.
scrollbar-arrow-color - цвет стрелок на кнопках.
scrollbar-highlight-color - цвет верхнего и левого краев кнопок и ползунка.
scrollbar-shadow-color - цвет нижнего и правого краев кнопок и ползунка
scrollbar-base-color - цвет верхнего и левого краев основания
scrollbar-darkshadow-color - цвет нижнего и правого краев основания

Вот flash-вставка, наглядно демонстрирующая расположение этих частей:

Ну а теперь стоит сказать о кодовом исполнении.
Цвет полосы прокрутки можно менять с помощью каскадных таблиц стилей (CSS). Стили объявляются в заголовке (между тегами <head> и </head>) после meta тегов. Вот код, который сделает все элементы полосы прокрутки белыми (#FFFFFF):

<head>

<style type="text/css">

body{
scrollbar-track-color:#FFFFFF;
scrollbar-face-color:#FFFFFF;
scrollbar-arrow-color:#FFFFFF;
scrollbar-highlight-color:#FFFFFF;
scrollbar-shadow-color:#FFFFFF;
scrollbar-base-color:#FFFFFF;
scrollbar-darkshadow-color:#FFFFFF;
}

</style>
</head>

Обязательно следует сказать, что функция смены цвета полосы прокрутки возможна только в Internet Explorer´е версии 5.0 и выше, в остальных браузерах ничего не изменится.


2008 © Computer repair