Здравствуйте, дорогие друзья, читатели и гости блога. Долго думала как обозвать всю эту конструкцию, которой хочу с вами сегодня поделиться. И решила пусть будет так. Как сделать красивый блок для оформления участка текста, используя CSS. Используем для этого наложение одной картинки на другую. И ещё добавим полосу прокрутки для длинного текста.
Всё очень просто – нам понадобится дополнительный элемент с картинкой в качестве фона для создания эффекта наложения. Вам для реализации такого в блоге нужно подобрать 2 картинки и воспользоваться кодом, который будет ниже. А сам эффект выглядит так.
Всё очень просто – нам понадобится дополнительный элемент с картинкой в качестве фона для создания эффекта наложения. Вам для реализации такого в блоге нужно подобрать 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 и в нужном месте вставляем готовый код.
Вот таким образом можно создать уникальный вариант оформления участка текста с вашим изображениями.
А в этом сообщении есть очень интересный вариант прокрутки текста.
Я же пожелаю всем удачи. Спасибо за ваш визит и до новых встреч.
здесь можно оформить подписку на новые шпаргалки
Виктория! УРА! У меня получилось! Пока сделала на тестовом блоге - рассказ "Алиса и Марик", посвященный Всемирному Дню кошек (1 марта). В выходные выложу на одном из своих блогов. Только подскажите, пожалуйста, как сделать шрифт пожирнее! Я ведь могу изменить ширину скрола (мне надо пошире)? СПАСИБО!
ОтветитьУдалитьИрина, если захотите сделать шире, нужно подгонять соответственно отступы в коде. А жирный чтобы был прописать в строке размера шрифта свойство font-weight: bolder; Или в редакторе сообщений выделите текст и нажмите на значок-жирный шрифт.
УдалитьКрасота!
ОтветитьУдалитьАга:-)))
ОтветитьУдалитьСпасибо :) буду использовать!
ОтветитьУдалитьВиктория, не за что. Очень приятно слышать.
УдалитьВиктория! Желаю Вам счастья и здоровья, здоровья и здоровья! Посмотрите 2 последних сообщения на моих блогах "Волшебный фонарик" и "Блог Кота Васьки". Я сделала тексты с прокруткой и обтекание картинки текстом.
ОтветитьУдалитьПо-моему, здорово получилось! Самое главное - мне нравится! СПАСИБО!
Если, кто-нибудь из Ваших подписчиков захочет посмотреть мои блоги (и подписаться), открываются на любом поисковике, только еще подписывайте мою фамилию - Полещенко!
Ирина, спасибо за пожелания Главное чтобы нравилось. А прокрутку видела у Вас. А вот с подписчиками -это уже не ко мне.
УдалитьВика. Спасибо большое за полезные советы. Вы МОЛОДЕЦ! Сразу и попробовала сделать http://00149.blogspot.ru/2016/02/blog-post_26.html Всего самого приятного.
ОтветитьУдалитьЛюбовь, Посмотрела. очень красиво получилось. Вам всего хорошего.
УдалитьВика, здравствуйте. Только создаю блог, ещё учусь и учусь . Попробовала сделать текст в прокрутке, он у меня не получился по причине того, что вторая картинка сползла вниз и вся прокрутка наслоилась на картинки предыдущие. Но проблема в том, кода удаляла код прокрутки с текстом, очевидно что - то ещё удалила, у меня на главной странице потерялись все гаджеты по бокам, некоторые переместились вниз, на других страницах все нормально. Катастрофа, не знаю, что делать!!!http://konovalovalf.blogspot.ru/
ОтветитьУдалитьЛюбовь, здравствуйте.Такое бывает. Нужно вспомнить, что Вы делали перед этим. Вставляли ли новые гаджеты. Попробовать их удалить .
УдалитьВам нужно просмотреть все предыдущие сообщения на вкладке "Изменить HTML". Открываете, нажимаете кнопку "Опубликовать сообщение", если всё нормально переходите к следующему сообщению.
Попробуйте поменять в "Дизайнере шаблона" - вкладка слева "Дизайн" - "Дизайн основной части".
Почитайте ещё здесь варианты http://bloggerforum.ru/laja-s-shablonom-t396.html
АКогда исправите всегда делайте резервную копию при внесении изменений во вкладке шаблон. отпишитесь пожалуйста потом.
Вика, ничего не могу найти. Удалила гаджеты, которые вставляла сегодня. Но все случилось, когда у меня не получилось установить прокрутку(я писала), я её начала удалять, с первого раза не получилось, я вновь попыталась, а вышла какая -то ерунда. Статью почитала, но у меня не то. Что дальше делать?
УдалитьЛюбовь, код тут не при чём. Давайте так .
Удалить1.перепешите или скопируйте в блокнот или новое сообщение статью без всяких украшательств и "наворотов"статью, т.е. копируйте информацию, но не форматирование проверьте, а потом украшайте, "наворачивайте.
2.Иногда один столбец (чаще всего боковая панель), меняет свое расположение, когда из-за содержания бокового меню или сообщения ширина столбца начинает превышать положенное значение. Это зависит от браузера, поэтому такая проблема возникает не у каждого посетителя. Чтобы устранить ее, просмотрите содержание обоих столбцов и найдите те элементы, из-за которых ширина столбца может превысить норму. В большинстве случаев причиной этого являются длинные ссылки и широкие изображения.
Причина ухода виджетов в подполье - может быть картинка в посте, шире других.
3. Попробуйте увеличить ширину блога вкладка шаблон-изменить регулировка ширины
Вика спасибо, что Вы всегда откликаетесь на просьбы о помощи, ЭТО дорогого стоит! Мучилась, мучилась , а потом просто удалила ВСЁ свое сообщение на главной странице(оно не большое, шкатулки к 8 -марта) и все встало на свои места.Впредь, надо почитать, подумать, а потом делать, вот таких как я ,называют "чайниками"и это точно.http://konovalovalf.blogspot.ru/
ОтветитьУдалитьЛюдмила, хорошо, что всё получилось. Небольшой Вам совет. Сделайте ещё один блог ( тестовый) и на нём всё сначала пробуйте. Если всё ОК то можно будет и на основной устанавливать. А вот ширину колонок чуть-чуть я бы увеличила. У вас 180. До 200. Удачи Вам. Обращайтесь.
УдалитьА чайников все начинали.
Спасибо Вика,я обязательно последую Вашему совету, создам тестовый блок, там буду проводить эксперименты и учиться. Ширину колонок увеличу. Спасибо!!!
ОтветитьУдалитьДобрый день! Подскажите, можно поставить кнопку "Версия для слабовидящих" на блог? Возможно этот вопрос где-то освещен, не встретила...
ОтветитьУдалитьДобрый день. Есть вот такой вариант http://www.shpargalochki.ru/2015/12/kak-otobrazit-soobshhenie-vo-ves-jekran.html
УдалитьИ ещё есть скрипт. но я его пока не публиковала. напишите вашу почту в форме связи ниже я объясню вам.
dudchenko_65@mail.ru Спасибо Вам за внимание!
Удалить