рамка почтовый конверт

Доброго времени суток, друзья. Предлагаю вашему вниманию рамку в виде старого, доброго почтового конверта. Обойдёмся опять вбез всяких редакторов и сделаем её с помощью CSS.

И, как всегда, сначала скопируйте приведённый ниже код и просмотрите результат в этом редакторе. Далее рассмотрим несколько вариантов применения.

<div class="wrap">
<div class="gradient">
<b><span style="color: #674ea7;">Здесь может быть что угодно - текст, изображение, код.</span></b></div>
</div>
<style>
.wrap {
height: 100px;
padding: 25px;
}
.gradient {
height: 100px;
width: 70%;
margin: 0 auto;
border: 10px solid transparent;
border-image: 10 repeating-linear-gradient(45deg, #A7CECC, #A7CECC 10px, transparent 10px, transparent 20px, #F8463F 20px, #F8463F 30px,transparent 30px, transparent 40px);
}
</style>

В коде div я написала что в рамку может быть заключён не только текст, но и изображение.

Вот пример

В коде в строке, отмеченной розовым цветом стоит прописать примерно так

<img height="135" src="здесь адрес изображения" width="310" />

Обратите внимание, что необходимо и размеры картинки подогнать под нужные.

Ещё можно заключить в такую рамку форму подписки в блоге. Так же, в отмеченную строку вставить код подписки. Специально в этом посте сделала такую. Посмотрите в низу сообщения.

Можно менять размеры высоты и ширины рамки - height: 100px;
width: 70%;
Размер border: 10px.
color: #674ea7; цвет текста.

Всё простая и оригинальная рамка почтовый конверт получается.

Всем добра и до встречи.

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