Большой архив статей, книг, документации по программированию, вебдизайну, компьютерной графике, сетям, операционным системам и многому другому
 
<Добавить в Избранное>    <Сделать стартовой>    <Реклама на сайте>    <Контакты>
  Главная Документация Программы Обои   Экспорт RSS E-Books
 
 

   Интернет технологии -> 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
Источник: www.woweb.com

 

 
Интересное в сети
 
10 новых программ
CodeLobster PHP Edition 3.7.2
WinToFlash 0.7.0008
Free Video to Flash Converter 4.7.24
Total Commander v7.55
aTunes 2.0.1
Process Explorer v12.04
Backup42 v3.0
Predator 2.0.1
FastStone Image Viewer 4.1
Process Lasso 3.70.4
FastStone Image Viewer 4.0
Xion Audio Player 1.0.125
Notepad GNU v.2.2.8.7.7
K-Lite Codec Pack 5.3.0 Full


Наши сервисы
Рассылка новостей. Подпишитесь на рассылку сейчас и вы всегда будете в курсе последних событий в мире информационных технологий.
Новостные информеры. Поставьте наши информеры к себе и у вас на сайте появится дополнительный постоянно обновляемый раздел.
Добавление статей. Если вы являетесь автором статьи или обзора на тему ИТ присылайте материал нам, мы с удовольствием опубликуем его у себя на сайте.
Реклама на сайте. Размещая рекламу у нас, вы получите новых посетителей, которые могут стать вашими клиентами.
 
Это интересно
 

Copyright © CompDoc.Ru
При цитировании и перепечатке ссылка на www.compdoc.ru обязательна. Карта сайта.