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

красиво оформить участок в тексте
Здравствуйте, дорогие друзья, читатели и гости блога. Долго думала как обозвать всю эту конструкцию, которой хочу с вами сегодня поделиться. И решила пусть будет так. Как сделать красивый блок для оформления участка текста, используя 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


20 комментариев:

  1. Виктория! УРА! У меня получилось! Пока сделала на тестовом блоге - рассказ "Алиса и Марик", посвященный Всемирному Дню кошек (1 марта). В выходные выложу на одном из своих блогов. Только подскажите, пожалуйста, как сделать шрифт пожирнее! Я ведь могу изменить ширину скрола (мне надо пошире)? СПАСИБО!

    ОтветитьУдалить
    Ответы
    1. Ирина, если захотите сделать шире, нужно подгонять соответственно отступы в коде. А жирный чтобы был прописать в строке размера шрифта свойство font-weight: bolder; Или в редакторе сообщений выделите текст и нажмите на значок-жирный шрифт.

      Удалить
  2. Ответы
    1. Виктория, не за что. Очень приятно слышать.

      Удалить
  3. Виктория! Желаю Вам счастья и здоровья, здоровья и здоровья! Посмотрите 2 последних сообщения на моих блогах "Волшебный фонарик" и "Блог Кота Васьки". Я сделала тексты с прокруткой и обтекание картинки текстом.
    По-моему, здорово получилось! Самое главное - мне нравится! СПАСИБО!
    Если, кто-нибудь из Ваших подписчиков захочет посмотреть мои блоги (и подписаться), открываются на любом поисковике, только еще подписывайте мою фамилию - Полещенко!

    ОтветитьУдалить
    Ответы
    1. Ирина, спасибо за пожелания Главное чтобы нравилось. А прокрутку видела у Вас. А вот с подписчиками -это уже не ко мне.

      Удалить
  4. Вика. Спасибо большое за полезные советы. Вы МОЛОДЕЦ! Сразу и попробовала сделать http://00149.blogspot.ru/2016/02/blog-post_26.html Всего самого приятного.

    ОтветитьУдалить
    Ответы
    1. Любовь, Посмотрела. очень красиво получилось. Вам всего хорошего.

      Удалить
  5. Вика, здравствуйте. Только создаю блог, ещё учусь и учусь . Попробовала сделать текст в прокрутке, он у меня не получился по причине того, что вторая картинка сползла вниз и вся прокрутка наслоилась на картинки предыдущие. Но проблема в том, кода удаляла код прокрутки с текстом, очевидно что - то ещё удалила, у меня на главной странице потерялись все гаджеты по бокам, некоторые переместились вниз, на других страницах все нормально. Катастрофа, не знаю, что делать!!!http://konovalovalf.blogspot.ru/

    ОтветитьУдалить
    Ответы
    1. Любовь, здравствуйте.Такое бывает. Нужно вспомнить, что Вы делали перед этим. Вставляли ли новые гаджеты. Попробовать их удалить .
      Вам нужно просмотреть все предыдущие сообщения на вкладке "Изменить HTML". Открываете, нажимаете кнопку "Опубликовать сообщение", если всё нормально переходите к следующему сообщению.

      Попробуйте поменять в "Дизайнере шаблона" - вкладка слева "Дизайн" - "Дизайн основной части".
      Почитайте ещё здесь варианты http://bloggerforum.ru/laja-s-shablonom-t396.html
      АКогда исправите всегда делайте резервную копию при внесении изменений во вкладке шаблон. отпишитесь пожалуйста потом.

      Удалить
    2. Вика, ничего не могу найти. Удалила гаджеты, которые вставляла сегодня. Но все случилось, когда у меня не получилось установить прокрутку(я писала), я её начала удалять, с первого раза не получилось, я вновь попыталась, а вышла какая -то ерунда. Статью почитала, но у меня не то. Что дальше делать?

      Удалить
    3. Любовь, код тут не при чём. Давайте так .
      1.перепешите или скопируйте в блокнот или новое сообщение статью без всяких украшательств и "наворотов"статью, т.е. копируйте информацию, но не форматирование проверьте, а потом украшайте, "наворачивайте.
      2.Иногда один столбец (чаще всего боковая панель), меняет свое расположение, когда из-за содержания бокового меню или сообщения ширина столбца начинает превышать положенное значение. Это зависит от браузера, поэтому такая проблема возникает не у каждого посетителя. Чтобы устранить ее, просмотрите содержание обоих столбцов и найдите те элементы, из-за которых ширина столбца может превысить норму. В большинстве случаев причиной этого являются длинные ссылки и широкие изображения.
      Причина ухода виджетов в подполье - может быть картинка в посте, шире других.
      3. Попробуйте увеличить ширину блога вкладка шаблон-изменить регулировка ширины

      Удалить
  6. Вика спасибо, что Вы всегда откликаетесь на просьбы о помощи, ЭТО дорогого стоит! Мучилась, мучилась , а потом просто удалила ВСЁ свое сообщение на главной странице(оно не большое, шкатулки к 8 -марта) и все встало на свои места.Впредь, надо почитать, подумать, а потом делать, вот таких как я ,называют "чайниками"и это точно.http://konovalovalf.blogspot.ru/

    ОтветитьУдалить
    Ответы
    1. Людмила, хорошо, что всё получилось. Небольшой Вам совет. Сделайте ещё один блог ( тестовый) и на нём всё сначала пробуйте. Если всё ОК то можно будет и на основной устанавливать. А вот ширину колонок чуть-чуть я бы увеличила. У вас 180. До 200. Удачи Вам. Обращайтесь.
      А чайников все начинали.

      Удалить
  7. Спасибо Вика,я обязательно последую Вашему совету, создам тестовый блок, там буду проводить эксперименты и учиться. Ширину колонок увеличу. Спасибо!!!

    ОтветитьУдалить
  8. Добрый день! Подскажите, можно поставить кнопку "Версия для слабовидящих" на блог? Возможно этот вопрос где-то освещен, не встретила...

    ОтветитьУдалить
    Ответы
    1. Добрый день. Есть вот такой вариант http://www.shpargalochki.ru/2015/12/kak-otobrazit-soobshhenie-vo-ves-jekran.html
      И ещё есть скрипт. но я его пока не публиковала. напишите вашу почту в форме связи ниже я объясню вам.

      Удалить
    2. dudchenko_65@mail.ru Спасибо Вам за внимание!

      Удалить

Пользовательский поиск
Foto Saya
My Photo