Блок-секция с поздравительной открыткой к Новому Году.
Данный пример выполнен на CSS и коротким JS, который служит для смены класса. Открытка открывается по клику и отлично выглядит на всех экранах.
Размер шрифта для всех разрешений экрана указан конкретно под текст этого поздравления.
Для оформления открытки используются фотографии и текстуры:
- Фоновая картинка: bg.jpg
- Обложка открытки: front-bg.png
- Фон внутри открытки: pattern.png
- Надпись с Новым Годом: text.png
HTML КОД:
<div class="card-container">
<div class="card">
<div class="card-page cart-page-front">
<div class="card-page cart-page-outside"></div>
<div class="card-page cart-page-inside">
<span class="merry-christmas">
<img alt="С Новым Годом" src="text.png" />
</span>
</div>
</div>
<div class="card-page cart-page-bottom">
<p>
С Новым годом! Волшебства,<br>
Смеха, счастья и тепла,<br>
Мира, радостей, достатка<br>
И во всех делах порядка!
</p>
<p>
Пусть все серое, плохое<br>
Старый год возьмет с собою.<br>
Впредь лишь светлые мгновенья<br>
Создают пусть настроенье!
</p>
</div>
</div>
</div>
CSS КОД:
.card-container * {
box-sizing: border-box;
}
.card-container {
background-image: url("bg.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center top;
height: 740px;
overflow: hidden;
position: relative;
margin: 20px 0;
}
.card {
perspective: 1500px;
position: absolute;
left: calc(50% - 175px);
top: calc(50% - 250px);
transition-property: transform;
transition-duration: 1s;
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition-delay: initial;
transform: rotate(-10deg) translate(0, 0);
animation: cardIn 1s alternate cubic-bezier(0.87, -0.41, 0.19, 1.44);
}
.card:before {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
box-shadow: 0 0 50px #000;
transition: all 0.5s ease-in-out;
}
.card.is-opened {
transform: rotate(0deg) translate(175px, 0);
}
.card.is-opened .cart-page-front {
transform: rotateY(-180deg);
}
@keyframes cardIn {
0% {
opacity: 0;
transform: rotate(-10deg) translate(0, -100%);
}
25% {
opacity: 1;
}
100% {
opacity: 1;
transform: rotate(-10deg) translate(0, 0);
}
}
.card,
.card-page {
width: 350px;
height: 500px;
}
.card-page {
transition: transform 1s ease-in-out;
cursor: pointer;
position: absolute;
outline: 1px solid transparent;
}
.cart-page-front {
transform-origin: 0 50% 0;
transform-style: preserve-3d;
transform: rotateY(-20deg);
z-index: 2;
}
.cart-page-outside,
.cart-page-inside {
position: absolute;
-webkit-backface-visibility: hidden;
}
.cart-page-outside {
border: 10px solid #fbfbfb;
background-color: #c72320;
background-image: url("front-bg.png");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
}
@media (max-width: 767px) {
.cart-page-outside {
border: 5px solid #fbfbfb;
}
}
.cart-page-inside,
.cart-page-bottom {
background-color: #d4d1d0;
background-image: url("pattern.png");
border: 20px solid #d4d1d0;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
text-align: center;
}
.cart-page-inside {
transform: rotateY(-180deg);
border-right: none !important;
background-position: 0px 80px;
}
.cart-page-bottom {
z-index: 1;
border-left: none !important;
background-position: -22px 80px;
font-size: 18px;
}
.cart-page-bottom p {
line-height: 1.4;
}
.merry-christmas {
transform: rotate(-10deg);
}
.merry-christmas img {
width: 300px;
height: auto;
}
@media (max-width: 767px) {
.card-container {
height: 500px;
}
.card {
left: calc(50% - 115px);
top: calc(50% - 164.5px);
}
.card.is-opened {
transform: rotate(0deg) translate(115px, 0);
}
.card,
.card-page {
width: 230px;
height: 329px;
}
.cart-page-inside,
.cart-page-bottom {
border: 10px solid #d4d1d0;
}
.cart-page-inside {
background-position: 0px 30px;
}
.cart-page-bottom {
background-position: 85px 30px;
font-size: 11px;
}
.merry-christmas img {
width: 180px;
}
}
@media (max-width: 479px) {
.card-container {
height: 300px;
}
.card {
left: calc(50% - 75px);
top: calc(50% - 107px);
}
.card.is-opened {
transform: rotate(0deg) translate(75px, 0);
}
.card,
.card-page {
width: 150px;
height: 214px;
}
.cart-page-inside {
background-position: 0px 30px;
}
.cart-page-bottom p {
line-height: 1;
}
.cart-page-bottom {
background-position: 0px 30px;
font-size: 10px;
}
.merry-christmas img {
width: 130px;
}
}
JAVASCRIPT КОД:
document.querySelector(".card-container").addEventListener("click", () => {
document.querySelector(".card").classList.toggle("is-opened");;
});
0 Комментарии