Стильная полоса прокрутки в Adobe Muse
Обычная полоса прокрутки на сайте при просмотре в браузере имеет серый и невзрачный вид.
⭐Как изменить дизайн полосы прокрутки, как подстроить его под общий дизайн страницы? Как изменить стиль скроллбара в Adobe Muse? В этом видеоуроке мы легко и просто изменим дизайн полосы прокрутки на сайте в программе Adobe Muse c помощью всего лишь одного CSS кода и небольших доработок с графикой. Немного зная и понимая код CSS, мы также сможем менять размеры и цвет полосы прокрутки, ползунка скроллбара и другие параметры.
⭐Смотрите этот видеоурок:
Код стиля полосы прокрутки из видеоурока:
<style>
::-webkit-scrollbar-button {
background-image:url('');
background-repeat:no-repeat;
width:6px;
height:0px
}
::-webkit-scrollbar-track {
background-color:#32312e;
box-shadow:0px 0px 3px #000 inset;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 5px;
border-radius: 5px;
background-color:#ffcb17;
box-shadow:0px 1px 1px #fff inset;
background-image:url('assets/59610063.png');
background-position:center;
background-repeat:no-repeat;
}
::-webkit-resizer{
background-image:url('');
background-repeat:no-repeat;
width:7px;
height:0px
}
::-webkit-scrollbar{
width: 11px;
}
</style>
Скопируйте данный код и вставьте в свойства страницы в разделе Метаданные – “HTML для <head>”.
Файл проекта muse из урока, код, и файл картинки – можно скачать архивом по этой ссылке:
Пробуйте, делайте, пишите комментарии к этой статье на сайте, и на канале youtube.
Стильная полоса прокрутки.
В сегодняшнем видеоуроке мы рассмотрим, как сменить дизайн ползунка прокрутки на сайте в программе Adobe Muse. Вы глядеть это будет вот так. У вас появится свой уникальный ползунок прокрутки и у него будет свой уникальный дизайн.
Давайте посмотрим, как это сделать в программе Adobe Muse. Я уже подготовил проект, как вы уже догадались. И использовать мы будем все тот самый способ вставки кода стилей в свойства страницы в программе Adobe Muse. Будет еще кое-какой нюанс, о котором я расскажу чуть позже.
Порывшись в интернете, я нашел код стиля ползунка для сайтов html. Код этот выглядит вот так:
<style>
::-webkit-scrollbar-button {
background-image:url('');
background-repeat:no-repeat;
width:6px;
height:0px
}
::-webkit-scrollbar-track {
background-color:#32312e;
box-shadow:0px 0px 3px #000 inset;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 5px;
border-radius: 5px;
background-color:#ffcb17;
box-shadow:0px 1px 1px #fff inset;
background-image:url('assets/59610063.png');
background-position:center;
background-repeat:no-repeat;
}
::-webkit-resizer{
background-image:url('');
background-repeat:no-repeat;
width:7px;
height:0px
}
::-webkit-scrollbar{
width: 11px;
}
</style>Здесь очень много всяких надписей для кого-то понятных и для кого-то не понятных. К ним мы вернемся чуть позже. Я немножко расскажу об этом.
Стильная полоса прокрутки. Добавление стиля полосы в код сайта.
Все, что нам нужно сделать, так это скопировать данный код и вставить его в свойства страницы в программе Adobe Muse. Как вы видите – это код стиля, он заключен в теги <style></style> – один тег вверху и закрывающий тег внизу. Нажимаем «ОК». Если мы сейчас просмотрим наш сайт в браузере, я нажимаю “ctrl+shift+E”, то вы увидите, что ползунок у нас уже появился, и, в принципе, все прокручивается. Единственный здесь нюанс то, что этот ползунок весь гладкий, на нем нет никаких насечек, никаких дополнительных опознавательных знаков. В предыдущем случае вы видите есть три полосочки.
Стильная полоса прокрутки. Добавление графики.
Как же их сделать? В этом CSS-коде, который мы разместили только что в свойствах страницы, есть такой параметр как background-image:url. И здесь я уже прописал: assets и имя файла картинки, которая будет добавлена на этот ползунок. Но поскольку у меня данная картинка еще не добавлена в Muse, то при просмотре мы не видим этих насечек. Я нажимаю здесь «ОК». Все, что мы должны для этого сделать – это добавить файл для передачи. У меня есть вот такой небольшой файлик – это файлик png. И на нем три такие маленькие полосочки – очень маленький файл. Я выбираю этот файл и нажимаю «Открыть». Данный файл добавился в Muse для передачи. Это мы можем увидеть в разделе «Ресурсы». Этот файлик добавился и написано «Передать». Все файлы для передачи у нас хранятся в папке «assets», поэтому в коде CSS, вставленный в свойства страницы, я прописал путь assets/ и имя файла. Теперь при просмотре нашей страницы в браузере, мы увидим, что у нас появились вот такие на ползунке.
Стильная полоса прокрутки. Редактирование кода стиля.
Вот таким нехитрым способом мы можем добавить свой уникальный ползунок на сайт в программе Adobe Muse. Давайте мы вернемся к нашему коду и посмотрим на него. Как вы видите, здесь есть различные значения ширины, высоты. Различные значения цветов, которые вы можете менять. Параметры самого ползунка – например, вот здесь написан радиус скругления ползунка. Также вы можете менять цвет, тень и вот та надпись, где мы вставляли путь к нашему изображению для размещения на ползунке засечек. Также мы можем менять ширину нашей полосы. Сейчас она у нас узенькая. Можем менять ее ширину. И ширину скроллбара. Можете экспериментировать с этими значениями, смотреть что получится. В принципе, это делать не обязательно в блокноте, а можно делать прямо в программе Adobe Muse.
Стильная полоса прокрутки. Пример изменения стиля.
Например, если мы сейчас зайдем в программу Adobe Muse, зайдем в «Свойства страницы», здесь у нас точно такой же код. И поставим, например, ширину скроллбара «100 px». Посмотрим, что произойдет. Нажимаем ctrl+shift+E и видим, что ширина скроллбара стала толстым, квадратным, на него легко попасть, курсором мыши можно двигать его сколько угодно. Естественно, это не удобно, это крадет место на сайте, но, тем не менее, вы можете редактировать параметры данного скроллбара.
Точно также вы можете поменять в свойствах страницы любой цвет. Например, я поменяю цвет трека скроллбара, сделаю, например, белым. Белый цвет – это #FFFFFF. Теперь еще раз просмотрим, что у нас получилось. Теперь полоска скроллбара стала белым цветом, т. е. раньше она была темной, а теперь она стала белой.
На этом все. Я заканчиваю данный урок. Повторяйте, делайте и у вас все получится. Ставьте лайк к данному видео, пишите комментарии внизу, смотрите мои видеоуроки на канале, оставайтесь на связи. Всем пока!
Автор видеоуроков и курсов
Дмитрий Шаповалов