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

Доброго времени суток, друзья. Предлагаю вашему вниманию рамку в виде старого, доброго почтового конверта. Обойдёмся опять вбез всяких редакторов и сделаем её с помощью 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 :

22 комментария:

  1. Что касается конвертика, то симпатично, но меня не заинтересовало. Но появилась совершенно практическая проблема. Мой текущий пост очень короток. Изначально, он планировался почти втрое больше. плюс ещё два фото. Но сколь я ни старался, блоггер отказался транспортировать его в блог!!! И только когда я урезал информацию вдвое, все пошло по плану. Не понимаю, в чём тут фишка. И еще. В новом интерфейсе ничего сложного нет. Но я почему-то не могу там найти иконки "создать сообщение"! Ну, не может же её или чего-то аналогичного там не быть!

    ОтветитьУдалить
  2. Семён, в новом интерфейсе в самом низу справа красная кнопка со знаком + (создать сообщение) про длинный пост не знаю что у Вас. что - то не так сделали. бывали посты и поболе. Всё принимается.

    ОтветитьУдалить
  3. Спасибо, Вика! Попробую разобраться.

    ОтветитьУдалить
  4. Почти додул! Следующий пост попробую загнать в новом интерфейсе.

    ОтветитьУдалить
  5. Семён, так в чём причина - то была. Уж очень интересно.

    ОтветитьУдалить
    Ответы
    1. С интерфейсом - понятно. С киком в транспортировке - попробую два варианта в следующем посте, чтобы проверить, нашел ли я ошибку.

      Удалить
  6. Очень понравилась идея для формы подписки — просто шикарная! Спасибо, Вика, обязательно использую.

    ОтветитьУдалить
  7. Надежда, я видела такие рамки, но они сделаны в редакторе и загружаются в виде картинки. Что тяжелее для блога. а тут чистый код CSS.

    ОтветитьУдалить
  8. Интересные рамки, очень понравились!

    ОтветитьУдалить
  9. Ирина, благодарю за отзыв.

    ОтветитьУдалить
  10. Прикольно. Одно время я искала подобную рамку, но сделала из картинки png А этот код намного удобнее и расцветку можно сделать любую. Положу в закладки.

    ОтветитьУдалить
  11. Наталья, да. Вполне можно с цветом поиграться, с gradient и с белой рамкой внутри.

    ОтветитьУдалить
  12. Привет, Вика!
    Сегодня я опубликовал недостающую часть 52-й новеллы. Проблемы при транспортировке возникли, видимо, из-за того, что я воспользовался не тем редактором при копировании в блоггер картинок. Есть новые проблемы в новом интерфейсе. Я не смог найти функции передвижения текста вверх-вниз, функцию прерывания поста, функции оперирования загнанным текстом - просмотр, сохранение, публикация. Чего-то я не увидел. Буду благодарен за подсказку, поскольку новый интерфейс мне, в принципе, нравится.

    ОтветитьУдалить
    Ответы
    1. Семён, как - то Вы так витиевато написали, что про транспортировку и передвижение текста я не поняла. Пишите текст в редакторе как обычно. Для перехода к другому абзацу нажимаете клавишу на компьютере Enter и всё.
      В верху с правой стороны есть иконки. Камера - это сохранить. Глаз - это предварительный просмотр. Стрелка - публикация.
      Вот здесь ещё почитайте http://www.shpargalochki.ru/2020/05/blog-post.html

      Удалить
    2. Спасибо, вика! Просплюсь, разберусь. Двое суток над Европой в атмосфере черт знает что, а я - собака жутко метеозависимая. Закончится буря, начну соображать.

      Удалить
  13. Привет, Вика. Очень симпатично выглядит. Надо подумать, где можно применить. Спасибочки за очередную шпаргалку!

    ОтветитьУдалить
    Ответы
    1. Люба, привет. Хочу посмотреть потом , когда придумаешь.

      Удалить
  14. Семён, здоровья Вам.

    ОтветитьУдалить
  15. Здравствуйте, Вика!
    Нашла применение рамке.https://retrootkritka.blogspot.com/p/blog-page_68.html
    Но. Не удалось одинаковые отступы картинки сделать внутри рамки. И в самом посте много места пустого. Не могу убрать интервалы.

    ОтветитьУдалить
  16. Татьяна , здравствуйте. Не очень и заметно, но нужно играться с height: 100px;
    width: 70%;. Сообщение в ВК отправила.

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

    ОтветитьУдалить
  18. Infodar,адрес мне на почту свой скинь.

    ОтветитьУдалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML

Пользовательский поиск