• Новые сообщения · Участники · Правила форума · Поиск · RSS
    • Страница 1 из 1
    • 1
    Модератор форума: STALKER  
    Форум » О веб-дизайне » Css » Меняем цвет полосы прокрутки(scrollbar)
    Меняем цвет полосы прокрутки(scrollbar)
    STALKERДата: Понедельник, 07.09.2009, 21:51 | Сообщение # 1
    Генералиссимус
    Группа: Администраторы
    Сообщений: 139
    Статус: :-(
    CSS scrollbar - разукрашиваем scrollbar средствами CSS

    Автор: Цыгырлаш Игорь (05.04.2006)

    В некоторых случаях можно пожертвовать привычным видом элементов управления и немного оживить интерфейс своими собственными стилями. Сегодня мы поговорим о полосах прокрутки (scrollbar), а точнее о том, как изменить их вид с помощью CSS.

    CSS свойства scrollbar

    Полоса прокрутки состоит из фона, ползунока и концевых кнопок со стрелками.

    Кнопки могут быть как активными так и нет. Если скроллбар неактивен, то ползунок отсутсвует.

    Самый простой способ изменить полосу прокрутки это задать свойство scrollbar-base-color. Это свойство задает основной цвет полосы прокрутки. Если не определены другие свойства полосы прокрутки, то бегунок и кнопки прокрутки будут отображаться определенным вами цветом с применением трехмерных эффектов. Фон полосы прокрутки будет отображаться тоже этим цветом, но только осветленным.
    Например, scrollbar-base-color:lime приведет к результат представленому на рисунке ниже.

    Конечно можно делать более тонкие настройки полосы прокрутки при помощи других CSS свойств.

    scrollbar-3dlight-color
    - задает цвет верхней и левой границ полосы прокрутки, ее бегунка и стрелок.
    scrollbar-arrow-color
    - задает цвет стрелок на кнопках полосы прокрутки.
    scrollbar-darkshadow-color
    - задает цвет "тени", отбрасываемой бегунком и кнопками полосы прокрутки (цвет правых и нижних гранией).
    scrollbar-face-color
    - задает основной цвет бегунка и кнопок прокрутки полосы прокрутки.
    scrollbar-highlight-color
    - задает цвет "освещенной" части бегунка и кнопок прокрутки полосы прокрутки (цвет левых и верхних их граней).
    scrollbar-shadow-color
    - задает цвет "неосвещенной" части бегунка и кнопок прокрутки полосы прокрутки (цвет правых и нижних их граней). Не путать с цветом "тени", задаваемым атрибутом scroll-darkshadow-color.
    scrollbar-track-color
    - задает цвет фона полосы прокрутки, той ее части, по которой перемещается бегунок.

    Как говорилось выше, концевые кнопки могут быть либо активными, либо не активными. Различие между активными и не активными кнопками заключается только в цветах, используемых при отображении кнопок. На активной кнопке стрелка изображается при помощи цветов scrollbar-arrow-color (рисунок выше). На неактивной кнопке стрелка отображается при помощи цветов scrollbar-shadow-color и scrollbar-highlight-color. Остальные элементы активной и неактивной кнопки полностью совпадают.

    Отдельно о фоне

    Фон полосы прокрутки задается посредством свойства scrollbar-track-color (смотри рисунок выше). Если это свойство не задано, то фон формируется из двух цветов (scrollbar-highlight-color и scrollbar-face-color), расположенных в шахматном порядке (смотри рисунок ниже).

    Почему раньше работало, а сейчас нет!

    В то время как появился IE5.5 цвет скроллинга окна браузера задавали применяя свойства к элементу BODY. Однако, с выходом IE6эти стили не всегда работают. Почему?

    Это поведение связано с директивой DOCTYPE и её влиянием на боксовую модель браузера. В общем, если браузер находится в режиме совместимости (Quirks mode), то все OK, но если браузер следует стандартам (Standards mode), то стили для скроллбаров, применяемые к BODY не работают. Не вдаваясь в подробности скажу, что это легко исправить, применяя стили также и к элементу HTML (смотрите пример ниже) .
    Примеры

    html, body, textarea {
    scrollbar-3dlight-color: #cbcbcb !important;
    scrollbar-arrow-color: #000000 !important;
    scrollbar-base-color: #FFFFFF !important;
    scrollbar-face-color: #a2a2a2 !important;
    scrollbar-track-color: #e2e2e2 !important;
    }


     
    Форум » О веб-дизайне » Css » Меняем цвет полосы прокрутки(scrollbar)
    • Страница 1 из 1
    • 1
    Поиск: