Привет, друзья. Что такое полоса прокрутки знает каждый пользователь интернета. На правой стороне каждого браузера она прокручивает страницу вверх и вниз, и справа налево. Есть возможность изменить ширину и цвет скроллинга. Сделать его более уникальным. Пример вы можете видеть на моём блоге.
Если хотите такое применить у себя, скопируйте код приведённый ниже.
Теперь идём во вкладку шаблон - изменить HTML. Находим строку ]]></b:skin> и сразу над ней устанавливаем этот код. Для начинающих блогеров, вот статья , как просто это сделать. После установки не забываем сохранить шаблон.
Цвета заданы в формате rgba. Пока трудно в этом разобраться - вот даю вам ссылку ( не кликабельная, копируйте в строку браузера). http://www.stm.dp.ua/web-design/color-html.php
Должна оговориться, что это поддерживают браузеры Mozilla Firefox, Google Chrome, IE9.
Спасибо вам за внимание. Спасибо новым подписчикам и до новых встреч.
Если хотите такое применить у себя, скопируйте код приведённый ниже.
/* Scrollbar CSS */
::-webkit-scrollbar {
width: 8px; height:8px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.3);
background:#fff;
}
::-webkit-scrollbar-thumb {
background: rgba(103,126,82, 0.8 );
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(186,35,35,0.4);}
::-webkit-scrollbar {
width: 8px; height:8px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.3);
background:#fff;
}
::-webkit-scrollbar-thumb {
background: rgba(103,126,82, 0.8 );
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(186,35,35,0.4);}
Теперь идём во вкладку шаблон - изменить HTML. Находим строку ]]></b:skin> и сразу над ней устанавливаем этот код. Для начинающих блогеров, вот статья , как просто это сделать. После установки не забываем сохранить шаблон.
Цвета заданы в формате rgba. Пока трудно в этом разобраться - вот даю вам ссылку ( не кликабельная, копируйте в строку браузера). http://www.stm.dp.ua/web-design/color-html.php
Должна оговориться, что это поддерживают браузеры Mozilla Firefox, Google Chrome, IE9.
Спасибо вам за внимание. Спасибо новым подписчикам и до новых встреч.
здесь можно оформить подписку на новые шпаргалки
Никогда бы не подумала, что на эту штуковину можно как-то влиять, изменять.. Надо же, как интересно. Вика, не перестаю удивляться твоим умениям.
ОтветитьУдалитьНаташа, мне кажется, что возможности CSS на этом не остановятся. Удивительная штука.
УдалитьСпасибо! Постараюсь сделать. В последнее время blogspot не во всех блогах сохраняет гаджеты, изменения в шаблонах. Вика, ваш блог стал более стильным, комфортным, информационным. С удовольствием жду ваших новых шпаргалок.
ОтветитьУдалитьТатьяна, спасибо за отзыв. А с Блоггером да, происходит постоянно что-нибудь. Гаджеты летят, картинки пропадают. С переходом на HTPPS вообще глюков полно. Коды которые публиковали раньше уже некоторые и не актуальны. Ни что на месте не стоит. Что-нибудь ещё придумают.
УдалитьУ вас в конце кода } не стоит, это глюки может вызывать. Вот пример, как правильно:
ОтветитьУдалить/* стиль скроллбара, палка со звездой обозначают комментарий, внутри коммента браузер код не видит и не выполняет */
::-webkit-scrollbar { /* длина-ширина */
width: 14px; height:8px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 4px #0f3439; /* цвет тени полоски */
background:#366f77; /* цвет полоски */
}
::-webkit-scrollbar-thumb {
background: #0f3439; /* цвет слайдера */
-webkit-box-shadow: inset 0 0 6px #416d74; /* цвет тени слайдера */
border-radius: 5px; /* скруглить слайдер, можно не только в пикселях, но и 5% разный будет эффект */
}
Да. Забыла закрыть. Спасибо.
Удалить