[ главная ]   [ рейтинг статей ]   [ справочник радиолюбителя ]   [ новости мира ИТ ]



Ответов: 0
25-02-12 07:01







   Web - программирование
PHP


ASP






XML



CSS

SSI





   Программирование под ОС











   Web - технологии








   Базы Данных









   Графика






Данные




Web - программирование / CSS /

Изменение стиля полос прокрутки браузера Internet Explorer

Изменение цвета и внешнего вида полос прокрутки (scroll bar) окна браузера последнее время стало очень популярной <фишкой> Web-дизайнеров. Однако, вопрос о том, как это можно сделать по прежнему часто встречается в различных чатах и конференциях. Эта небольшая статья призвана внести полную ясность в этот, по сути, несложный, но актуальный вопрос...

Иногда, попадая на какой-то сайт, цвет полос прокрутки браузера меняется. Правда происходит это только в том случае, если ваш браузер Internet Explorer версии не ниже 5.5. Создают такой эффект при помощи таблиц каскадных стилей (CSS, Cascading Style Sheets).

На сегодняшний день существуют восемь атрибутов, которыми можно задавать различные параметры полос прокрутки (см. Рисунок 1):


Рисунок 1. Соответствие параметров элементам прокрутки
  • scrollbar-3d-light-color - цвет контуров трехмерности;
  • scrollbar-arrow-color - цвет стрелочек;
  • scrollbar-base-color - базовый цвет (общий фон);
  • scrollbar-dark-shadow-color - цвет внешней тени;
  • scrollbar-face-color - цвет ползунков;
  • scrollbar-highlight-color - цвет контуров подсветки;
  • scrollbar-shadow-color - цвет внутренней тени;
  • scrollbar-track-color - цвет полос.

Чтобы изменить цвет прокрутки, поместите данные параметры в тэг <BODY>, а в качестве значений присвойте шестнадцатеричный RGB код цвета или его название на английском языке, например -

<body style="scrollbar-3d-light-color: blue;
                scrollbar-arrow-color: blue;
                scrollbar-base-color: red;
                scrollbar-dark-shadow-color: white;
                scrollbar-face-color: lightgreen;
                scrollbar-highlight-color: red;
                scrollbar-shadow-color: red;
                scrollbar-track-color: green;">

Не обязательно использовать одновременно все атрибуты, иногда достаточно только одного scrollbar-base-color.

Если немного "проиграться" с этими параметрами, то можно добиться очень интересных эффектов с прокруткой. Один из таких эффектов наглядно продемонстрирован на рисунке 2.


Рисунок 2. Пример измененных полос прокрутки



Комментарии

 Ваш комментарий к данному материалу будет интересен нам и нашим читателям!



Последние статьи: Web - программирование / CSS /

Font-size от xx-small до xx-large
05-01-2010   

Проблема размера шрифтов всегда волнует веб-разработчиков. В CSS есть семь ключевых слов для обозначения размера шрифта. Они введены для того, чтобы дизайнеры особо не напрягались над проблемами доступности текстов на страницах. Размер варьируется от xx-small до xx-large и этот размер берется относительно установленного пользователем в браузере размера medium. Вот что мы видим в спецификации CSS-1... подробнее

Кол. просмотров: общее - 3393 сегодня - 3

История про CSS (часть II)
05-01-2010   

Продолжаем разговор о применении таблиц стилей. Сначала разберемся с каскадностью стилей, а потом перейдем к рассмотрению синтаксиса и обзору наиболее часто встречающихся параметров, применяемых при создании стилей... подробнее

Кол. просмотров: общее - 3389 сегодня - 3

Трюк с курсором
05-01-2010   

Наверно вы уже заметили, что на некоторых сайтах при наведении на ссылки появляется... совсем не рука, которая многим уже надоела, а какая-нибудь там стрелка, часы и т.п. Как это сделать? Очень просто! Надо всего лишь добавить стиль курсора в код ссылки. Пример кода... подробнее

Кол. просмотров: общее - 3254 сегодня - 0

Необычное применение CSS: реализация эффекта rollover c помощью CSS
05-01-2010   

Эрик Мейер нашел очень интересное использование псевдо-класса :hover. Оказывается, с помощью свойства display, контекстного селектора и :hover можно реализовать эффект rollover, когда при наведении мышкой появляется картинка. Делается это следующим образом... подробнее

Кол. просмотров: общее - 3258 сегодня - 0

Сокращенные команды в CSS
05-01-2010   

Одно из основных преимуществ использования CSS - это значительное уменьшение времени загрузки страниц. Для того, чтобы назначить стиль тексту, нужно было раньше использовать конструкцию множество раз... подробнее

Кол. просмотров: общее - 4015 сегодня - 1



  WWW.COMPROG.RU - 2009-2012 | Designed and Powered by Zaipov Renat | Projects