Разтваряща се картичка с поздравление на CSS
.jpg)
Здравейте приятели. Днес ще ви подскажа как да направите разтваряща се картичка с поздравление, използвайки чист CSS, без да използвате библиотеки или редактори на трети страни.
Подготовка
За да се разтвори изображението ще използваме свойството transform. Така ще го накараме и да се завърти, когато щракнем върху него и ще зададем ефект на сянка за оригиналност.
<div class="card">
<div class="imgBox">
<div class="bark"></div>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYm90dyYaD8mXAEZWWBE7OjqCT7vRoTjGiPfazN95UyDqs1x6uLAaRD2_XzTBPIAOl5HhhYbB7orDrlyTzoGRcBqn7Ax4WbCSJzkwhS4Nkej7lNRGZQdyB30DnXq0L7PN3NlibAz5A1kCs/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>
Пояснения
Инсталиране
