scrollbar-darkshadow-color в CSS

FPublisher

Web-технологии: База знаний

Разукрашиваем scrollbar средствами CSS

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

Примеры

Пара слов о других браузерах

Кроме Internet Explorer 5.5+ измененять полосы прокрутки с помощью CSS могут Opera 7.23+ и Konqueror 3.1+. Однако в Opera до версии 7.5 для этого необходимо изменить настройки браузера (Style options). Кроме того, Опера позволяет изменять скроллинг только, если она находится в режиме совместимости (Quirks mode).

Полоса прокрутки.

Коротенькая и совсем несложная глава про цвет полосы прокрутки.

Для того чтобы изменить дизайн полосы прокрутки, раскрасить её на свой лад, необходимо воспользоваться свойствами из семейства scrollbar , присвоив их нужному элементу.

В качестве элементов могут выступать любые блоки, в которых гипотетически может появляться полоса прокрутки

Илон Маск рекомендует:  Команда @each

, и т.д.. в том числе и сама страница — тег .

В таблице ниже перечислены все свойства CSS из семейства scrollbar , а также показан результат применения этих свойств.

Свойство полосы прокрутки: Внешний вид:
scrollbar-3dlight-color: #ff0000; — Цвет верхней и левой тени ползунка и кнопок.
scrollbar-arrow-color: #ff0000; — Цвет стрелок на кнопках полосы прокрутки.
scrollbar-base-color: #ff0000; — Базовый цвет полосы прокрутки.
scrollbar-darkshadow-color: #ff0000; — Цвет нижней и правой тени.(dark shadow — темная тень)
scrollbar-face-color: #ff0000; — Цвет лицевой части полосы прокрутки.
scrollbar-highlight-color: #ff0000; — Цвет подсветки полосы прокрутки.
scrollbar-shadow-color: #ff0000; — Цвет тени полосы прокрутки (shadow-тень).
scrollbar-track-color: #ff0000; — Цвет дорожки для полосы прокрутки.

Ну вот Вам ещё и рисунок для наглядности:

Возможные значения свойств из семейства scrollbar:

  • #ff0000 — Шестнадцатеричное значение цвета RGB.
  • red — Именное значение цвета.
  • RGB(255, 0, 0) — Значение цвета RGB.
  • inherit — применяется значение родительского элемента.(по умолчанию)

-ms-scrollbar-darkshadow-color property

Specifies the color of the gutter of a scroll bar.

Syntax

Property values

  • variant
    A VARIANT that specifies or receives any color name or RGB values in the Color Table.

CSS information

Applies To All elements
Media visual
Inherited 1
Initial Value

Standards information

There are no standards that apply here.

Remarks

Windows Internet Explorer 8. The -ms-scrollbar-darkshadow-color attribute is an extension to CSS, and can be used as a synonym for scrollbar-darkshadow-color in IE8 Standards mode.

The gutter is the space between the track and the bottom and right edges of the scroll box and scroll arrows of the scroll bar. The -ms-scrollbar-darkshadow-color appears outside the -ms-scrollbar-shadow-color. The track is the element of a scroll bar on which the scroll box can slide either up and down or left and right. The scroll box is the square box within a scroll bar that can be moved either up and down or left and right on a track to change the position of the content on the screen. The scroll arrows, located at each end of a scroll bar, are the square buttons containing the arrows that move the content on the screen in small increments, either up and down or left and right.

This property applies to elements that display a scroll bar. Cascading Style Sheets (CSS) enable scrolling on all objects through the overflow property. These objects are not listed in the Applies To list for this property.

Examples

The following example shows how to create a style rule that sets the -ms-scrollbar-darkshadow-color property for a textArea element.

Изменить полосу прокрутки на CSS

2020-06-04 / Вр:22:51 / просмотров: 9176

