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 , присвоив их нужному элементу.
В качестве элементов могут выступать любые блоки, в которых гипотетически может появляться полоса прокрутки
, и т.д.. в том числе и сама страница — тег .
В таблице ниже перечислены все свойства 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:
-ms-scrollbar-darkshadow-color propertySpecifies the color of the gutter of a scroll bar. SyntaxProperty values
CSS information
Standards informationThere are no standards that apply here. RemarksWindows 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. ExamplesThe following example shows how to create a style rule that sets the -ms-scrollbar-darkshadow-color property for a textArea element. Изменить полосу прокрутки на CSS2020-06-04 / Вр:22:51 / просмотров: 9176 Вы задумывались о том, как изменить полосу прокрутки на сайте? Я задумывался, так как иногда хочется, чтобы абсолютно все соответствовало гамме сайта, даже полоса прокрутки. Полоса прокрутки для Internet Explorer
Код нужно вставит в CSS файл Полоса прокрутки для Google Chrome
Различные состояния для полосы прокрутки Эти псевдо селекторы позволяют точнее выбирать разные части полосы прокрутки для различного состояния. Описание смотрите на блоге WebKit (на англ. ). :horizontal CSS customized scroll bar in divHow can I customize a scroll bar via CSS (Cascading Style Sheets) for one div and not the whole page? 16 Answers 16I thought it would be helpful to consolidate the latest information on scroll bars, CSS, and browser compatibility. Scroll Bar CSS SupportCurrently, 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):
MicrosoftAs 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 StylingJavaScript 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 StylingJust 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 AboveNote: This answer contains information from various sources. If a source was used, then it is also linked in this answer. scrollbar-colorEasily 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. SyntaxValuesscrollbar-color accepts the following values:
ExampleBrowser SupportThis 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 | |||||||||||||||||||||||||
|
Как задать расположение и цвет скроллбара? Оформление скроллбара Уменьшить высоту скроллбара 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»).
Это должно сработать. Вам необходимо перезапустить браузер для того, чтобы увидеть эффект. Чтобы убедиться, что сработало, можете посмотреть небольшой тест, который я сделал. Навигация по сайтуCreated 12 Oct 2001; Как сделать красивую полосу прокрутки на Вашем сайте?В этом уроке пойдет речь о том, как придать полосе прокрутки вашего сайта определённый цвет. Вы наверняка уже не раз видели такие раскрашенные под цвет всего сайта полосы прокрутки. Такая же применяется и на моём сайте, Вы можете наблюдать её в правой части экрана. Как её сделать? Очень просто. Вообще, есть несколько способов. 1. Вставить полный код (приводится ниже) в каждую страницу сайта, где Вы хотите видеть красивую полосу прокрутки. 2. Вставить ссылку на css-файл с кодом. Рассмотрим оба этих варианта. Итак, случай первый. Откройте в блокноте или в Вашем любимом HTML редакторе ту страницу сайта , на которой вы хотите изменить цвет полосы прокрутки. Где-нибудь между тэгами Вставьте следующие строки: Что означают эти параметры? 1. scrollbar-arrow-color — цвет стрелки. 2. scrollbar-track-color — цвет подложки. 3. scrollbar-face-color — цвет самой полосы. 4. scrollbar-shadow-color: #ffffff; 5. scrollbar-3dlight-color: #5997CA; Если Вы не знаете как определить цвет в формате #xxxxxx, то воспользуйтесь программой HTML Colors 2000, которая показывает цвет в этом формате в любом месте экрана. Скачать её можно из раздела программ. Случай второй. Откройте в блокноте новый файл и вставьте в него вышеприведенный код, только без тэгов и сохраните его под именем scroll.css и поместите в ту же папку, где и подопытная страница. В тех страницах, где Вы хотите изменить цвет полосы прокрутки, между тэгами вставьте следующую строку. Данный урок подготовлен для вас командой сайта ruseller.com 5 последних уроков рубрики «CSS»Забавные эффекты для буквНебольшой эффект с интерактивной анимацией букв. Реализация забавных подсказокНебольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов. Анимированные буквыЭксперимент: анимированные SVG буквы на базе библиотеки anime.js. Солнцезащитные очки от первого лицаПрикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки. Раскрывающаяся навигацияЭкспериментальный скрипт раскрывающейся навигации. Scrollbar-darkshadow-color в CSSCSS Codes and Examples www.tagindex.net scrollbar-***-color: ***;The scrollbar-***-color property changes the color of the scrollbars. 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 < When you specify the detailed color body <
The element to which the style should be applied Standards mode : Apply these styles to the HTML element.
Является ли указанная страница — домашней? (IE) При создании новой вкладки (about:Tabs) в IE9
Справочник по интерфейсу администратора Ссылки Назад «> Вверх Вперед Опубликованные SQL View > XSLT
Язык программирования alfa По питанию контроллеры делятся на два типа: с питанием 220 В
Язык рефал Ура! Сегодня, 30.05.2005, наконец появилась адаптированная к современным платформам Windows-(95/98/ME/NT/2000/XP) и UNIX
Scrontch’s Flag Designer Design Your Flag! Generates Scalable Vector Graphics (SVG). This App requires
Простой огненный текст в Фотошопе Конечный результат: Ресурсы урока: Шаг 1 Создайте новый документ
Язык XML — практическое введение . Documents Type Definitions (DTD) В XML- документах DTD
ГРАММАТИКА ЯЗЫКОВ ПРОГРАММИРОВАНИЯ Описанию грамматики языка предшествует описание его алфавита. Алфавит любого языка состоит
Ледяной текст в Фотошопе Конечный результат: Ресурсы урока: 1. Создание фона Шаг 1 Создайте
XML-анализаторы в java XML как набор байт в памяти, запись в базе или текстовый
Языки описания пользовательских интерфейсов Язык описания интерфейсов Язык описания интерфейсов (IDL), используемый OMG определяет
Эффект линзы (watcom c) Просветляющие покрытия от ZEISS Высококачественные линзы требуют высоколассного подхода: защита,
Основы XML для начинающих пользователей Введение в правильную разметку XML означает Extensible Markup Language,
Языки программирования Язык программирования — искусственный (формальный) язык, предназначенный для записи программ для исполнителя
По-настоящему яркие ролики: эффект огня для видеомонтажа Как поразить зрителей с первых кадров? Самый
Язык xml введение XML технологии и средства разработки Gupta Team Developer: XML технологии (Часть
Создаем эффект разрушающегося текста при помощи Stipplism В сегодняшнем уроке мы создадим эффект разрушающегося
Java XML J ava Development Kit поставляется с двумя парсерами XML: DOM и SAX,
Поисковые системы интернета – Полный список всех поисковых систем Чтобы увеличить посещаемость вашего сайта,
|
