Разтваряща се картичка с поздравление на CSS

Здравейте приятели. Днес ще ви подскажа как да направите разтваряща се картичка с поздравление, използвайки чист CSS, без да използвате библиотеки или редактори на трети страни. 

Всичко е много просто. 

Подготовка 

Като начало трябва да направите следните две неща: 

➤да изберете изображение, която ще служи като предна страна, корица, на картичката;

➤да изберете текста на самото поздравление;

 

За да се разтвори изображението ще използваме свойството transform. Така ще го накараме и да се завърти, когато щракнем върху него и ще зададем ефект на сянка за оригиналност.

Вижте какво трябва да се получи накрая. Използвам примерна тема - може да ви е полезна. Копирайте кода по-долу и го поставете в този редактор, за да видите как работи.

 

<div class="card">

<div class="imgBox">

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

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfNQRvqOL-5UieGKXxxTi6yjskRx_ZA1oPj6ctkrwzLHLMcZweFYT-0cWnqINKG_vNOgtpy8mmwHW_RupfvBnRlShe6S-jAPaAUVi5jibzKozTb5jZODE0fbkIo9w5WAeLWO-mGHswTEkV/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 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;

document.addEventListener("DOMContentLoaded", () => { ABT_TOC(".post-body", "h2"); }); }</style>

Пояснения 

➤Участъкът маркиран в жълто # FDE3A7; отговаря за цвета на фона на цялата страница. Променете, ако този цвят не ви допада или премахнете, ако искате. 

➤В синьо е маркиран адресът на самото изображение, което сте избрали за корицата.

➤Можете да си поиграете и с размера на шрифта: font-size: 

 

➤Обърнете внимание на размера на му; width: 300px; height: 400px; - изображението трябва да е с този размер; 

➤С текстът и заглавието на вашата картичка ще се справите лесно; 

Инсталиране

Инсталирайте готовия код в HTML формат, като използвате моливчето отляво, на желаното място в публикацията; 

В рубриката "изображения" можете да се запознаете и с други ефекти. 

За въпроси моля, в коментарите. А може и на тази страница. 

С благодарности към Виктория Барад. За търпението и щедростта. Не, че тя е откривател, но моралът го изисква. 

Ще съм благодарна да оцените моя труд r ласувате за блога ми на:

 

Здраве за всички вас! Не забравяйте да правите добро на други хора!

  Следвайте Blogzablogove

Моля, подкрепете моя проект на