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

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