Вы задумывались о том, как изменить полосу прокрутки на сайте? Я задумывался, так как иногда хочется, чтобы абсолютно все соответствовало гамме сайта, даже полоса прокрутки.
В этой статье попробуем изменить цвет прокрутки для вашего сайта, используя только таблицу стилей.
Но, к сожалению, не все браузеры поймут и смогут выполнить ваши требования, которые вы пропишите в CSS. Эти стили подойдут только для тех браузеров, которые созданы по образу и подобию Google Chrome, OPERA и Internet Explorer. Да, вы правильно поняли, Mozilla Firfox останется в сторонке .

Полоса прокрутки для Internet Explorer

  1. scrollbar-arrow-color – цвет стрелки.
  2. scrollbar-track-color – цвет подложки.
  3. scrollbar-face-color – цвет самой полосы.
  4. scrollbar-shadow-color
    scrollbar-highlight-color — цвет разделяющей полосы
  5. scrollbar-3dlight-color
    scrollbar-darkshadow-color — цвет внешних границ полосы

Код нужно вставит в CSS файл

Полоса прокрутки для Google Chrome

  1. webkit-scrollbar — скроллбар
  2. webkit-scrollbar-button — кнопка
  3. webkit-scrollbar-track — трек
  4. webkit-scrollbar-track-piece — видимая часть трека
  5. webkit-scrollbar-thumb — ползунок
  6. webkit-scrollbar-corner – уголок
  7. webkit-resizer — изменение размеров

Различные состояния для полосы прокрутки

Эти псевдо селекторы позволяют точнее выбирать разные части полосы прокрутки для различного состояния. Описание смотрите на блоге WebKit (на англ. ).

:horizontal
:vertical
:decrement
:increment
:start
:end
:double-button
:single-button
:no-button
:corner-present
:window-inactive

CSS customized scroll bar in div

How can I customize a scroll bar via CSS (Cascading Style Sheets) for one div and not the whole page?

16 Answers 16

I thought it would be helpful to consolidate the latest information on scroll bars, CSS, and browser compatibility.

Scroll Bar CSS Support

Currently, there exists no cross-browser scroll bar CSS styling definitions. The W3C article I mention at the end has the following statement and was recently updated (10 Oct 2014):

Some browsers (IE, Konqueror) support the non-standard properties ‘scrollbar-shadow-color’, ‘scrollbar-track-color’ and others. These properties are illegal: they are neither defined in any CSS specification nor are they marked as proprietary (by prefixing them with «-vendor-«)

Microsoft

As others have mentioned, Microsoft supports scroll bar styling, but only for IE8 and above.

Chrome & Safari (WebKit)

Similarly, WebKit now has its own version:

Firefox (Gecko)

As of version 64 Firefox supports scrollbar styling through the properties scrollbar-color (partially, W3C draft) and scrollbar-width (W3C draft). Some good information about the implementation can be found in this answer.

Cross-browser Scroll Bar Styling

JavaScript libraries and plug-ins can provide a cross-browser solution. There are many options.

The list could go on. Your best bet is to search around, research, and test the available solutions. I am sure you will be able to find something that will fit your needs.

Prevent Illegal Scroll Bar Styling

Just in case you want to prevent scroll bar styling that hasn’t been properly prefixed with «-vendor», this article over at W3C provides some basic instructions. Basically, you’ll need to add the following CSS to a user style sheet associated with your browser. These definitions will override invalid scroll bar styling on any page you visit.

Duplicate or Similar Questions / Source Not Linked Above

Note: This answer contains information from various sources. If a source was used, then it is also linked in this answer.

scrollbar-color

Easily manage projects with monday.com

The scrollbar-color property controls the two colors of a scrollbar: the thumb color and the track color. scrollbar-color is part of the CSS Working Group’s Scrollbars Module Level 1 draft, which is still a work in progress as of this writing.

