Хаки и Скрипты Next Generation CMS

Меняем стандартный скролбар

irbees2008 irbees2008 Опубликовано - 13 - сентября CSS
2650 - 0
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки

Сегодня обратил внимание ,что у меня не стандартный скролбар. Ну я и заинтересовался как его изменить под дизайн сайта. Как видите у меня уже скролбар измененый, обычно он квадратный это вы видите постоянно на других сайтах.
scrollbar-windows.png (159.27 Kb)
Но сейчас можно изменить самим вид скролбара добавив несколько строк стилей.
И так открываем файл стилей вашего шаблона и добавляем вот эти стили

Код:
/*скрол бар*/
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
/*скрол бар*/

или так покрасив бегунок в красный
Код:
/* Let's get this party started */
::-webkit-scrollbar {
width: 12px;
}

/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0,0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
}

Вот и все пользуемся,настройки простые, если что задавайте вопросы.

Можешь почитать и вот эту статейку "Выпадающее меню на CSS"

Опрос

Ваше мнение

какой форум лучше для вас
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 3323 дня
  • Новостей: 542
  • Комменты: 254
  • Зарегистрированно : 570
  • Онлайн всего: [12]
  • Гости: [11]
  • Поисковики: [1] Яндекс
  • Были сегодня : [3] Яндекс, Google, irbees2008
  • SQL запросов: 20
  • Генерация страницы: 0.09сек
  • Потребление памяти: 4.895 Mb 
  •   яндекс.ћетрика