Web Creation - еженедельный сетевой журнал для вебмастеров

   
Scrollbar, как элемент дизайна

Автор: Алексей Кузьмин
Сайт автора: wc.hut.ru

Как изменить цвет Scrollbar`а

В этой статье я хотел бы рассказать о популярном сейчас приёме - изменение цвета Scrollbar`а (линейки прокрутки) html-документа. Иногда этот элемент не вписывается в общий дизайн сайта. С помощью CSS можно решить это проблему. Прежде всего, я хотел бы отметить, что этот приём работает только в IE 5, но при его применении пользователи Opera и NN никаких неудобств не будут испытывать.

Для использования этого приёма вы должны вставить между тегами <head> </head> описание стилей. В написании этой статьи мне помогла информация с сайта Cgiscript.net. Вот рисунок, который поможет вам правильно описать каждый элемент scrollbar`а:

 

А вот примерный html-код:

<STYLE TYPE="text/css"><!--
BODY {
scrollbar-arrow-color:#170088;
scrollbar-3d-light-color:white;
scrollbar-highlight-color:#DDDDDD;
scrollbar-face-color:black;
scrollbar-shadow-color:#DDDDDD;
scrollbar-dark-shadow-color:white;
scrollbar-track-color:blue;
scrollbar-base-color:red;
}
//--></STYLE>

Вы можете вынести его в отдельный css-файл или просто вставит в свой документ между тегами <head>

Динамически изменяемый цвет линии прокрутки

Ещё один приём изменения цвета scrollbar`а. Надо сразу сказать, что он не такой безобидный, как предыдущий. При его использовании в Opera и NN возникает ошибка. Поэтому используйте этот приём на свой страх и риск. Как и в предыдущей заметке, здесь используется информация с сайта Cgiscript.net. Покончив с копирайтами, приступим к делу. Рассмотрим несколько примеров:

  1. При наведении курсора мыши на ссылку
  2. Когда вы убираете курсор мыши с ссылки
  3. При нажатии на ссылку
  4. Изменение цвета при наведении курсора мыши на ссылку и наоборот (п.1 + п.2)
  5. Изменение цвета при наведении курсора мыши на ссылку и наоборот + при нажатии на ссылку (п.1 + п.2 + п.3)

Вариант #1. Изменение цвета линии прокрутки при наведении курсора мыши на ссылку.

 

Вариант #2. Изменение цвета линии прокрутки в момент, когда вы убираете курсор мыши с ссылки.

 

Вариант #3. Изменение цвета линии прокрутки при нажатии на ссылку

 

Вариант #4. Изменение цвета линии прокрутки при наведении курсора мыши на ссылку и наоборот

 

Вариант #5. Изменение цвета линии прокрутки при наведении курсора мыши на ссылку и наоборот + при нажатии на ссылку

Автор: Алексей Кузьмин
Сайт автора: wc.hut.ru
Использована информация с сайта Cgiscript.net

© журнал принадлежит Web Creation
по всем вопросам обращаться А. Кузьмин