Красивая полоса прокрутки сайта на CSS

Стандартные полосы прокрутки (Scrollbar) на сайтах это скучно. Не так ли? Нет это совсем не так :), они (стандартные полосы прокрутки) не “мазолят” глаза, да и безобразного в них ничего нет. Но иногда под стиль сайта имеет смысл изменить стандартный Scrollbar. Не каждому сайту подойдет, так что не стоит этим злоупотреблять. Но все же знать как это делается я думаю нужно.

Для начала немного теории, расскажу и покажу какие селекторы и свойства отвечают за полосу прокрутки, а потом перейдем к практике.

scrollbar-face-color:

Определяет основной цвет ползунка и кнопок полосы прокрутки.

scrollbar-highlight-color:

Определяет внешний (левые и верхние грани) цвет ползунка и кнопок полосы прокрутки.

scrollbar-shadow-color:

Определяет правый и нижний цвет части бегунка и кнопок полосы прокрутки.

scrollbar-darkshadow-color:

Определяет цвет внешних правой и нижней граней ползунка и кнопок полосы прокрутки.

scrollbar-3dlight-color:

Определяет левый и верхний цвет части бегунка и кнопок полосы прокрутки.

scrollbar-arrow-color:

Определяет цвет стрелочек на кнопках полосы прокрутки.

scrollbar-track-color:

Определяет цвет фона под ползунком.

А теперь покажу на рисунке, чтобы стало понятно все выше написанное:

Ну и наконец пример CSS кода с применением всего выше описанного:

html, body {
	scrollbar-face-color: #C84747;
	scrollbar-highlight-color: #60EA36;
	scrollbar-shadow-color: #4A56ED;
	scrollbar-darkshadow-color: #000000;
	scrollbar-3dlight-color: #DB36EA;
	scrollbar-arrow-color: #FFFFFF;
	scrollbar-track-color: #D6D6D6;
}

Экспериментируйте с цветами и будет вам счастье :).

Просмотров: 3125 Опубликовал: Евгений Фединчик Дата: 06.06.2010 16:59:58

Понравился урок? Добавьте его к себе в закладки.

Последние уроки категории:

Css техники для новичков

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

Создание объемной ленты с помощью CSS3

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

Меню в стиле Mac на CSS3

Сегодня мы предлагаем вам простой способ создать выпадающее меню в стиле Mac, используя самые известные ныне свойства CSS3: border-radius, box shadow и text-shadow.

Создаем кнопку с помошью CSS3

Существует огромное количество уроков по созданию красивых кнопок с помощью CSS. Как правило, вам сначала непременно надо изобразить ее в Photoshop, затем заверстать, используя изображение и какую-нибудь незамысловатую технику и, чтобы все стало совершенно неотразимым, добавить немного Javascript. Но теперь у нас есть CSS3, который на сегодняшний день поддерживается большинством браузеров и позволяет намного усовершенствовать и упростить данный процесс.