Создание открытки с разворотом на CSS

Привет, друзья. Как сделать разворачивающуюся открытку на чистом CSS, без подключения всяких библиотек и сторонних редакторов. Всё очень просто. Для начала вам нужно всего - то подобрать картинку, которая будет служить лицевой стороной открытки и придумать текст самого поздравления. 

Для разворота картинки используем свойство transform. повернём сам блок при нажатии на изображения и зададим эффект тени для оригинальности.

Посмотрите, что должно получится в итоге. Пример привожу с новогодней тематикой. Мало ли, может пригодится. Скопируйте приведённый ниже код и установите в этом редакторе, чтобы увидеть всё в работе.

<div class="card">

<div class="imgBox">

<div class="bark"></div>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGsra97Jd_0nQ9Usgrv6Vk11aE3dQvHxdbO20i_ImRDHPlY0uhQAYPyhOmZtp8pu_MkNXP6bSzatU76M55BzZsvcgyPo-zRwGNwcDgM5hnJc6yyMtXIM0xKhdpQYh96qh38LNp-QI55i-m/s16000/%25D0%25B1%25D1%258B%25D0%25BA.jpg">

</div>

<div class="details">

<h4 class="color1">Дорогие друзья</h4>

<h4 class="color2 margin">С Новым годом</h4>

<p>Пожелаю в год Быка,</p>

<p>Взять удачу за рога,.</p>

<p>А плохому настроенью</p>

<p>Дать хорошего пинка!</p>

<p>Ценит Бык любовь и труд,</p>

<p>Пусть они не подведут,</p>

<p>Вам подарят много счастья,</p>

<p>А от бед уберегут!</p>

<p class="text-right">Ура, Ура, Ура!</p>

<p class="text-right">♥Вика Барад</p>

</div>

</div>

<style>body {

font-family: 'Indie Flower', cursive !important;

  background: #FDE3A7; 

margin: 0px;

padding: 0px;

}

::selection {

background: transparent;

}

h4 {

font-size: 26px;

line-height: 1px;

font-family: 'Amatic SC', cursive !important;

}

.color1{color:#1BBC9B}

.color2{color:#C0392B}

.card {

color: #013243;

position: absolute;

top: 50%;

left: 50%;

width: 300px;

height: 400px;

background: #e0e1dc;

transform-style: preserve-3d;

transform: translate(-50%,-50%) perspective(2000px);

box-shadow: inset 300px 0 50px rgba(0,0,0,.5), 20px 0 60px rgba(0,0,0,.5);

transition: 1s;

}

.card:hover {

transform: translate(-50%,-50%) perspective(2000px) rotate(15deg) scale(1.2);

box-shadow: inset 20px 0 50px rgba(0,0,0,.5), 0 10px 100px rgba(0,0,0,.5);

}

.card:before {

content:'';

position: absolute;

top: -5px;

left: 0;

width: 100%;

height: 5px;

background: #BAC1BA;

transform-origin: bottom;

transform: skewX(-45deg);

}

.card:after {

content: '';

position: absolute;

top: 0;

right: -5px;

width: 5px;

height: 100%;

background: #92A29C;

transform-origin: left;

transform: skewY(-45deg);

}

.card .imgBox {

width: 100%;

height: 100%;

position: relative;

transform-origin: left;

transition: .7s;

}

.card .bark {

position: absolute;

background: #e0e1dc;

width: 100%;

height: 100%;

opacity: 0;

transition: .7s;

}

.card .imgBox img {

min-width: 250px;

max-height: 400px;

}

.card:hover .imgBox {

transform: rotateY(-135deg);

}

.card:hover .bark {

opacity: 1;

transition: .6s;

  box-shadow: 300px 200px 100px rgba(0, 0, 0, .4) inset;

}

.card .details {

position: absolute;

top: 0;

left: 0;

box-sizing: border-box;

padding: 0 0 0 10px;

z-index: -1;

margin-top: 70px;

}

.card .details p {

font-size: 15px;

line-height: 5px;

transform: rotate(-10deg);

padding: 0 0 0 20px;

}

.card .details h4 {

text-align: center;

}

.text-right {

text-align: right;

}</style>

В участке кода, отмеченного жёлтым цветом, значение  background: #FDE3A7;  отвечает за фон всей страницы. Измените при желании. В целом этот участок просто можно удалить из кода, если захотите. Открытка будет на обычном фоне.

Голубой цвет  - это адрес самой картинки на обложке. Обратите внимание на размер обложки 

width: 300px; height: 400px; - такого размера должно быть изображение.

С размерами шрифта font-size:  тоже можно поиграться.

С текстом и заголовком справиться не составит труда. 

Вот такая раскрывающаяся открытка получается. 

Готовый код устанавливаем в формате HTML (знак карандашика слева) в нужном месте сообщения. 

В категории картинки можно посмотреть другие эффекты.

Желаю всем удачи и до встречи.

 Получайте новые статьи прямо на почту

Введите Ваш email