Авиа-конверт

Навеяло. Старая открытка. И конверты такие были для авиа почты.

Цвета пипеткой фотошопа берем прямо из открытки, получится примерно так –

синяя полоска #045bac
фон #f5e6c7
красная полоска #d80f18

Схема простая. Текст письма или поля для ввода оборачиваем в 2 div
внешнийй div — заполняет полосками все пространство
внутренний div — заполняет фон для самого письма

Полоски слишком яркие – более пастельно
синяя полоска #3b6c86
красная полоска #ea5c57

Делаем квадратик с полосками. Размер квадратика 60х60 px. С квадратиком пришлось помучиться. Полоски должны стыковаться со всех сторон, когда квадрат заполнит div.

  <div class="avia-envelope-wrapper">
    <div class="envelope-body">
      Вам письмо. Не простое, а целое Авиа-письмо.
    </div>
  </div>

Чтобы не возится с отдельным PNG файлом, вставляем прямо в CSS в виде base64 кода

.avia-envelope-wrapper {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpkN2NmYTY3My1mYjQ3LWQyNGEtYWI5OC1mMmJjN2IzMjQ2NzkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Mjk0NUIwQjhCNUFGMTFFREJEMDNGMzIzQTEyNzM0OTIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Mjk0NUIwQjdCNUFGMTFFREJEMDNGMzIzQTEyNzM0OTIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTYxZTk3MzgtZDJhZS0zMjQ4LWI2OTAtNTM3NzM1ZTQxZjNhIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmQ3Y2ZhNjczLWZiNDctZDI0YS1hYjk4LWYyYmM3YjMyNDY3OSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuWHWgsAAAAbUExURQCFlQB/kgBui//+/f/8+f+hhf9cVQBsiv///7pu9DoAAAAJdFJOU///////////AFNPeBIAAADMSURBVHjapNZJEsMgDETRnwHM/U8csI0tkk3UrS31ikldwPZdzxar1KXKMohjcebFWTPOfnHOCuecce4I535xegOnr3B6EqefcbKAkyOcDOLkFyf7GHbFOftoGDbitA04b28s2AsrdmLJnlizBxbtjlU7sGw71m3DsG902wqGrRh2wVkbcdoGnLc3FuyFFTuxZE+s2QOLdseqHVi2Heu2YtiKYQuGfWHY+NClbcB5e2PBXlixE0v2xJo9sGh3rNqBZdvx79/sX9s+AgwAlDVhKvLpMwEAAAAASUVORK5CYII=),
#f5e6c7;

padding: 10px 0px 0px 10px;

}

Фон в PNG прозрачный, поэтому указываем его отдельно #f5e6c7. И да – фон можно менять.

Поиграем паддингами класса avia-envelope-wrapper

А можно так

Или так

И на конец

Фон блока меняется просто

.avia-envelope-wrapper {
  background-color: #цвет;
}

Используем такую рамку, там где явно указывается почта
для формы подписки – пример – crovatti.ru
в плагине для отправки e-mail