Красиво оформленный участок текста в сообщении с полосой прокрутки.

Здравствуйте, дорогие друзья, читатели и гости блога. Долго думала как обозвать всю эту конструкцию, которой хочу с вами сегодня поделиться. И решила пусть будет так. Как сделать красивый блок для оформления участка текста, используя CSS. Используем для этого наложение одной картинки на другую. И ещё добавим полосу прокрутки для длинного текста.
Всё очень просто – нам понадобится дополнительный элемент с картинкой в качестве фона для создания эффекта наложения. Вам для реализации такого в блоге нужно подобрать 2 картинки и воспользоваться кодом, который будет ниже. А сам эффект выглядит так.

Букет

Я буду долго гнать велосипед.
В глухих лугах его остановлю.
Нарву цветов.
И подарю букет
Той девушке, которую люблю.
Я ей скажу:
— С другим наедине О наших встречах позабыла ты,
И потому на память обо мне
Возьми вот эти
Скромные цветы! —
Она возьмет.
Но снова в поздний час,
Когда туман сгущается и грусть,
Она пройдет,
Не поднимая глаз,
Не улыбнувшись даже...
Ну и пусть.
Я буду долго
Гнать велосипед,
В глухих лугах его остановлю.
Я лишь хочу,
Чтобы взяла букет
Та девушка, которую люблю...

Н.Рубцов.

Копируйте код, в блокнот или черновик.

<div style="border:outset #8D3538 2px; background-color:#8D3538; background-image:url('http://s017.radikal.ru/i404/1602/94/50427c9041cc.jpg '); width:540px; height:258px;"><div style="overflow:auto;scrollbar-arrow-color:#8D3538;scrollbar-track-color: #FFC5C9;scrollbar-base-color: #DA6265;  position: relative; left: 30px; border:solid #8D3538 2px; padding:5pt; width:480px; height:200px; background-image:url('http://s017.radikal.ru/i407/1602/d4/ca6de16155d6.jpg '); left:20px; top:20px; text-align:center; text-indent:30pt; font-size:medium; font-family:'Times New Roman';"><span style="font-family:Monotype Corsiva;color:#8D3538;font-size:26px">НАЗВАНИЕ<br /><br />ЗДЕСЬ ВЕСЬ ТЕКСТ<div align=right> АВТОР</div></span></div></div>

Давайте уточним некоторые моменты. В строках, которые я выделила красным цветом, обозначены адреса ваших картинок. Первая - это картинка на которую будем накладывать другую. И вторая - это фоновое изображение на котором отображается текст и полоса прокрутки.

Строка синего цвета - это стили самого скролла. Возможно, кто-то захочет просто написать несколько коротких предложений, тогда нет смысла в прокрутке. Эту строчку можно убрать из кода. А с остальным, думаю, всё понятно. И ещё одна небольшая поправочка для начинающих.
Если вы будете публиковать стихи, то необходимо при переносе слов в тексте прописывать теги <br>.

Устанавливаем всю эту красоту как обычно. Переходим в редакторе в режим HTML и в нужном месте вставляем готовый код.
Вот таким образом можно создать уникальный вариант оформления участка текста с вашим изображениями.

А в этом сообщении есть очень интересный вариант прокрутки текста.

Я же пожелаю всем удачи. Спасибо за ваш визит и до новых встреч.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email