Автор: Кирилл Панфилов

Полосы прокрутки окна браузера, поля textarea, подокна iframe и некоторых других элементов можно раскрасить по-своему. Правда, работать это будет только в Internet Explorer (5.5+) и Opera (8+).
Для этого в CSS есть правила:

body {
scrollbar-3dlight-color: цвет;
scrollbar-darkshadow-color: цвет;
scrollbar-arrow-color: цвет;
scrollbar-base-color: цвет;
scrollbar-face-color: цвет;
scrollbar-highlight-color: цвет;
scrollbar-track-color: цвет;
scrollbar-shadow-color: цвет;
}

Вместо слова «цвет», понятное дело, вы вставляете нужное цветовое значение.

scrollbar-3d-light-color: цвет верхней и левой границ полосы прокрутки, ее бегунка и стрелок.
scrollbar-darkshadow-color: цвет правых и нижних граней тени, отбрасываемых бегунком и кнопками прокрутки.
scrollbar-arrow-color: цвет стрелок на кнопках полосы прокрутки.
scrollbar-base-color: цвет бегунка и кнопок-стрелок полосы прокрутки.
scrollbar-face-color: цвет бегунка и кнопок прокрутки.
scrollbar-highlight-color: цвет левых и верхних граней освещенной части бегунка и кнопок прокрутки.
scrollbar-track-color: цвет рабочей части полосы прокрутки, т.е той ее части, по которой перемещается бегунок.
scrollbar-shadow-color: цвет неосвещенной части бегунка и кнопок прокрутки.

Пользуйтесь правилами с осторожностью, не делайте скроллбар слишком неудобным.

Но есть вероятность, что на сайте уже изменены цвета полос прокрутки, и вам надо вернуть их к виду по умолчанию (допустим, не везде, а частично). Делается это просто:

html, body, textarea {
scrollbar-face-color: ThreeDFace !important;
scrollbar-shadow-color: ThreeDDarkShadow !important;
scrollbar-highlight-color: ThreeDHighlight !important;
scrollbar-3dlight-color: ThreeDLightShadow !important;
scrollbar-darkshadow-color: ThreeDDarkShadow !important;
scrollbar-track-color: Scrollbar !important;
scrollbar-arrow-color: ButtonText !important;
}

Дело в том, что в браузерах работают и обозначения, которые берут системные цвета, например, color:Menu — цвет фона меню. С применением цветов ваш сайт может мимикрировать под системное приложение. Разумеется, эти цвета можно применять не только для полос прокрутки, а для любых элементов.

activeborder — Цвет границы активного окна.
activecaption — Цвет заголовка активного окна.
appworkspace — Цветмультидокументного фона.
background — Цвет фона рабочего стола.
buttonface — “Лицевая” сторона объемных элементов.
buttonhighlight — Насыщенная тень объемных элементов.
buttonshadow — Цвет тени объемных элементов.
buttontext — Цвет текста на кнопках.
captiontext — Цвет текста в заголовках.
graytext — Отключенный (недоступный) текст.
highlight — Выделение объекта элемента управления.
highlighttext — Выделение текста элемента управления.
inactiveborder — Цвет границы неактивного окна.
inactivecaption — Цвет заголовка неактивного окна.
inactivecaptiontext — Цвет текста в неактивном заголовке.
infobackground — Цвет фона всплывающей подсказки.
infotext — Цвет текста всплывающей подсказки.
menu — Цвет фона меню.
menutext — Цвет текста в меню.
scrollbar — Цвет полосы прокрутки.
threeddarkshadow — Темная тень объемных элементов.
threedface — “Лицевая” сторона объемных элементов.
threedhighlight — Цвет выделения объемных элементов.
threedlightshadow — Светлый цвет тени объемных элементов.
threedshadow — Насыщенная тень объемных элементов.
window — Цвет фона окна.
windowframe — Цвет рамки окна.
windowtext — Цвет текста в окне.

Список системных цветов и шрифтов с примерами тут.

Метки: CSS

Запись опубликована 10.12.2008 в 13:43 и размещена в рубрике Делимся опытом, Статьи. Вы можете следить за обсуждением этой записи с помощью ленты RSS 2.0. Можно оставить комментарий или сделать обратную ссылку с вашего сайта.