Стилизация скроллбара на CSS | Scrollbar CSS

Автор Denis Lisitsin
Стилизация скроллбара на CSS | Scrollbar CSS

Всем привет.

Вы на канале. Бронислав с вами. Дмитрий валак и в этом небольшое видео о своём говорим о том как можно стилизовать скроллбар при помощи CSS.

Начнем с того, что поддержка пока, что не очень.

Широкая данных поддерживает хорошо хром в сафари и опера сожалению Firefox Edge и наш любимый и я не поддерживает данное свойство поэтому стилизация скроллбара не будет показываться будут показывать стандартные scrollbar браузера. Но если вы хотите порадовать своих пользователей которые пользуются хромом оперы либо. Сафари то вы можете. Зайти ли давать другим грузом стандартный стол бар на сайте. Давайте с. Вами рассмотрим пример у меня есть проект котором просто есть контейнер для этого контейнера я прописал просто высоту 1200 чтобы мы могли увидеть с вами столба сейчас мы видим столб обычной браузера то есть обычный столбах который умолчанию. Давайте мы его за стилизуем и первым делом мы с вами пропишем свойства которые называются scrollbar оно пишется с префиксом вот поэтому пишем следующим образом поставим 2 пишем префикс webkit и пишем scrollbar и здесь мы задаем ширину нашего скроллбара например 15 пикселей. Так мы видим сейчас у нас callbar стандартный. И сейчас нам нужно задать новую сигнализацию для скроллбара и того чтобы задать цвет например для нашей нашего скроллбара давайте мы с вами. Напиши новое свойство которое называется scrollbar Track тоже пишется с префиксом Bobcat пиши Market и пишем scrollbar трек здесь мы используем уже сам стал бар сначала наш ползунок будет двигаться например мы с вами хотим задать ему баграм какого-нибудь например вот по умолчанию чёрный мы видим появляется стилизация нашего трека так называемого по которому будет двигаться сам ползунок давайте мы поменяем свет на какой-нибудь серый мы видим у. Насти отменяется например выберем такое. А дальше мы должны. С вами за стилизовать ползунок стерилизуются он при помощи свойства scrollbar thumb и пишется тоже с префиксом Bobcat. Пишем воткит пишем scrollbar thumb и например. Мы хотим задать ему background например чёрный и мы видим у нас появляется ползунок и он черного цвета какие свойства ещё мы можем для стилизации например. Мы хотим закруглить края для нашего ползунка лет он прописан с вами border-radius и например с дадим ему 8 пикселей border-radius мы видим у нас края у нас ползунка закрепляются отлично, а также мы можем например задать Border, что небольшой границу для нашего ползунка и например мы её отдадим таким же цветом как у нас сам трек. Давайте посмотрим и мы получаем сами такое эффект, что у нас ползунок находится внутри нашего scrollbar трека. Давайте поменяем свет скроллбара точнее цвет нашего ползунка она тоже серый какой-нибудь, но чуть потемнее чем сам трек сделаем что-нибудь такое. О'кей также мы можем задать например box-shadow внутренний для нашего трека чтобы сделать такой эффект тени в нашем например мы напишем 002 пикселя и сделаем такое светлое чёрный мы видим у нас появляется небольшая тень внутри. сейчас мы не видим давайте мы и теперь мы видим небольшой если мы сделаем чуть меньше прозрачности для чтения нормы. Какая чёрная полоска внутри нашего скроллбара давайте мы сделаем например 0,2 и оставим так. А мы можем в принципе здесь поменять цвет на чёрно-красный чтобы сделать как-то необычно либо там на какую-нибудь синий так далее. Также мы можем применять здесь. Градиент мы можем прописать. Градиент линер. Градиент для самого ползунка и слева сверху вниз субботам и прописать например с. Красного до зеленого опять же мы видим у нас применяется. Градиент для нашего ползунка, но в принципе основной по данным свойствам также мы можем менять цвет нашего ползунка при наводе например. Мы хотим его. Например у нас будет он тёмно-серый. Мы хотим его сделать при наводе ещё темнее для этого мы с копиром с вами данные селектор и пропишу в конце всех Hover например. Мы хотим поменять цвет фона на еще более тёмный например такой и теперь если мы наведем на данный полноту. Видимо нас цвет ползунка меняется также стилизация ползунка. Вы можете использовать не только для всего документа. А например для каких-то контейнеров. Если у вас есть какой-то Blocks ограничены высотой. Вы можете для него применить данные свойства у вас scrollbar в этом блоке будет тоже стилизованной то здесь вот просто указывает например название какого-нибудь контейнера и пишите стилизацию именно для него для этого блока поскольку мы с вами применяем стилизация скроллбара для всего документа мы можем оставить с вами так либо также есть варианты пример переписок для тега Body мы получим с вами тоже самое картину которую только, что с вами видели у нас ничего не изменится у нас scrollbar стилизованный. Но для всего документа. Вы можете вообще. Просто оставить вот так вот такую запись. Ну вот в принципе всё таким образом вы можете стилизовать скроллбар на вашем сайте. Но как я уже говорил поддержка пока, что не очень обширная. Только для. Хрома в сафари и Firefox пока, что если мы откроем данные на мою страницу на фаерфоксе увидел с вами стандартный Firefox scrollbar и то же самое с интернет. Эксплорер и Angel на этом всё спасибо всем за внимание. Если вам понравилось видео. Не забудьте поставить лайк и подписаться на канал всем хорошего настроения и по.

0 комментариев
0

Читайте также