Красивое оформление текста сообщения


Здравствуйте все, кто сейчас читает мою шпаргалку. Хочу предложить вам несколько вариантов оформления текста сообщения. Иногда, ну очень хочется приукрасить текст или выделить его в рамку.
Давайте это попробуем сделать через редактор, который нам предоставили разработчики Блоггер.
Обычно для создания рамки используется свойство border.  Вот самый простой вариант оформления рамки в Блоггере.

Пример 1.

Если меркнет свет в окошке, Hа душе скребутся кошки, Кто сумеет вам помочь И прогонит кошек прочь? Это знает всякий. Это не слова. Преданней собаки нету существа! Преданней собаки, ласковей собаки, Веселей собаки - нету существа!

Задаём стили.

 <style>.ramka {
    border: 1px solid red;
    padding: 10px;
   }</style>

и заключили сам текст в теги <div>
<div class=" ramka ">ваш текст </div>.

В режиме HTML в том месте, где нужно выделить текст в рамке вставляем полный вариант кода.

<style>.ramka {
    border: 1px solid red;
    padding: 10px;
   }
</style>
<div class=" ramka ">ваш текст </div>.

Вместо ramka устанавливайте ramka1, ramka 2 и так далее, из предложенного ниже. Меняйте свои стили, тут лишь бы хватило фантазии. 

Пример 2. Добавим некоторые стили и получим вариант c двойной рамкой.


Если меркнет свет в окошке, Hа душе скребутся кошки, Кто сумеет вам помочь И прогонит кошек прочь? Это знает всякий. Это не слова. Преданней собаки нету существа! Преданней собаки, ласковей собаки, Веселей собаки - нету существа!
.ramka1 {
width:480px;
  margin: 30px auto;
  background:olive content-box; 
  border: 3px solid white;
  outline: 3px solid olive ; 
}

Пример 3. Сделаем закругление углов border-radius: 10px; и установим цвет и тень рамки box-shadow: 0 0 7px 3px #CCCC00 ;

Если меркнет свет в окошке, Hа душе скребутся кошки, Кто сумеет вам помочь И прогонит кошек прочь? Это знает всякий. Это не слова. Преданней собаки нету существа! Преданней собаки, ласковей собаки, Веселей собаки - нету существа!

.ramka2{
 border-radius: 10px;
 box-shadow: 0 0 7px 3px #CCCC00 ;
 text-indent: 30px;
 padding: 10px 20px 10px 20px;
 margin: 20px auto;
 width: 400px;
}

Пример 4. Текст в круглой рамке. Сделали округление углов border-radius: 50%/50%;  и 3 варианта цвета.
Если меркнет свет в окошке, Hа душе скребутся кошки, Кто сумеет вам помочь
.ramka3{
 border-radius: 50%/50%;
 box-shadow: 0 0 0 3px #993366 ,
    0 0 0 7px #ffdb00,
    0 0 0 10px #FFCCCC ;
 padding: 40px;
 margin: 20px auto;
 width: 130px;
 height: 130px;
 text-align: center;
}
Интересная рамка с заголовком в этом сообщении.
-----------------------------------------------------------------------------------------------
И чтобы не писать отдельный пост вот такое украшение для сообщения.

Очень красиво смотрится текст с выделенной заглавной буквы (или слова).
Если  Незнайка брался за какое-нибудь дело, то делал его не так, как надо, и все у него получалось шиворот-навыворот.…

код
<font size="+4" face="Monotype Corsiva" color="#0000FF">Е</font> <i>сли Незнайка брался за какое-нибудь дело, то делал его не так, как надо, и все у него получалось шиворот-навыворот.……</i>

А так разделим текст на 2 колонки.

Если Незнайка брался за какое-нибудь дело, то делал его не так, как надо, и все у него получалось шиворот-навыворот. Читать он выучился только по складам, а писать умел только печатными буквами. Многие говорили, будто у Незнайки совсем пустая голова, но это неправда, потому что как бы он мог тогда соображать? Конечно, он соображал плохо, но ботинки надевал на ноги, а не на голову, — на это ведь тоже соображение надо. Незнайка был не такой уж скверный. Он очень хотел чему-нибудь научиться, но не любил трудиться. Ему хотелось выучиться сразу, без всякого труда, а из этого даже у самого умного коротышки ничего не могло получиться. Малыши и малышки очень любили музыку, а Гусля был замечательный музыкант. У него были разные музыкальные инструменты, и он часто играл на них. Все слушали музыку и очень хвалили. Незнайке было завидно, что хвалят Гуслю, вот он и стал просить его:

Код.

<tadle width=100%><tr><td width=50%>текст для левой колонки<td width=50%>текст для правой колонки</table>

Ну на сегодня вполне достаточно. Берите , пробуйте и всё получится. Поделитесь с друзьями в соцсетях. 

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

введите пожалуйста свой email :


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

  1. Татьяна, приветствую Вас.Пожалуйста.

    ОтветитьУдалить
  2. Вика, интересно у вас!
    А форматирование с другой стороны в двухколоночном варианте - никак?

    ОтветитьУдалить
    Ответы
    1. Спасибо Любовь. Простите, не совсем вопрос поняла. Может быть найдёте ответ в этом сообщении http://www.shpargalochki.ru/2015/04/varianty-oformlenija-soobshhenija.html
      Или я не о том?

      Удалить
  3. И снова ,здравствуйте,Вика).Ссылка на это сообщение лежит у меня уже 2 месяца.Я же писала,что учусь у вас с самых первых дней своего блогерства на Blogger.Спасибо за рамочки!

    ОтветитьУдалить
  4. ВИКТОРИЯ! Поздравляю ВАС с Днем Рождения РУНЕТА! Всего Вам самого хорошего, отличного настроения, удачи! Сегодня на Блоге Кота Васьки я выложила 2 поста, в которых использовала эти шпаргалки! БОЛЬШОЕ СПАСИБО! У меня на странице "Я - Блогер" в Волшебном фонарике ссылки на те ваши шпаргалки, которые я использовала на своих блогах. Эту страницу больше всего у меня смотрят каждый день.

    ОтветитьУдалить
    Ответы
    1. Спасибо Ирина взаимно. вам удачи в блоговедении.

      Удалить

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