Красивая полоса прокрутки сайта
Надоели серые и унылые ползунки? Не беда! Их можно раскрасить по своему усмотрению. Немного смекалки, немного возни с подбором цветовой гаммы и мы получаем приятные ползунки за которые приятно хвататься курсором мыши. Для этого мы будем использовать небольшой css код. Но сразу хочу оговориться, что не все браузеры на сегоднящний день поддерживают такую функциональность. Так что необходимо сразу понимать, что некоторые пользователи к сожалению не смогут увидеть вашу красоту.
Рассмотрим основные теги, применимые к элементам интерфейса, имеющим ползунки. Напомню, что стиль мы можем установить как в самом HTML-файле между тегами head в блоке стиля
<head>
<style>
body { scrollbar-face-color:#232323;
scrollbar-highlight-color: #fafafa;
scrollbar-track-color: #e3e3e3; }
</style>
</head>
либо непосредственно в файле стилей css, подключенному к html или php файлу с кодом. Далее разберем какой параметр стиля отвечает за раскраску какой части элемента прокрутки:
scrollbar-highlight-color Определяет основной цвет ползунка и кнопок полосы<br>прокрутки. Цвет подсветки, создающий эффект объёмности,<br>окаймляет освещённую часть кнопки.
scrollbar-base-color Определяет цвет основных элементов ползунка, если не<br>определены параметры в scrollbar-face-color
scrollbar-shadow-color Определяет верхние грани, цвет ползунка и кнопок<br>полосы прокрутки.
scrollbar-darkshadow-color Определяет цвет тени для ползунка и кнопок со<br>стрелками.
scrollbar-3dlight-color Определяет цвет внешних правой и нижней граней<br>ползунка и кнопок полосы прокрутки.
scrollbar-arrow-color Определяет левый и верхний цвет части ползунка и<br>кнопок полосы прокрутки.
scrollbar-track-color Цвет стрелок на кнопках полосы прокрутки.
Если Вы затрудняетесь в выборе цветовой палитры и не можете правильно угадать значение цвета в шестнадцатиричном формате - воспользуйтесь программой, которая переводит цвет в этот формат. Таких программ в сети огромное количество.
Вот и вся магия! Спасибо за внимание!
Рекомендуем почитать
