Оформление открытки или карточки

Доброго времени суток, друзья. Сегодня для вас очередной вариант оформления карточки или поздравительной открытки, всего что угодно, только подключить фантазию. Смотрится вполне оригинально и довольно просто при установке в сообщении или сайдбаре блога.

Для оформления всего блока в данном случае  используем 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>

Вам нужно подобрать свою картинку и вставить её адрес вместо моей. В коде эта строка отмечена оранжевым. Надпись и текст пишите, что хотите. 

Ширина 320px;

Высота 350px;

Если картинка других размеров, нужно будет менять в стилях CSS некоторые значения для корректного отображения надписи, появляющегося блока, отступы. Если возникнут проблемы с этим, пишите. 

Особое внимание обращу на то, что если у вас в блоге уже, где - то был применён тег figure1, то могут возникнуть "неполадки". Не огорчайтесь, просто везде в коде замените тег figure1, допустим, на figure 2. 

Готовый код устанавливаем в нужное место поста в режиме  HTML (карандашик в левом верхнем углу нового редактора). Или в гаджет HTML/JavaScript. Вот такие не хитрые настройки и в итоге весьма симпатичная карточка получилась.

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

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email