Изменение внешнего вида полоски скроллингапояснение:
стандартный вывод такого скроллинга будет такой
Сравнительно редко
на аниме-небосклоне
появляются произведения,
которые, так или иначе,
пропагандируют что-либо.
"Женская эскадрилья чистого неба"
как раз то самое сравнительно редкое аниме,
в основу которого заложена небольшая,
можно даже сказать крошечная,
но все-таки пропаганда,
стремление показать молодежи
бравых японских летчиков и летчиц.
после небольшой модернизации внешний вид скроллинга будет такой:
Сравнительно редко
на аниме-небосклоне
появляются произведения,
которые, так или иначе,
пропагандируют что-либо.
"Женская эскадрилья чистого неба"
как раз то самое сравнительно редкое аниме,
в основу которого заложена небольшая,
можно даже сказать крошечная,
но все-таки пропаганда,
стремление показать молодежи
бравых японских летчиков и летчиц.
Временами хочется "украсить" сайт и вот я наткнулся на эту переделку... :-D
может кому тоже пригодиться...
код такого вида, как здесь получился:
Код: Выделить всё
<style>
.modern::-webkit-scrollbar-button {background-image:url('');background-repeat:no-repeat;width:5px;height:0px}
.modern::-webkit-scrollbar-track {background-color:#F0FFFF}
.modern::-webkit-scrollbar-thumb {-webkit-border-radius: 5px;border-radius: 5px;background-color:#6dc0c8;}
.modern::-webkit-scrollbar-thumb:hover{background-color:#56999f;}
.modern::-webkit-resizer{background-image:url('');background-repeat:no-repeat;width:4px;height:0px}
.modern::-webkit-scrollbar{width: 6px;}
</style>
<div style="width:200px;height:100px;overflow-y:scroll;margin-left:100px;" class="modern">
Сравнительно редко<br>
на аниме-небосклоне<br>
появляются произведения,<br>
которые, так или иначе,<br>
пропагандируют что-либо. <br>
"Женская эскадрилья чистого неба"<br>
как раз то самое сравнительно редкое аниме, <br>
в основу которого заложена небольшая, <br>
можно даже сказать крошечная,<br>
но все-таки пропаганда, <br>
стремление показать молодежи<br>
бравых японских летчиков и летчиц.<br>
</div>
то есть к тексту просто добавляется внешняя обработка
Код: Выделить всё
<style>
.modern::-webkit-scrollbar-button {background-image:url('');background-repeat:no-repeat;width:5px;height:0px}
.modern::-webkit-scrollbar-track {background-color:#F0FFFF}
.modern::-webkit-scrollbar-thumb {-webkit-border-radius: 5px;border-radius: 5px;background-color:#6dc0c8;}
.modern::-webkit-scrollbar-thumb:hover{background-color:#56999f;}
.modern::-webkit-resizer{background-image:url('');background-repeat:no-repeat;width:4px;height:0px}
.modern::-webkit-scrollbar{width: 6px;}
</style>где
Код: Выделить всё
.modern::-webkit-scrollbar-track {background-color:#F0FFFF} - цвет полоскиКод: Выделить всё
.modern::-webkit-scrollbar-thumb {-webkit-border-radius: 5px;border-radius: 5px;background-color:#6dc0c8;} - внешний вид (закругление) и цвет ползункаКод: Выделить всё
.modern::-webkit-scrollbar-thumb:hover{background-color:#56999f;} - ползунок при наведенииКод: Выделить всё
.modern::-webkit-scrollbar{width: 6px;} - ширина полоскихотите узнать больше - почитайте у автора:
перейти
