Статьи / Веб-Дизайн / Полоса прокрутки в CSS

  2008-11-03 21:14

Предлагаю рассмотреть несколько свойств, которые придают внешний вид полосам прокрутки страниц. А применяются они к таким элементам как: BODY, TEXTAREA, IFRAME и некоторым другим, которые имеют полосу прокрутки (корме SELECT).

И так:
scrollbar-3dlight-color
Устанавливает цвет верха и левой части ползунка и кнопок со стрелками на полосе прокрутки.

Значение:
любое соответствующее стандарту значение цвета.
inherit - применяется значение родительского элемента.

body {scrollbar-3dlight-color:green;}

scrollbar-arrow-color

Устанавливает цвет стрелок на кнопке со стрелками.

Значение:
любое соответствующее стандарту значение цвета.
inherit - применяется значение родительского элемента.

body {scrollbar-arrow-color: red;}
scrollbar css scroll css
scrollbar-base-color

Устанавливает цвет ползунка, кнопок со стрелками, дорожки для ползунка, если не определены параметры в scrollbar-face-color.

Значение:
любое соответствующее стандарту значение цвета.
inherit - применяется значение родительского элемента.

body {scrollbar-base-color: green;}
scrollbar-darkshadow-color

Устанавливает цвет тени для ползунка и кнопок со стрелками.

Значение:
любое соответствующее стандарту значение цвета.
inherit - применяется значение родительского элемента.

body {scrollbar-darkshadow-color: red;}
scrollbar-face-color

Устанавливает цвет ползунка и кнопок со стрелками. Также, если вы не задали параметр SCROLLBAR-TRACK-COLOR, у вас изменится цвет дорожки.

Значение:
любое соответствующее стандарту значение цвета.
inherit - применяется значение родительского элемента.

body {scrollbar-face-color: green;}
scrollbar-highlight-color

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

Значение:
любое соответствующее стандарту значение цвета.
inherit - применяется значение родительского элемента.

body {scrollbar-highlight-color: green;}
scrollbar-shadow-color

Схоже с scrollbar-darkshadow-color.

Значение:
любое соответствующее стандарту значение цвета.
inherit - применяется значение родительского элемента.

body {scrollbar-shadow-color: green;}
scrollbar-track-color

Устанавливает цвет дорожки для ползунка.

Значение:
любое соответствующее стандарту значение цвета.
inherit - применяется значение родительского элемента.

body {scrollbar-track-color: aqua;}