Доброго времени суток, друзья. Предлагаю вашему вниманию рамку в виде старого, доброго почтового конверта. Обойдёмся опять вбез всяких редакторов и сделаем её с помощью CSS.
И, как всегда, сначала скопируйте приведённый ниже код и просмотрите результат в этом редакторе. Далее рассмотрим несколько вариантов применения.
В коде div я написала что в рамку может быть заключён не только текст, но и изображение.
Вот пример
В коде в строке, отмеченной розовым цветом стоит прописать примерно так
Обратите внимание, что необходимо и размеры картинки подогнать под нужные.
Ещё можно заключить в такую рамку форму подписки в блоге. Так же, в отмеченную строку вставить код подписки. Специально в этом посте сделала такую. Посмотрите в низу сообщения.
Можно менять размеры высоты и ширины рамки - height: 100px;
width: 70%;
Размер border: 10px.
color: #674ea7; цвет текста.
Всё простая и оригинальная рамка почтовый конверт получается.
Всем добра и до встречи.

И, как всегда, сначала скопируйте приведённый ниже код и просмотрите результат в этом редакторе. Далее рассмотрим несколько вариантов применения.
<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 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; цвет текста.
Всё простая и оригинальная рамка почтовый конверт получается.
Всем добра и до встречи.
Что касается конвертика, то симпатично, но меня не заинтересовало. Но появилась совершенно практическая проблема. Мой текущий пост очень короток. Изначально, он планировался почти втрое больше. плюс ещё два фото. Но сколь я ни старался, блоггер отказался транспортировать его в блог!!! И только когда я урезал информацию вдвое, все пошло по плану. Не понимаю, в чём тут фишка. И еще. В новом интерфейсе ничего сложного нет. Но я почему-то не могу там найти иконки "создать сообщение"! Ну, не может же её или чего-то аналогичного там не быть!
ОтветитьУдалитьСемён, в новом интерфейсе в самом низу справа красная кнопка со знаком + (создать сообщение) про длинный пост не знаю что у Вас. что - то не так сделали. бывали посты и поболе. Всё принимается.
ОтветитьУдалитьСпасибо, Вика! Попробую разобраться.
ОтветитьУдалитьПочти додул! Следующий пост попробую загнать в новом интерфейсе.
ОтветитьУдалитьСемён, так в чём причина - то была. Уж очень интересно.
ОтветитьУдалитьС интерфейсом - понятно. С киком в транспортировке - попробую два варианта в следующем посте, чтобы проверить, нашел ли я ошибку.
УдалитьОчень понравилась идея для формы подписки — просто шикарная! Спасибо, Вика, обязательно использую.
ОтветитьУдалитьНадежда, я видела такие рамки, но они сделаны в редакторе и загружаются в виде картинки. Что тяжелее для блога. а тут чистый код CSS.
ОтветитьУдалитьИнтересные рамки, очень понравились!
ОтветитьУдалитьИрина, благодарю за отзыв.
ОтветитьУдалитьПрикольно. Одно время я искала подобную рамку, но сделала из картинки png А этот код намного удобнее и расцветку можно сделать любую. Положу в закладки.
ОтветитьУдалитьНаталья, да. Вполне можно с цветом поиграться, с gradient и с белой рамкой внутри.
ОтветитьУдалитьПривет, Вика!
ОтветитьУдалитьСегодня я опубликовал недостающую часть 52-й новеллы. Проблемы при транспортировке возникли, видимо, из-за того, что я воспользовался не тем редактором при копировании в блоггер картинок. Есть новые проблемы в новом интерфейсе. Я не смог найти функции передвижения текста вверх-вниз, функцию прерывания поста, функции оперирования загнанным текстом - просмотр, сохранение, публикация. Чего-то я не увидел. Буду благодарен за подсказку, поскольку новый интерфейс мне, в принципе, нравится.
Семён, как - то Вы так витиевато написали, что про транспортировку и передвижение текста я не поняла. Пишите текст в редакторе как обычно. Для перехода к другому абзацу нажимаете клавишу на компьютере Enter и всё.
УдалитьВ верху с правой стороны есть иконки. Камера - это сохранить. Глаз - это предварительный просмотр. Стрелка - публикация.
Вот здесь ещё почитайте http://www.shpargalochki.ru/2020/05/blog-post.html
Спасибо, вика! Просплюсь, разберусь. Двое суток над Европой в атмосфере черт знает что, а я - собака жутко метеозависимая. Закончится буря, начну соображать.
УдалитьПривет, Вика. Очень симпатично выглядит. Надо подумать, где можно применить. Спасибочки за очередную шпаргалку!
ОтветитьУдалитьЛюба, привет. Хочу посмотреть потом , когда придумаешь.
УдалитьСемён, здоровья Вам.
ОтветитьУдалитьЗдравствуйте, Вика!
ОтветитьУдалитьНашла применение рамке.https://retrootkritka.blogspot.com/p/blog-page_68.html
Но. Не удалось одинаковые отступы картинки сделать внутри рамки. И в самом посте много места пустого. Не могу убрать интервалы.
Татьяна , здравствуйте. Не очень и заметно, но нужно играться с height: 100px;
ОтветитьУдалитьwidth: 70%;. Сообщение в ВК отправила.
Вика,дай пожалуйста код,на подписку,чтобы у меня получилось как у тебя внутри рамки,вот как внизу у тебя под постом,а то вставляю,а всё вылазит за рамку
ОтветитьУдалитьInfodar,адрес мне на почту свой скинь.
ОтветитьУдалить