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

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


Здравейте приятели. Днес ще ви подскажа как да направите разтваряща се картичка с поздравление, използвайки чист 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>


    Пояснения 


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

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

    ➤Можете да си поиграете и с размера на шрифта: font-size: 
     
    ➤Обърнете внимание на размера на му; width: 300px; height: 400px; - изображението трябва да е с този размер; 

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


    Инсталиране


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



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

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

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

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

     
    BGtop

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

     
    Следвайте Blogzablogove

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

     
    OpenCloseComments

    2 Komentar

    Cancel