SiteMaker - Академия сайтостроительства | Разработка сайта
| Вёрстка сайта
| Веб программирование
| Интернет технологии
| Продвижение ресурса
| Инструментарий
карта сервера :: форум :: профайл :: авторам :: о сайте
Гид: SiteMaker.Ru » Вёрстка сайта » CSS » Манипулирование цветами скроллбара с помощью CSS и JavaScript

Манипулирование цветами скроллбара с помощью CSS и JavaScript


Версия для печати
Минус в заданном по умолчанию цвете полосы прокрутки состоит в том, что он является унылым и некрасивым – обычно этот цвет серый. Возможно, не было бы лишним изменить эту расцветку на более яркую и подходящую, соответствующую духу и стилю вашего сайта. К счастью (а может и к несчастью), этого мы можем добиться с помощью средств CSS и JavaScript.

Использование CSS

Для изменения цветов скроллбара просто добавьте следующие описания в header страницы. Большим плюсом CSS является то, что если броузер не понимает определенные описания и определения, то он их просто игнорирует. Следует заметить, что раскраска скроллбаров поддерживается только броузером IE5.5 и выше.

<style>
<!--
BODY{
scrollbar-face-color:#8080FF;
scrollbar-arrow-color:#FFFFFF;
scrollbar-track-color:#DDDDFF;
scrollbar-shadow-color:'';
scrollbar-highlight-color:'';
scrollbar-3dlight-color:'';
scrollbar-darkshadow-Color:'';
}

-->
</style>

Наверняка, вы никогда не представляли, что полоса прокрутки состоит из такого числа компонентов. Первые три строки-определения наиболее важны, так как описывают наиболее видимую часть скроллбара. Попробуйте «поиграться» с другими определениями, чтобы лучше понять на что каждое из них влияет.

Использование JavaScript

Также можно использовать JavaScript для динамического изменения цветов полосы прокрутки. Это поможет сделать что-нибудь, поражающее воображение, например – переливание цветов. Определения CSS в переводе на JavaScript выглядят так:

document.body.style.scrollbarFaceColor="colorname"
document.body.style.scrollbarArrowColor="colorname"
document.body.style.scrollbarTrackColor="colorname"
document.body.style.scrollbarShadowColor="colorname"
document.body.style.scrollbarHighlightColor="colorname"
document.body.style.scrollbar3dlightColor="colorname"
document.body.style.scrollbarDarkshadowColor="colorname"

Пример «мигающего» скроллбара с периодом смены цвета в одну секунду:

<script>

var mode=0

function blinkscroll(){
if (mode==0)
document.body.style.scrollbarFaceColor="blue"
else
document.body.style.scrollbarFaceColor="green"
mode=(mode==0)? 1 : 0
}
setInterval("blinkscroll()",1000)
</script>

Более сложный пример манипуляции с цветами полосы прокрутки, использующий JavaScript, так называемый onMouseover Scrollbar Effect, написал Svetlin Staev. Он изменяет цвета при наведении и удалении курсора мыши от скроллбара.

Сейчас встречается все больше и больше сайтов с изменённым цветом полосы прокрутки, которые пытаются «подогнать» стиль скроллбара к стилю самого сайта. У этой тенденции есть как противники так и поклонники. Использовать или нет – решать вам. Мое мнение – только опытный дизайнер может себе это позволить.


Автор: DenveroidДата публикации: 27.06.2002
Рейтинг статьи: [3.40] рейтинг статьи: 3.40рейтинг статьи: 3.40рейтинг статьи: 3.40 [голосов: 10]Кол-во просмотров: 11629
Оценить статью:  

Комментарии читателей:


Сообщение №40 Andihttp://www.remstroy-dm.ru в новом окне16.08.2002 14:06:38
Всё отлично, но во втором примере не мешало бы поставить тег открытия и закрытия скрипта, - чайник бы не догодался :)
Сообщение №41 Andihttp://www.remstroy-dm.ru в новом окне16.08.2002 16:09:57
Да ещё мне очень понравился onMouseover Scrollbar Effect
код Svetlin Staev, но я его немного доделал, - это касается горизонтального скролинга и смены цветов стрелок на кнопках скролинга.
P.S. Cсмотрите на URL
Сообщение №42 Denveroidhttp://sitemaker.ru в новом окне16.08.2002 16:58:53
С точки зрения юзабилити - это не есть хорошо. Юзер пугается отсутствием скроллбара.
Сообщение №43 Andihttp://www.remstroy-dm.ru в новом окне16.08.2002 17:26:32
:) Согласен есть какие-то неприятные ощущения, кажется что чего-то не хватает, но как юзер радуется когда вдруг обнаруживает скрол :))

P.S. Если хочешь действительно испугаться, нади мышь на название сайта на полоске снизу и кликни два раза - :)))
Сообщение №44 Denveroidhttp://sitemaker.ru в новом окне16.08.2002 18:06:17
Andi, а теперь объясните мне дураку, зачем и кому это нужно? ;)

» Читать все комментарии...

Ваши комментарии:

Ваше имя:*
Ваш E-mail:
Ваш URL:
HTML запрещен
BB Код разрешен


Ваше сообщение:*
* - обязательные поля для заполнения

Внимание!
Перед появлением сообщения на сайте, оно пройдет премодерацию.

Поиск по сайту:

Последние статьи:
» архив всех статей
Схожая тематика:
:: HTML
:: DHTML
:: XML
Рассылка новостей:

подписаться
отказаться


Академия веб мастеринга и веб дизайна. Разработка сайта, вёрстка сайта, веб программирование, продвижение ресурса, инструментарий и другие темы, посвященные разработке ресурсов в сети Интернет. Форум для веб мастера.


карта сервера :: форум :: профайл :: авторам :: о сайтеНаверх
Rambler's Top100Rambler's Top100 Valid HTML 4.01!Каталог-Молдова - Ranker, Statistics © 2000-2010 Все права защищены
страница создана за 0.497 секунд
На главную страницуHosted by Host-MD 
Developed by SiteMaker