Как изменить цвета scrollbar'а
Бродя по просторам сети иногда находишь всякие там приятные наворотики для дизайна своих страниц. Как сделать одну из таких фич мы рассмотрим ниже.
На некоторых ресурсах можно заметить что скролл-бар вашего браузера (
Internet Explorer 5.5 и выше ) изменяет стиль оформления скролл-бара.Скролл-бар
- это такая "линейка" справа экрана (или снизу), с помощь которой мы можем просматривать
ту часть страницы или элемента окна, которая не уместилась в своей области.
Скролл-бар можно передвигать двумя способами: либо цеплять его мышкой и тащить
до нужной нам позиции, либо прокручивать при помощи колёсика на мыши, если ваша
мыша имеет такую достопримечательность.Так вот, скролл-бар можно оформить на
свой вкус, в соответствии с цветовой палитрой вашего ресурса. Можно, например,
сделать синий скролл-бар, стрелки сделать красными, можно вообще всё чёрным
оформить, а если задать все элементы одного цвета с бэкгроундом ( фоном ) Вашей
страницы то мы получим эффект отсутствия скролл-бара но сохраним функции. Делается
это при помощи обычной таблицы стилей ( CSS ).
Всё давольноко таки просто, для получения желаемого результата вам нужно
добавить тег <STYLE> ( или внести изменения в теге/файле если он у Вас
уже присутсвует в коде ) который задаёт стили на всей странице. Его вштрамляют
в начало страницы, чтобы он сидел между <HEAD> и </HEAD>.
Например:
<style type="text/css">
body {
SCROLLBAR-BASE-COLOR : #0066cc;
SCROLLBAR-FACE-COLOR: #0066cc;
SCROLLBAR-HIGHLIGHT-COLOR: #cccccc;
SCROLLBAR-SHADOW-COLOR: #b7b7b7;
SCROLLBAR-ARROW-COLOR: #ffffff;
SCROLLBAR-TRACK-COLOR: #0099dd;
SCROLLBAR-3DLIGHT-COLOR : #818181;
SCROLLBAR-DARKSHADOW-COLOR : #848484;}
</style>
Попробуйте скопировать и вставить к себе в код, посмотрите что получиться.
Итак полоса прокрутки ( scrollbar ) состоит из следующих частей: фон,
ползунок, активные или неактивные концевые кнопки и соответственно, цветовая
гамма всего этого может быть настроена.
Так, а теперь подробнее что же здесь и за что отвечает:
SCROLLBAR-FACE-COLOR - Задает цвет фона для бегунка полосы прокрутки и концевых кнопок, а так же один из двух цветов, формирующих фон полосы прокрутки Также, если вы не задали параметр SCROLLBAR-TRACK-COLOR, у вас изменится цвет задней части прокрутки.
SCROLLBAR-HIGHLIGHT-COLOR - Задает цвет для верхней и левой внутренней границы бегунка полосы прокрутки и концевых стрелок, так же используется при формировании фона полосы прокрутки и неактивной стрелки
SCROLLBAR-SHADOW-COLOR - Задает цвет для нижней и правой внутренней границы бегунка полосы прокрутки и концевых стрелок
SCROLLBAR-ARROW-COLOR - Определяет цвет активных стрелок.
SCROLLBAR-TRACK-COLOR - Определяет цвет фона для полосы прокрутки.
SCROLLBAR-3DLIGHT-COLOR - задает цвет для верхней и левой внешней границы бегунка полосы прокрутки и концевых кнопок
SCROLLBAR-DARKSHADOW-COLOR - Задает цвет для нижней и правой внешней границы бегунка полосы прокрутки и концевых кнопок.
SCROLLBAR-BASE-COLOR - Задает цвет, на основе которого строится цветовая схема для полосы прокрутки.
Так что вывод один - оформление скролл-бара можно настраивать как угодно так что пробуйте, эксперементируйте.
P.S. Позволю себе повториться - всё это работает только в Internet Explorer
5.5 и выше, а также в браузерах на его движке, хотя это и не критично. Просто
в других броузерах скролл-бар будет отображаться по умолчанию. И ещё, для справки, доля пользователей IE и браузеров на его движке составляет более 90% от общего числа гуляющих по Сети.Так что есть смысл оформить скролл-бар в соответствии с внешним видом Вашего ресурса, хотя это и мелочь, но она не лишняя - это моё мнение, у вас может быть своё, но раз вы это читаете значит вы всё таки прочитали или просмотрели статью до конца и я не зря старался, может она будет Вам полезна.
|
