Создать красивые полосы прокрутки на CSS
 | |
| В этом материале представлены стили CSS3, которые кардинально меняют по своему дизайну полосу прокрутки для сайтов, где делают ее оригинальной. Где нам только нужно прописать стили по месту, что получаем готовую полосу прокрутки в своем уникальном виде. А значит вы самостоятельно можете внести изменение, как по самому дизайну, включая оттенок цвета и все сопутствующее в полном изменение по своему обзору. Где вместо скучной прокрутки на браузере, которая идет по умолчанию, вы вероятно заметили, что на некоторых веб ресурсах присутствует красиво оформленная полоса в оригинальном дизайне по оттенку цвета. Это визуально настраиваемая полоса прокрутки, которая улучшает общий вид веб-сайта. Здесь вы узнаете, как настроить полосы прокрутки с помощью CSS, где сделаете свой веб-сайт выделяющимся из массы. Примечание: Полоса прокрутки, настроенная с помощью CSS, работает только в браузерах на основе Webkit, таких как Chrome, Safari и Opera. Существует три способа создания пользовательских полос прокрутки: - настройка полос прокрутки с помощью CSS; - установка плагина пользовательской полосы прокрутки; - добавив Javascipt или jQuerry скрипт на ваш сайт; Итак, почему вы должны настроить полосу прокрутки вашего сайта с помощью CSS вместо использования плагина или сценария Javascipt или jQuerry? 1. Самым простым решением для создания настраиваемой полосы прокрутки является установка настраиваемого плагина для изменения . С помощью плагина полоса прокрутки легко настраивается путем настройки нескольких параметров на экране настроек плагина. Нет необходимости в каких-либо знаниях кодирования в этом случае. Пользовательская полоса прокрутки будет хорошо работать во всех настольных и мобильных браузерах. Недостатком этого метода является то, что плагины незначительно влияют на скорость загрузки сайта. В настоящее время скорость загрузки имеет большое значение для некоторых владельцев веб-сайтов, а также многие разработчики стараются избегать использования большого количества плагинов. 2. Пользовательская полоса прокрутки Javascipt или jQuerry-скрипты обычно хорошо работают во всех браузерах и устройствах. Однако этот метод настройки полос прокрутки требует некоторого опыта кодирования, а также может немного повлиять на скорость загрузки 3. Пользовательский CSS-код полосы прокрутки довольно прост, где его реализация требует только базовых знаний CSS. С помощью всего лишь десятка строк кода CSS этот метод настройки полос прокрутки не влияет на скорость загрузки сайта. С другой стороны, недостатком этого метода является то, что его поддерживают только браузеры на основе Webkit . Поскольку в настоящее время большинство браузеров основано на Webkit, это Chrome, Opera, Safari и так далее, где имеет смысл использовать этот метод для настройки полос прокрутки и сэкономить пару миллисекунд времени загрузки. Базовый пример CSS кода для данной прокрутки Существует два основных псевдоэлемента CSS для настройки полосы прокрутки: ::-webkit-scrollbar - контейнер полосы прокрутки; ::-webkit-scrollbar-thumb - перетаскиваемая ручка, что используется для прокрутки; В этом базовом примере сначала мы отрегулируем ширину контейнера полосы прокрутки и изменим его цвет. Во-вторых, мы изменим цвет ручки прокрутки и закруглим ее концы. Просто достаточно, чтобы отличить нашу полосу прокрутки от стандартной.  Вот CSS для копирования внутри вашей таблицы стилей, для измените его по желанию: Код ::-webkit-scrollbar { width: 15px; background: #f5b1bd; } ::-webkit-scrollbar-thumb { background: #7b087b; border-radius: 15px; } На этом установка завершена: Продвинутый пример CSS кода пользовательской полосы прокрутки: В заданном варианте CSS-кода пользовательской полосы, то здесь она станет более изящными. Чтобы еще больше настроить оформление полосы, мы представим еще несколько псевдоэлементов CSS: ::-webkit-scrollbar-track - активная область контейнера полосы прокрутки; ::-webkit-scrollbar-button - нажимаемые кнопки на обоих концах контейнера полосы прокрутки; Как и в предыдущем примере, сначала мы установим цвет и ширину контейнера полосы прокрутки, используя псевдоэлемент ::-webkit-scrollbar. Мы также будем стилизовать маркер прокрутки, используя псевдоэлемент ::-webkit-scrollbar-thumb. На этот раз мы кардинально улучшим его внешний вид при помощи некоторой коробки. Во-вторых, используя псевдоэлемент ::-webkit-scrollbar-track в этом примере мы определим внешний вид активной области прокрутки. Мы добавим здесь вертикальное поле (необязательно), чтобы освободить место между индикатором выполнения и концом контейнера полосы прокрутки. Наконец мы добавим кликабельные кнопки вверху и внизу полосы прокрутки, где задействуем псевдоэлемент ::-webkit-scrollbar-button. Чтобы сделать его визуально отличным от кнопок по умолчанию, где сделали их круглыми, используя свойство border-radius. Мы сделали полосу прокрутки более интерактивной с эффектами наведения на перетаскиваемой ручке и нажимаемыми кнопками направления. Где также можно попробовать различные эффекты наведения на все псевдоэлементы полосы прокрутки, чтобы настроить его под свой дизайн сайта. Это расширенный пример кода CSS, где можете самостоятельно изменить его свойства настройки по своему желанию:  Как пример изменения: Код ::-webkit-scrollbar { width: 15px; background: #8a20bf; } ::-webkit-scrollbar-track { box-shadow: inset 0 0 10px #7b7777; border-radius: 15px; background: #dc9aa6; margin: 5px 0; } ::-webkit-scrollbar-thumb { background: #710671; border-radius: 15px; box-shadow: inset 0 0 5px #151414; } ::-webkit-scrollbar-thumb:hover { box-shadow: inset 0 0 10px #151414; } ::-webkit-scrollbar-button { background: #f9f2f2; box-shadow: inset 0 0 5px #d8a2ac; border-radius: 15px; border: 3px solid #962bcc; } ::-webkit-scrollbar-button:hover { box-shadow: inset 0 0 3px #8a078a; background: pink;} Установочный процесс завершен. Подробнее о том, как можно оригинально выстроить дизайн PS - Чтобы узнать больше про основу прокрутки, то вам пригодиться для изучения страница полосы прокрутки W3S является хорошим местом для начала изучения. Где вероятно после прочтение этого мануала, вам будет понятен цикл по кардинальной изменение стилистики для прокрутки страниц. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |