Главная » 2013 » Февраль » 3 » Рамочка с прокруткой
18:43
Рамочка с прокруткой
Для оформления дневника можно создавать записи с прокруткой. Они занимают меньше места и выглядят достаточно оригинально. Самая простая запись с прокруткой, или как он еще называется "скроллбаром" выглядит следующим образом:


Код №1
<div style="overflow:scroll;scrollbar-arrow-color:#000000;scrollbar-base-color: #228B22; position: width:99%;height:280px;background-image:url(' URL ');top:5px;text-align:left;text-indent:5pt">Ваш текст</div> ,

где div - задает границы блока через переменные width и height, которые могут измеряться как в процентах по отношению к экрану или в пикселях.
style="overflow:auto может принимать следующие значения:
-auto означает, что скроллбар (вертикальная полоса) появляется автоматически при превышении размера текста над заданными значениями блока, или рамки.
-scroll - полоса прокрутки обязательна независимо от размеров текста вертикальная и горизонтальная.
-visible - отображается весь блок;
-hidden - не влезающая часть текста будет скрыта.
теперь рассмотрим параметры самого скроллбара:
scrollbar-face-color - это цвет передней стороны панели прокрутки
scrollbar-track-color - это цвет полосы, по которой "ходит" панель прокрутки.
scrollbar-arrow-color - это цвет треугольника на верхнем и нижнем квадратах.
scrollbar-shadow-color - это цвет нижней и правой граней панели прокрутки.
scrollbar-darkshadow-color - это цвет тени от панели прокрутки.
scrollbar-highlight-color - это цвет верхней и левой граней панели прокрутки
scrollbar-3dlight-color - это цвет отсвета.
Отражать можно не все параметры полосы прокрутки/
Подставив в код №1 вместо 'URL ' прямую ссылку на изображение (первая строчка в Радикале или ее можно узнать в свойствах изображения (подробнее можно прочитать здесь), Ваша запись будет отображена на фоне с полосой прокрутки.
Если перед кодом №1 поставить код изображения, заданным значением обтекания текстом картинки слева,

то получим сообщение следующего вида.
Оно выглядит более интересно
Эта запись будет иметь код №2 :
Код №2
<img src="http://www.kom-snab.ru/templates/komsnab/images/phone.jpg" width="56" height="56" align="left" /><div style="overflow:auto;scrollbar-arrow-color:#000000;scrollbar-base-color: #228B22; position: width:99%;height:280px;background-image:url(' URL ');top:5px;text-align:left;text-indent:5pt">Ваш текст</div>

Готовые рамочки с прокруткой можете взять здесь
Просмотров: 368 | Добавил: Alenada | Теги: рамки | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email *:
Код *: