*** WEB Star *** Журнал для настоящих web-мастеров.
Web-дизайн и не только... Заходи на Коврик TrigGer'a и ты узаешь о нем все!!!
Линия WEB Star
Общая информация
Главная
Авторам
Сотрудничество
Ссылки
Анонсы
WEB-design
WEB фокусы
Как изменить цвет скролл-бара Internet Explorer 5.5 и выше
Java Script'ы
Ссылка со стрелкой
Извращаемся над линкой <mailto> или облегчаем жизнь юзерам
Programming
Философия WEB

*** WEB Star *** #1 WEB фокусы

Как изменить цвета скролл-бара у Internet Explorer 5.5 и выше

Евгений В. Жданов
http://protoplex.ru/

Таскаясь по разным сайтам нашего виртуального мира иногда находишь всякие там приятные наворотики для дизайна своих страниц. То цветовая схема понравится, то навигационная система, то целиком сайт. До недавнего времени я пользовался обычным пятым IE, который идёт со стандартным Windows 2000. Потом я поставил версию 5.5 и обнаружил, что на некоторых сайтах мой браузер меняет стиль оформления своего скролл-бара. Скролл-бар - это такая палочка справа экрана (или снизу), которая позволяет нам просмотреть ту часть страницы или элемента окна, которая не уместилась в своей области. Скролл-бар можно двигать двумя способами: либо цеплять его мышкой и тащить до нужной позиции, либо покрутить колёсико на мыши, если ваш крысиный девайс имеет такую достопримечательность на своей серой спинке. Так вот скролл-бар можно оформить на свой вкус. Можно сделать красный скролл-бар, стрелки сделать чёрными, можно вообще всё чёрным оформить. Делается это при помощи обычной таблицы стилей, поэтому даже полный ламер может вставить такую фишку на свой продвинутый сайт.

Расскажу, что я прописал для своего сайта (http://protoplex.ru/), и вы без труда примените это на своих. Всё очень просто. Нужно добавить немного кода в тег <STYLE>, который задаёт стили на всей странице. Его вставляют в начало страницы, чтобы он сидел внутри тега <HEAD> Тег на моём мультипортале имеет следующий вид:

<style type="text/css">
BODY {SCROLLBAR-FACE-COLOR: #0000dd; SCROLLBAR-HIGHLIGHT-COLOR: white; SCROLLBAR-SHADOW-COLOR: black; SCROLLBAR-ARROW-COLOR: #ffffff; SCROLLBAR-TRACK-COLOR: #ffffff;}
</style>

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

SCROLLBAR-FACE-COLOR - задаёт основной цвет скролл-бара, которым закрашивается сама палочка прокрутки, и две завершающие кнопочки со стрелками. Также, если вы не задали параметр

SCROLLBAR-TRACK-COLOR, у вас изменится цвет задней части крутилки.

SCROLLBAR-HIGHLIGHT-COLOR - устанавливает цвет подсветки, создающий эффект объёмности. Тот цвет, который окаймляет освещённую часть кнопочки. Когда кнопка не нажата цвет заливает левый верхний угол и стороны между ним, когда нажата - нижний правый угол.

SCROLLBAR-SHADOW-COLOR - цвет тени, также служит для придания объекту объёмности. Тень - она и в Африке тень. Куда без неё.

SCROLLBAR-ARROW-COLOR - устанавливает цвет стрелок на крайних позициях крутилки.

SCROLLBAR-TRACK-COLOR - определяет цвет дорожки прокрутки. Это та фиговинка, по которой собственно и ездит палочка прокрутки. Эдакая пластинка смазаная вазелином :-)

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

© Copyright Алекс aka TrigGer & x-graphic studio
© Все права защищены.

Перепечатка материалов разрешается, только после письменного разрешения автора (e-mail). При перепечатке любого материала с журнала видимая ссылка на источник www.kovrik.hut.ru и все имена, ссылки авторов обязательны.