YOUSELLER
Среда, 19.02.2020, 05:11
Приветствую Вас Гость | RSS
 
Главная Каталог статей и уроковРегистрацияВход
Меню сайта
Категории каталога
HTML [4]
CSS [8]
Для сайта [4]
Электронные деньги [2]
Разное [6]
Мини-чат
200
Наш опрос
Оцените мой сайт
Всего ответов: 18
Главная » Статьи » Уроки » 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;
crollbar-highlight-color: #ffffff;
цвет разделющей полосы.

5. scrollbar-3dlight-color: #5997CA;
scrollbar-darkshadow-color: #5997CA;
цвет внешних границ полосы.

Если Вы не знаете как определить цвет в формате #xxxxxx, то воспользуйтесь программой HTML Colors 2000, которая показывает цвет в этом формате в любом месте экрана. Скачать её можно из раздела программ.

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

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

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


Категория: CSS | Добавил: Денис (10.08.2008) | Автор: Евгений Попов
Просмотров: 450 | Рейтинг: 0.0/0 |
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Форма входа
[05.08.2008][Евгений Попов]
А вы делаете эти дизайнерские ошибки на своём сайте? (1)
[05.08.2008][Евгений Попов]
5 точек потенциального клиента, которые должен знать каждый бизнесмен. (0)
[05.08.2008][Евгений Попов]
5 причин, по которым люди выберут Ваш товар. (0)
[05.08.2008][Евгений Попов]
Как превратить Ваш сайт в магнит влияния на клиентов? (0)
[05.08.2008][Евгений Попов]
Электронная коммерция и электронный (онлайн) бизнес. В чём различия? (0)
[05.08.2008][Евгений Попов]
Наступило лучшее время для начала бизнеса в Сети. (0)
[05.08.2008][Евгений Попов]
Бесплатный хостинг для ведения бизнеса - забудьте! (0)
[05.08.2008][Евгений Попов]
Цель - это путь к вершине! (0)
[05.08.2008][HTML]
Как замаскировать тэг H1 (1)
[05.08.2008][HTML]
Урок: Как правильно использовать фаил robots.txt для запрета индексации фаилов и папок? (0)
Поиск
Друзья сайта
php5.ru
[17.08.2008][Видеоуроки]
Плавное увеличение изображения при клике (0)
[16.08.2008][Видеоуроки]
Как огородить Ваш ресурс от проблемных людей и сайтов (1)
[05.08.2008][Программы]
Total Commander 7.02a Powerpack - отличный фаил-менеджер (0)
[16.08.2008][Видеоуроки]
Как проверить правильность ввода email в форму (0)
[17.08.2008][Видеоуроки]
Создание интересных CSS меню для сайта (3)
[17.08.2008][Видеоуроки]
Light Box 2 - создание слайдшоу на Вашем сайте (0)
[17.08.2008][Видеоуроки]
Как создать 3D обложку быстро и бесплатно? (2)
[16.08.2008][Видеоуроки]
Как проще всего сделать поиск по сайту (2)
[16.08.2008][Видеоуроки]
Как скрыть элемент сайта от посторонних глаз (0)
[17.08.2008][Видеоуроки]
Внешний вид формы обратной связи (0)
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Copyright © 2020