Главная > Вебмастеринг > CSS > Меняем полосу прокрутки на сайте

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

Зачастую на сайте необходимо изменить цвет полосы прокрутки, чтобы он сочетался с вашим дизайном.

По умолчанию полоса прокрутки и квадратики «вверх» «вниз» голубые с белой рамкой и тенью.

Оформление полосы прокрутки задается стилями CSS. Привязать стили к вашему документу можно разными способами.

Можно вставить код (см. ниже) в каждую страницу сайта или в шаблон, где Вы хотите видеть красивую полосу прокрутки. Откройте в блокноте или в HTML редакторе ту страницу сайта , на которой вы хотите изменить цвет полосы прокрутки.

Между тэгами <head></head> вставьте следующие строки:

<style> 
 body { scrollbar-face-color:#5997CA; 
 scrollbar-shadow-color: #ffffff;
 scrollbar-highlight-color: #ffffff;
 scrollbar-3dlight-color: #5997CA;
 scrollbar-darkshadow-color: #5997CA; 
 scrollbar-track-color: #F6F6F6;
 scrollbar-arrow-color: #F6F6F6; } 
</style>

Расшифровка:
1. scrollbar-arrow-color — цвет стрелки.
2. scrollbar-track-color — цвет подложки.
3. scrollbar-face-color — цвет самой полосы.
4. scrollbar-shadow-color: #ffffff;
scrollbar-highlight-color: #ffffff;
цвет разделющей полосы.
5. scrollbar-3dlight-color: #5997CA;
scrollbar-darkshadow-color: #5997CA;
цвет внешних границ полосы.

Если Вы не знаете как определить цвет в формате #xxxxxx, то воспользуйтесь любой другой графической программой.

Но этот метод задания стилей для полосы прокрутки не очень удобен, представьте, у ваc сотни страниц и в каждую нужно вставить такой код, а если возникнет необходимость его изменить?

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

В тех страницах, где Вы хотите изменить цвет полосы прокрутки, между тэгами вставьте строку привязки таблицы стилей — ссылку на css-файл с кодом. При необходимости вновь изменить цвета полосы прокрутки в последнем случае вам будет достаточно изменить только файл со стилями.

Любите играть в BattleForge? Тогда специально для вас — купить очки battleforge — низкие цены, гарантированное качество. Нсладись всеми красками игры.


Комментарии:

Об авторе: admin