« Делаем свою полосу прокрутки (ScrollBar) для своего сайта »

Описание материала:

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

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

Сегодня мы делимся дизайном CSS Scrollbar. Другими словами, измените или настройте полосу прокрутки на веб-сайте. После просмотра этого поста вы сможете создать собственную полосу прокрутки для своей веб-страницы, вы можете скопировать и вставить данные коды. Это очень легко сделать, даже новичок также может установить к себе на сайт, это очень легко. И так, вроде все рассказал, теперь перейдем к установке.

Установка:

У нас есть три кода которые отвечают - за ширину, за цвет и тень и за фон прокрутки. В CSS коде которые мы предоставим чуть ниже, все это будет указано

CSS код:

Код

/* Полоса прокрутки (ScrollBar) */
::-webkit-scrollbar {
  width: 15px; /* ширина скроллбара */
}

::-webkit-scrollbar-thumb {
  border-radius: 30px;
  background: -webkit-gradient(
  linear,
  left top,
  left bottom,
  from(#f3be81),
  to(#d27000)
  ); /* цвет скроллбара */
  box-shadow: inset 2px 2px 2px rgba(255, 255, 255, 0.25),
  inset -2px -2px 2px rgba(0, 0, 0, 0.25); /* тень скроллбара */
}

::-webkit-scrollbar-track {
  background-color: #000; /* фон скроллбара */
}
/* uFive.Ru */

Демонстрация

Демонстративная страница или сайт материала

Установка материала

Мы поможем установить данный материал к Вам на сайт

Добавил: YaVi | Категория: Блог | Просмотров: 455

Теги к материалу: полоса, ScrollBar, полоса прокрутки, Website, css

Поделиться в соц. сетях:

К данному материалу нет комментариев, но Вы можете стать первым, оставив свой комментарий!

Комментариев: 0