Новые сообщения · Участники · Правила форума · Поиск
  • Страница 1 из 3
  • 1
  • 2
  • 3
  • »
Форум о uCoz и Web » Веб-программирование и дизайн » CSS » Меняем цвет полосы прокрутки(scrollbar)
Меняем цвет полосы прокрутки(scrollbar)
SleepWalkerДата: Вторник, 24.06.2008, 14:25 | Сообщение # 1
Admin
Сообщений: 5493
Репутация: 487
Социальная репутация:

Статус: Offline
CSS scrollbar - разукрашиваем scrollbar средствами CSS

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

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

CSS свойства scrollbar

С самого начала хочу отметить, что описываемые ниже CSS свойства являются расширением спецификации CSS2, введенным компаний Microsoft, реализованным начиная с IE 5.5

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

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

Самый простой способ изменить полосу прокрутки это задать свойство 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 (смотрите пример ниже) .
    Примеры

    Code
    /* CSS правила для полос прокрутки окна браузера */
    html, body {
       scrollbar-3dlight-color:red;   
       scrollbar-arrow-color:yellow;
       scrollbar-highlight-color: aqua;
       scrollbar-face-color:green;
       scrollbar-shadow-color:fuchsia;
       scrollbar-darkshadow-color:blue;
       scrollbar-track-color: maroon;
    }

    /* CSS правила для полос прокрутки элементов TEXTAREA */

    textarea {
       scrollbar-base-color:lime;
    }
    Как установить кнопки социальных сетей?

    Time Waits For No One
  •  
    ironkissДата: Вторник, 24.06.2008, 17:00 | Сообщение # 2
    Лейтенант
    Сообщений: 49
    Репутация: 9
    Социальная репутация:

    Статус: Offline
    а по моему глупость, для чего менять то, что и так хорошо смотриться! тем более, что это уже не сайт, твой компьютер!
    Спамеров ненавижу!
     
    SleepWalkerДата: Вторник, 24.06.2008, 17:08 | Сообщение # 3
    Admin
    Сообщений: 5493
    Репутация: 487
    Социальная репутация:

    Статус: Offline
    та вобщем да. особой разницы нету. но всеравно ета тема полезная. она стала первой в етом разделе потому, что на одном форуме задавали такой вопрос вот я и решил с нее начать.
    Дальше буду етот раздел попорядку заполнять, причем своими уроками!

    Time Waits For No One
     
    Xero201Дата: Пятница, 11.07.2008, 02:16 | Сообщение # 4
    Рядовой
    Сообщений: 2
    Репутация: 1
    Социальная репутация:

    Статус: Offline
    Admin - ты молодец.
    А то я полдня долбался вставляя в Боди эти скролы, а толку никакого. А в Инете куда не тыкнешься, везде одно и то же: "вставьте эти штуки в боди, и не партесь". А заработало только когда html дописал, как у тебя написано.
    Так что еще раз большое спасибо.
     
    SleepWalkerДата: Пятница, 11.07.2008, 11:30 | Сообщение # 5
    Admin
    Сообщений: 5493
    Репутация: 487
    Социальная репутация:

    Статус: Offline
    незачто))
    Time Waits For No One
     
    ZeuSДата: Вторник, 14.10.2008, 01:26 | Сообщение # 6
    Полковник
    Сообщений: 203
    Репутация: 20
    Социальная репутация:

    Статус: Offline
    Полезная вещ!
     
    NarutoPlanetДата: Вторник, 28.10.2008, 11:16 | Сообщение # 7
    Подполковник
    Сообщений: 139
    Репутация: 3
    Социальная репутация:

    Статус: Offline
    Спс! мне как раз это рнадо!

    Добавлено (28.10.2008, 11:16)
    ---------------------------------------------
    Посмотрите у меня на сайте как неплохо?

     
    SleepWalkerДата: Вторник, 28.10.2008, 13:48 | Сообщение # 8
    Admin
    Сообщений: 5493
    Репутация: 487
    Социальная репутация:

    Статус: Offline
    Quote (NarutoPlanet)
    Посмотрите у меня на сайте как неплохо?

    хороо wink

    Time Waits For No One
     
    NarutoPlanetДата: Вторник, 28.10.2008, 14:01 | Сообщение # 9
    Подполковник
    Сообщений: 139
    Репутация: 3
    Социальная репутация:

    Статус: Offline
    спс!
     
    ShepardДата: Среда, 05.11.2008, 15:30 | Сообщение # 10
    Рядовой
    Сообщений: 6
    Репутация: 1
    Социальная репутация:

    Статус: Offline
    NarutoPlanet, хорошо! smile Спасибо, за полное пояснение, как, что куда. Спс, SleepWalker wink


    Сообщение отредактировал Shepard - Среда, 05.11.2008, 15:32
     
    miller74Дата: Четверг, 19.02.2009, 01:46 | Сообщение # 11
    Рядовой
    Сообщений: 2
    Репутация: 1
    Социальная репутация:

    Статус: Offline
    а я думаю что это глупость ! ну зачем менять, когда и так нормально смотриться . не в обиду конечно но это бесполезная инфа !
     
    SleepWalkerДата: Четверг, 19.02.2009, 08:23 | Сообщение # 12
    Admin
    Сообщений: 5493
    Репутация: 487
    Социальная репутация:

    Статус: Offline
    я пока не очень определился надо ли это. но инфа полезна как минимум потому что такое есть в цсс..
    Time Waits For No One
     
    JesseДата: Четверг, 19.02.2009, 17:48 | Сообщение # 13
    Зайчик
    Сообщений: 2132
    Репутация: 111
    Социальная репутация:

    Статус: Offline
    норм, я но не пользуюсь))
    На вопросы в ЛС все равно не отвечаю, так что, пожалуйста, не тратьте ни своего ни моего времени.
     
    Pers_SpikuДата: Среда, 08.07.2009, 14:08 | Сообщение # 14
    Генерал-лейтенант
    Сообщений: 739
    Репутация: 69
    Социальная репутация:

    Статус: Offline
    а как мне убрать полосу прокрутки, не ту что прокручивает всю страницу, а та что в самой странице? которая появилась из-за тех же переключателей страниц ))
    вот для наглядности
    http://s40.radikal.ru/i090/0907/db/dec2eaa77286.jpg
     
    SleepWalkerДата: Пятница, 10.07.2009, 16:24 | Сообщение # 15
    Admin
    Сообщений: 5493
    Репутация: 487
    Социальная репутация:

    Статус: Offline
    Pers_Spiku, ето у тебя там фрейм стоит? или в диве прокрутка установлена?
    если фрейм то попробуй дописать: scrolling="no" (правда если это к примеру опера, то скроллером на мышке всеравно прокручивать можно...)
    если в диве, то дописать в стиль: overflow: visible
    ну и есть такой вариант что я вообще не так понял то что ты хочещ:)

    http://www.htmlbook.ru/css/overflow.html
    http://www.htmlbook.ru/html/frame.html

    Time Waits For No One
     
    Форум о uCoz и Web » Веб-программирование и дизайн » CSS » Меняем цвет полосы прокрутки(scrollbar)
    • Страница 1 из 3
    • 1
    • 2
    • 3
    • »
    Поиск: