Добавить в избранное

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

Дата: 2011-10-13

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

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

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

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

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

2. Вставить ссылку на css-файл с кодом.

Рассмотрим оба этих варианта.

Итак, случай первый.

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

Где-нибудь между тэгами

Вставьте следующие строки:


Что означают эти параметры?


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

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

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

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

сайт tiwebmaster.ru

Просмотров: 2271

Последние 5 уроков

Стильное поле поиска на CSS3

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


Как с помощью CSS сделать фон на всю страницу?

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


Смена фона блока информации при наведении мыши

Интересный эффект смены фона блока с текстом при наведении мыши. Реализовано с помощью HTML+CSS.


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

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


Делаем красивые CSS списки для сайта

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


Видео уроки по php,jquery,ajax,css,html,сео