Как изменить внешний вид полосы прокрутки используя CSS

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

Если хотите такое применить у себя, скопируйте код приведённый ниже.

/* Scrollbar CSS */
::-webkit-scrollbar {
width: 8px; height:8px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.3);
background:#fff;
}
::-webkit-scrollbar-thumb {
background: rgba(103,126,82, 0.8 );
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(186,35,35,0.4);


Теперь идём во вкладку шаблон - изменить HTML. Находим строку ]]></b:skin> и сразу над ней устанавливаем этот код. Для начинающих блогеров, вот статья , как просто это сделать. После установки не забываем сохранить шаблон.

Цвета заданы в формате rgba. Пока трудно в этом разобраться - вот даю вам ссылку ( не кликабельная, копируйте в строку браузера). http://www.stm.dp.ua/web-design/color-html.php

Должна оговориться, что это поддерживают браузеры Mozilla Firefox, Google Chrome, IE9.

Спасибо вам за внимание. Спасибо новым подписчикам и до новых встреч.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


4 комментария:

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

    ОтветитьУдалить
    Ответы
    1. Наташа, мне кажется, что возможности CSS на этом не остановятся. Удивительная штука.

      Удалить
  2. Спасибо! Постараюсь сделать. В последнее время blogspot не во всех блогах сохраняет гаджеты, изменения в шаблонах. Вика, ваш блог стал более стильным, комфортным, информационным. С удовольствием жду ваших новых шпаргалок.

    ОтветитьУдалить
    Ответы
    1. Татьяна, спасибо за отзыв. А с Блоггером да, происходит постоянно что-нибудь. Гаджеты летят, картинки пропадают. С переходом на HTPPS вообще глюков полно. Коды которые публиковали раньше уже некоторые и не актуальны. Ни что на месте не стоит. Что-нибудь ещё придумают.

      Удалить

Пользовательский поиск