Главная » 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> Готовые рамочки с прокруткой можете взять здесь | |
|
Всего комментариев: 0 | |