Prior to scrollbar-color , developers had no standard way to change the default appearance of a browser’s scrollbars without resorting to hiding the scrollbar via overflow: hidden and rendering JavaScript-based scrollbars or using browser-prefixed scrollbar attributes. With scrollbar-color , on the other hand, we can style a scrollbar to match a design without resorting to redoing browser functionality or using vendor prefixes.

Go wild with custom colors

scrollbar-color will also accept values of dark and light to match a user’s preferences if they’re using something like dark mode on Mac OSX.

As of March 2020, support for dark and light values is not available in any browser. is supported in Firefox. See the browser support section below for details.

Syntax

Values

scrollbar-color accepts the following values:

  • auto is the default value and will render the standard scrollbar colors for the user agent.
  • dark will tell the user agent to use darker scrollbars to match the current color scheme.
  • light will tell the user agent to use lighter scrollbars to match the current color scheme.
  • specifies two colors to be used for the scrollbar. The first color is for the «thumb» or the moveable part of the scrollbar which appears on top. The second color is for the «track» or the fixed portion of the scrollbar.

Example

Browser Support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Цвет скроллбара в iframe

21.11.2009, 00:36

Как задать расположение и цвет скроллбара?
В макете скролбар задуман под знаком «крестик». Скролл появился автоматически за счет правила .

Оформление скроллбара
Как изменить оформление ползунка скроллбара на свое картинками. Спасибо!

Уменьшить высоту скроллбара
Подскажите пожалуйста, есть правый блок с комментариями. (div) А так же под этим блоком находится.

CSS — Настройка мануального скроллбара
Здравствуйте, у себя на сайте я настроил вертикальный скролл, а как настроить горизонтальный ? .

Как изменить стиль скроллбара элемента?
Приветствую! На странице имеется блок, как изменить стиль скроллбара этого элемента? Данный.

21.11.2009, 00:47 2

scrollbar-face-color — задаёт основной цвет полосы прокрутки.

scrollbar-highlight-color — цвет левого верхнего угла самого скролл бара.

scrollbar-shadow-color — этим цветом отображается правый нижний угол скролл бара.

scrollbar-3dlight-color — тоненькая кромка, находящаяся в левом верхнем углу, ближе к краю нежели scrollbar-highlight-color.

scrollbar-arrow-color — определяет цвет стрелочек.

scrollbar-track-color — цвет дорожки по которой перемещается скролл бар.

scrollbar-darkshadow-color — тоненькая кромка, находящаяся в правом нихнем углу, ближе к краю нежели scrollbar-shadow-color.

И ещё, учитесь пользоваться поиском. Гугл мне сразу ответил на вопрос.

Каскадные таблицы стилей CSS советы & приёмы

Смотрите также указатель всех приёмов работы.

Бесцветные полосы прокрутки

Некоторые браузеры (IE, Konqueror) поддерживают нестандартные свойства ‘scrollbar-shadow-color’, ‘scrollbar-track-color’ и другие. Эти свойства нелегальны: они не определены ни в одной из спецификаций CSS и не содержат отметки, указывающей на то, что это собственная разработка (такая отметка ставится путем добавления приставки «-vendor-«). Но, к счастью, вы можете легко отключить их.

Чтобы быть уверенными, что ваш браузер сохранит нормальные цвета полосы прокрутки, вам нужно использовать пользовательскую таблицу стилей и объявление ‘!important’. Пользовательскую таблицу стилей обычно можно выбрать в меню настройки/параметров браузера. В IE вы найдете соответствующую настройку во вкладке «Доступность» («Accessibility»), а в Konqueror — во вкладке «Стили» («Stylesheets»).

  1. Если у вас еще нет пользовательской таблицы стилей, создайте новый CSS-файл. Вы можете сохранить его где угодно.
  2. Добавьте следующие строки в файл таблицы стилей:
  3. Укажите путь к этому файлу в соответствующем диалоговом окне вашего браузера.

Это должно сработать. Вам необходимо перезапустить браузер для того, чтобы увидеть эффект. Чтобы убедиться, что сработало, можете посмотреть небольшой тест, который я сделал.

Created 12 Oct 2001;
Last updated Вт 05 ноя 2020 19:12:56

Как сделать красивую полосу прокрутки на Вашем сайте?

В этом уроке пойдет речь о том, как придать полосе прокрутки вашего сайта определённый цвет.

Вы наверняка уже не раз видели такие раскрашенные под цвет всего сайта полосы прокрутки. Такая же применяется и на моём сайте, Вы можете наблюдать её в правой части экрана.

Как её сделать? Очень просто.

Вообще, есть несколько способов.

1. Вставить полный код (приводится ниже) в каждую страницу сайта, где Вы хотите видеть красивую полосу прокрутки.

2. Вставить ссылку на css-файл с кодом.

Рассмотрим оба этих варианта.

Итак, случай первый.

Откройте в блокноте или в Вашем любимом HTML редакторе ту страницу сайта , на которой вы хотите изменить цвет полосы прокрутки.

Где-нибудь между тэгами

Вставьте следующие строки:

Что означают эти параметры?

1. scrollbar-arrow-color — цвет стрелки.

2. scrollbar-track-color — цвет подложки.

3. scrollbar-face-color — цвет самой полосы.

4. scrollbar-shadow-color: #ffffff;
scrollbar-highlight-color: #ffffff;
цвет разделющей полосы.

5. scrollbar-3dlight-color: #5997CA;
scrollbar-darkshadow-color: #5997CA;
цвет внешних границ полосы.

Если Вы не знаете как определить цвет в формате #xxxxxx, то воспользуйтесь программой HTML Colors 2000, которая показывает цвет в этом формате в любом месте экрана. Скачать её можно из раздела программ.

Случай второй.

Откройте в блокноте новый файл и вставьте в него вышеприведенный код, только без тэгов и сохраните его под именем scroll.css и поместите в ту же папку, где и подопытная страница.

В тех страницах, где Вы хотите изменить цвет полосы прокрутки, между тэгами вставьте следующую строку.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.ruseller.com
Автор: Евгений Попов
Урок создан: 31 Декабря 2007
Просмотров: 130851
Правила перепечатки

5 последних уроков рубрики «CSS»

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Раскрывающаяся навигация

Экспериментальный скрипт раскрывающейся навигации.

Scrollbar-darkshadow-color в CSS

CSS Codes and Examples

www.tagindex.net

scrollbar-***-color: ***;

The scrollbar-***-color property changes the color of the scrollbars.
( *** = base , face , track , arrow , highlight , shadow , 3dlight , and darkshadow )

Applying this property to the BODY (or HTML) element applies the specified style to an entire page.

When you specify only the base color

body <
scrollbar-base-color : #ff0000 ;
>

When you specify the detailed color

body <
scrollbar-face-color : #ff8c00 ;
scrollbar-track-color : #fff8dc ;
scrollbar-arrow-color : #ffffff ;
scrollbar-highlight-color : #fff8dc ;
scrollbar-shadow-color : #d2691e ;
scrollbar-3dlight-color : #ffebcd ;
scrollbar-darkshadow-color : #8b0000 ;
>

Property Value Explanation
scrollbar-base-color color code or name (1) the base color
scrollbar-face-color color code or name (2) the face color
scrollbar-track-color color code or name (3) the track color
scrollbar-arrow-color color code or name (4) the arrow color
scrollbar-highlight-color color code or name (5) the highlight color
scrollbar-shadow-color color code or name (6) the shadow color
scrollbar-3dlight-color color code or name (7) the 3D light color
scrollbar-darkshadow-color color code or name (8) the dark shadow color

The element to which the style should be applied

Standards mode : Apply these styles to the HTML element.
Quirks mode : Apply these styles to the BODY element.

Илон Маск рекомендует:  Что такое код swfbitmap &#62;getheight
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL