• Главная»
  • Уроки»
  • CSS»
  • Как сделать красивую полосу прокрутки на Вашем сайте?

Как сделать красивую полосу прокрутки на Вашем сайте?

В этом уроке пойдет речь о том, как придать полосе прокрутки вашего сайта определённый цвет.

Вы наверняка уже не раз видели такие раскрашенные под цвет всего сайта полосы прокрутки. Такая же применяется и на моём сайте, Вы можете наблюдать её в правой части экрана.

Как её сделать? Очень просто.

Вообще, есть несколько способов.

1. Вставить полный код (приводится ниже) в каждую страницу сайта, где Вы хотите видеть красивую полосу прокрутки.

2. Вставить ссылку на 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, то воспользуйтесь программой HTML Colors 2000, которая показывает цвет в этом формате в любом месте экрана. Скачать её можно из раздела программ.

Случай второй.

Откройте в блокноте новый файл и вставьте в него вышеприведенный код, только без тэгов <style></style> и сохраните его под именем scroll.css и поместите в ту же папку, где и подопытная страница.

В тех страницах, где Вы хотите изменить цвет полосы прокрутки, между тэгами <head></head> вставьте следующую строку.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.ruseller.com
Автор: Евгений Попов
Урок создан: 31 Декабря 2007
Просмотров: 144196
Правила перепечатки

5 последних уроков рубрики "CSS"

^ Наверх ^