Всем привет. Набросала, как можно с помощью стилей CSS сделать различные варианты оформления полосы прокрутки. Иногда возникают моменты, когда нужно заключить текст в скролл. Сама часто применяю при публиковании длинных кодов. Обратимся к Википедии.
Всё совершенно просто. И, если вам интересно, поиграйтесь с любым из кодов, меняя выделенные цветом элементы, на свои.
Самая обычная полоса прокрутки. Свойство overflow-y управляет отображением содержания блочного элемента по вертикали,
<div style="height: 150px; line-height: 3em; overflow-y: scroll; padding: 5px; width: 150px;">
Здесь будет ваш длинный предлинный и очень нужный текст Здесь будет ваш длинный предлинный и очень нужный текст
</div>
1. Сделаем фон внутри поля полосы прокрутки.
Скроллинг — форма представления информации, при которой содержимое (текст, изображение) двигается в вертикальном или горизонтальном направлении. Таким образом, скроллинг не изменяет содержимое, но передвигает «камеру».
Выделяют три типа скроллинга:
- линейный или «обычный» (двигающиеся объекты появляются у одного края экрана и исчезают у другого).
- циклический (объект, исчезнув с одного края, появляется у другого).
- отскакивающий (объект, дойдя до края экрана, меняет направление движения на противоположное).
Всё совершенно просто. И, если вам интересно, поиграйтесь с любым из кодов, меняя выделенные цветом элементы, на свои.
Самая обычная полоса прокрутки. Свойство overflow-y управляет отображением содержания блочного элемента по вертикали,
<div style="height: 150px; line-height: 3em; overflow-y: scroll; padding: 5px; width: 150px;">
Здесь будет ваш длинный предлинный и очень нужный текст Здесь будет ваш длинный предлинный и очень нужный текст
</div>
Здесь будет ваш длинный предлинный и очень нужный текст Здесь будет ваш длинный предлинный и очень нужный текст
1. Сделаем фон внутри поля полосы прокрутки.
<div style="background-color: #fcfadd; color: #714d03; height: 150px; line-height: 3em; overflow-y: scroll; padding: 5px; width: 250px;">
Здесь будет ваш длинный предлинный и очень нужный текст Здесь будет ваш длинный предлинный и очень нужный текст
</div>
Здесь будет ваш длинный предлинный и очень нужный текст Здесь будет ваш длинный предлинный и очень нужный текст
2. Так же меняем цвет фона и шрифта. Увеличим ширину скролла и уберём свойство height: 150px; line-height: 3em;. В результате будем иметь авто прокрутку для текста.
<div style="width:250px;overflow-y:scroll;padding:5px;background-color:red;color: white;">
Здесь будет ваш длинный предлинный и очень нужный текст
</div>
Здесь будет ваш длинный предлинный и очень нужный текст Здесь будет ваш длинный предлинный и очень нужный текст Здесь будет ваш длинный предлинный и очень нужный текст Здесь будет ваш длинный предлинный и очень нужный текст Здесь будет ваш длинный предлинный и очень нужный текстЗдесь будет ваш длинный предлинный и очень нужный текст
3. Вместо основного фона вставим картинку. Это что-то наподобие того, о чём писала в этой шпаргалке.
<div style="background: url(адрес картинки); color: #714d03; height: 150px; line-height: 3em; overflow-y: scroll; padding: 5px; width: 250px;">Здесь всё, что хотите об этом сказать, т.е. длинный предлинный текст
</div>
Здесь будет ваш длинный предлинный и очень нужный текст Здесь будет ваш длинный предлинный и очень нужный текст
4. Сделаем рамку.
<div style="border: 6px ridge #debb07; height: 150px; line-height: 3em; overflow: scroll; padding: 5px; width: 150px;">
Здесь будет ваш длинный предлинный и очень нужный текст
</div>
Здесь будет ваш длинный предлинный и очень нужный текст
5. Двойная рамка.
<div style="width:250px;height:150px;line-height:3em;overflow:scroll;padding:5px;border:6px double #DEBB07;">
Здесь будет ваш длинный предлинный и очень нужный текст Здесь будет ваш длинный предлинный и очень нужный текст
</div>
Здесь будет ваш длинный предлинный и очень нужный текст Здесь будет ваш длинный предлинный и очень нужный текст
5. Такая рамка.
<div style="width:150px;height:250px;line-height:3em;overflow-y:scroll;padding:5px;border:12px solid #DEBB07;">
Здесь будет ваш длинный предлинный и очень нужный текст Здесь будет ваш длинный предлинный и очень нужный текст
</div>
Здесь будет ваш длинный предлинный и очень нужный текст Здесь будет ваш длинный предлинный и очень нужный текст
Вообще, таким образом, если пофантазировать, можно создать очень необычные варианты полосы прокрутки.
Сегодня у меня всё. Всем лета, солнца, отдыха. Спасибо за визит.
здесь можно оформить подписку на новые шпаргалки
отлично
ОтветитьУдалить