TryIt Editor v2.0 - Как создать эффект стопки бумаги

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      body {
      background: linear-gradient(#0042ad, #fff);
      padding: 20px;
      .letter {
      background: #ffffff;
      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.4);
      -webkit-box-shadow: 0 0 8px rgba(0,0,0,0.4);
      -moz-box-shadow: 0 0 8px rgba(0,0,0,0.4);
      left: -5px;
      top: 4px;
      transform: rotate(-2.7deg);
      -webkit-transform: rotate(-2.7deg);
      -moz-transform: rotate(-2.7deg);
      .letter:after {
      background: #f6f6f6;
      box-shadow: 0 0 3px rgba(0,0,0,0.2);
      right: -3px;
      top: 1px;
      transform: rotate(1.4deg);
      -webkit-transform: rotate(1.4deg);
      -moz-transform: rotate(1.4deg);
    </style>
  </head>
  <body>
    <div class="letter">
      <p>
        Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
      </p>
      <p>
        Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
      </p>
      <p>
        Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
      </p>
      <p>
        Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
      </p>
    </div>
  </body>
</html>