Доброго времени суток, друзья. Сегодня для вас очередной вариант оформления карточки или поздравительной открытки, всего что угодно, только подключить фантазию. Смотрится вполне оригинально и довольно просто при установке в сообщении или сайдбаре блога.
Вам нужно подобрать свою картинку и вставить её адрес вместо моей. В коде эта строка отмечена оранжевым. Надпись и текст пишите, что хотите.
Для оформления всего блока в данном случае используем HTML-теги figure и figcaption. Благодаря последнему выводится пояснение к содержимому, которое находится внутри тега figure.
Для пущей красоты добавим лёгкий hover эффект и полупрозрачный фон.

Давайте смотреть. Скопируйте приведённый ниже код и вставьте в этом редакторе для наглядного примера.
<div class="poem">
<figure1>
<p>Старинные часы</p>
<figcaption>
Старинные часы еще идут,<br> Старинные часы, свидетели и судьи.<br> Когда ты в дом входил,<br> Они слагали гимн,<br>Звоня тебе<br> Во все колокола.<br> Когда ты не сумел меня понять,<br>Я думала - замрут все звуки во Вселенной,<br> Но шли мои часы,<br> Торжественно, печально,<br> Я слышала их поминальный звон.
<br>
<div class="author">― Илья Резник</div>
</figcaption>
</figure1>
</div>
<style>
.poem {
margin: 20px 35%;
}
figure1 {
position: relative;
background: url(https://sun9-53.userapi.com/c855416/v855416488/202f74/9bUJkyUSiHY.jpg);
width: 320px;
height: 350px;
box-sizing: border-box;
display: inline-block;
margin: 0 auto;
background-color: rgba(230, 230, 230, 0.7);
color: #666;
transition: all 0.35s ease;
overflow: hidden;
backface-visibility: hidden;
box-shadow: 3px 2px 24px 0px rgba(190, 158, 167, 1);
}
figure1 p {
width: 320px;
background-color: rgba(255, 255, 255, 0.9);
border-bottom: 5px solid rgba(190, 158, 167, 0.4);
font-family: "Special Elite", cursive;
padding: 20px;
bottom: 5px;
position: absolute;
transition: all 0.45s ease;
}
figure1 figcaption {
transform: translateX(-120%);
background-color: rgba(255, 255, 255, 0.9);
width: 250px;
height: 330px;
padding: 20px;
position: absolute;
top: 0px;
bottom: 15px;
left: 0px;
right: 15px;
font-family: "Faustina", serif;
font-size: 15px;
border: 15px solid rgba(190, 158, 167, 0.4);
transition: all 1.5s ease;
}
figure1:hover figcaption {
transition: all 1s ease;
transform: translate(0, 0);
}
figure1:hover p {
transform: translateX(-120%);
}
figure1 .author {
text-align: right;
margin-top: 25px;
}
</style>
<figure1>
<p>Старинные часы</p>
<figcaption>
Старинные часы еще идут,<br> Старинные часы, свидетели и судьи.<br> Когда ты в дом входил,<br> Они слагали гимн,<br>Звоня тебе<br> Во все колокола.<br> Когда ты не сумел меня понять,<br>Я думала - замрут все звуки во Вселенной,<br> Но шли мои часы,<br> Торжественно, печально,<br> Я слышала их поминальный звон.
<br>
<div class="author">― Илья Резник</div>
</figcaption>
</figure1>
</div>
<style>
.poem {
margin: 20px 35%;
}
figure1 {
position: relative;
background: url(https://sun9-53.userapi.com/c855416/v855416488/202f74/9bUJkyUSiHY.jpg);
width: 320px;
height: 350px;
box-sizing: border-box;
display: inline-block;
margin: 0 auto;
background-color: rgba(230, 230, 230, 0.7);
color: #666;
transition: all 0.35s ease;
overflow: hidden;
backface-visibility: hidden;
box-shadow: 3px 2px 24px 0px rgba(190, 158, 167, 1);
}
figure1 p {
width: 320px;
background-color: rgba(255, 255, 255, 0.9);
border-bottom: 5px solid rgba(190, 158, 167, 0.4);
font-family: "Special Elite", cursive;
padding: 20px;
bottom: 5px;
position: absolute;
transition: all 0.45s ease;
}
figure1 figcaption {
transform: translateX(-120%);
background-color: rgba(255, 255, 255, 0.9);
width: 250px;
height: 330px;
padding: 20px;
position: absolute;
top: 0px;
bottom: 15px;
left: 0px;
right: 15px;
font-family: "Faustina", serif;
font-size: 15px;
border: 15px solid rgba(190, 158, 167, 0.4);
transition: all 1.5s ease;
}
figure1:hover figcaption {
transition: all 1s ease;
transform: translate(0, 0);
}
figure1:hover p {
transform: translateX(-120%);
}
figure1 .author {
text-align: right;
margin-top: 25px;
}
</style>
Вам нужно подобрать свою картинку и вставить её адрес вместо моей. В коде эта строка отмечена оранжевым. Надпись и текст пишите, что хотите.
Ширина 320px;
Высота 350px;
Если картинка других размеров, нужно будет менять в стилях CSS некоторые значения для корректного отображения надписи, появляющегося блока, отступы. Если возникнут проблемы с этим, пишите.
Особое внимание обращу на то, что если у вас в блоге уже, где - то был применён тег figure1, то могут возникнуть "неполадки". Не огорчайтесь, просто везде в коде замените тег figure1, допустим, на figure 2.
Готовый код устанавливаем в нужное место поста в режиме HTML (карандашик в левом верхнем углу нового редактора). Или в гаджет HTML/JavaScript. Вот такие не хитрые настройки и в итоге весьма симпатичная карточка получилась.
Всем добра и до встречи.
Всем добра и до встречи.
здесь можно оформить подписку на новые шпаргалки
Необычно!
ОтветитьУдалитьТут вернее будет сказать, обычно. С использованием HTML и CSS всякая подобная красота и получается.
ОтветитьУдалитьЕсли бы в какое-то время я додул про общий принцип эффектов, я бы овладел всем арсеналом, но.. Да и фиг с ним!
ОтветитьУдалитьСемён, Вы до другого додули. Каждый в разные стороны.
ОтветитьУдалитьМудро, Вика, мудро!
ОтветитьУдалитьКлассненько, Вика. Привет! Прямо сразу захотелось "взяться за перо", чтобы создать сообщение. Надо собраться! Спасибо!🌹 🌹 🌹
ОтветитьУдалитьЛюба, вперёд!!! Очень хочу посмотреть, что ты придумаешь. У тебя креатив ключом бьют.
ОтветитьУдалитьЗдравствуйте, Вика!
ОтветитьУдалитьОчень понравилась идея! Применила. Но не могу выровнять посередине поля сообщения. И еще: картинка как бы двойная. Видно ее начало, если убирается надпись. https://toropej.blogspot.com/
Здравствуйте Татьяна. Размер вашей картинки 320 на 240 пикселей. Соответственно нужно поменять размеры на width: 320px;
Удалитьheight: 240px;( я уточнила в сообщении). Чтобы вся конструкция была по центру, заключите весь код в теги <center></center>