"Бумажное" оформления текста для Блоггер

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

Такие текстовые блоки подходят для оформления рецептов, кодов, открыток, поздравлений, новостей и любой другой текстовой информации.

Проверить работу кодов можно на сайте, в визуальном редакторе .

В редакторе можно изменять внешний вид оформления.

Блокнотный лист

Текста, в таком импровизированном листе блокнота, можно написать много. Если не нужен большой контейнер, поменяйте его размер в коде.

"Бумажное" оформления текста для Блоггер

<div class="container"> 
<div class="notepad">
  <div class="top"></div>
  <div class="paper" contenteditable="true">
    Здесь можно писать любой текст.<br>
    Стихи, информацию, рецепты и т.д.
  </div>
</div>
</div>
<style>
.container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px 30px;
}
.notepad {
  width: 80%;
  max-width: 600px;
  box-shadow: 10px 10px 40px rgba(black, .15);
  border-radius: 0 0 10px 10px;
  overflow: hidden;
}
.top {
  width: 100%;
  height: 50px;
  background: #333;
  border-radius: 5px 5px 0 0;
}
.paper {
  width: 100%;
  height: 100%;
  min-height: 60vh;
  padding: 35px 20px;
  background: repeating-linear-gradient(#F1EDE9, #F1EDE9 31px, #94ACD4 31px, #94ACD4 32px);
  font-family: 'Shadows Into Light', cursive;
  line-height: 32px;
  outline: 0;
  font-size: 22px;
}
</style>

Поменять в коде можно:

Красным выделила место вставки вашего текста.

Оранжевым — цвет верхней полосы.

Зелёным выделила цвет фона.

Голубым отметила цвет полос листка.

Синим — шрифт.

Розовым — размер текста.

Автор Camila Waz

Стопка листов

Текста на листочке умещается довольно много. Если пишите мало текста, размер листка уменьшается.

<div class="container"> 
<div class="letter">
  <p>Уважаемый читатель,</p>
<p>Текст:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::</p>
  <p>Ещё текст 3333333333333333333333333№№№№№№№№№№№№№№№№3333333333</p>
  <p>И ещё немножко%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%</p>
  <p>И вновь много текста№№№№№№№№</p>

  <p>Пишем и пишем текст____________________________________________________.</p>
</div>
<style>
}
container {
  background: linear-gradient(#ccc, #fff);
  font: 14px sans-serif;
  padding: 20px;
}
.letter {
  background: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  margin: 26px auto 0;
  max-width: 550px;
  min-height: 300px;
  padding: 24px;
  position: relative;
  width: 80%;
}
.letter:before, .letter:after {
  content: "";
  height: 98%;
  position: absolute;
  width: 100%;
  z-index: -1;
}
.letter:before {
  background: #fafafa;
  box-shadow: 0 0 8px rgba(0,0,0,0.2);
  left: -5px;
  top: 4px;
  transform: rotate(-2.5deg);
}
.letter:after {
  background: #f6f6f6;
  box-shadow: 0 0 3px rgba(0,0,0,0.2);
  right: -3px;
  top: 1px;
  transform: rotate(1.4deg);
}
</style> 

Изменить можно:

Текст — выделила место красным цветом.

Автор - Michael MartinSmucker

Стопка бумаг

Стопка бумаг с ховер-эффектом.

<div class="letter">
  <p>Ваш текст - рецепты, стихи, советы, информация.</p>
<p>Пишем любой текст</p> <p>И здесь пишем текст.</p>
</div>
<style>
container {
 margin: 0px;
 height: 100%;
 width: 100%;
 overflow-x: hidden;
}
.letter {
    background: #fafafa;
    box-shadow: 0 0 10px rgba(0,0,0,0.3), 0 0 300px 25px rgba(222,198,122,0.7) inset;
    width: 250px;
    height: 350px;
    margin: 1.5% 50% auto;
    left: -225px;
    padding: 24px;
    position: relative;
}
.letter:before, .letter:after {
    content: "";
    background: #fafafa;
    box-shadow: 0 0 8px rgba(0,0,0,0.2), inset 0 0 300px rgba(222,198,122,0.7);
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: -2;
    transition: .5s;
}
.letter:before {
    left: -5px;
    top: 2px;  
    transform: rotate(-1.5deg);
}

.letter:after {
    right: -3px;
    top: 0px;
    transform: rotate(2.4deg);
}
.letter:hover:before {
transform: rotate(0deg);
border: solid rgba(111,99,61,0.4);
border-width: 0px 0px 0px 1px;
left: -6px;
top: -6px; 
}
.letter:hover:after {
transform: rotate(0deg);
border: solid rgba(111,99,61,0.4);
border-width: 0px 0px 0px 1px;
right: 3px;
top: -3px;
}
</style>

Изменить можно:

Текст — выделен красным.

Цвет листов сзади — выделила оранжевым.

Голубым отметила цвет листка с текстом.

Автор - Messiah7

Продолжение примеров бумажного оформления в следующей статье.