Главная » Украшение » Открытка новогодняя для Blogger

Открытка новогодняя для Blogger

Поздравить читателей сайта с Новым годом можно разными способами, например пустить бегущую строку, установить картинку в боковой панели или повесить гирлянду на шапку блога. Обо всех этих и других способах я писала на сайте ранее:

Установка кода

Сегодня предлагаю посмотреть новое оформление — новогодняя открытка. Увидела код на сайте https://atuin.ru.

Поздравление большое, поэтому установить его можно только в статью, в редакторе в режиме XTML.

Код выполнен на CSS и JS. Открытка открывается по клику. Можно использовать внешний вид поздравления, который предложен, либо поменять его, подобрав четыре картинки:

Фоновая картинка — размер 1400*933

Обложка открытки — размер 330*480

Фон внутри открытки — 154*138

Надпись с Новым Годом — 400*280

Подбираете свои картинки и устанавливаете в нужном месте в коде. Выглядит открытка так:

Посмотреть "вживую" можно на тестовом блоге.

Код открытки:

<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="https://atuin.ru/demo/i/xmas/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>

<style>
.card-container * {
    box-sizing: border-box;
}
.card-container {
    background-image: url("https://atuin.ru/demo/i/xmas/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("https://atuin.ru/demo/i/xmas/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("https://atuin.ru/demo/i/xmas/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;
    }
}
</style>
<script>
document.querySelector(".card-container").addEventListener("click", () => {
    document.querySelector(".card").classList.toggle("is-opened");;
});
</script>

Текст меняете на свой, в коде выделила красным.

Фоновая картинка в коде выделена синим цветом.

Обложка открытки — выделила оранжевым.

Фон внутри открытки — изображение отмечено розовым.

Надпись с Новым Годом — картинка отмечена в коде зелёным.

Потратив 5-10 минут можно сделать например такой вид у открытки:

Посмотреть её можно в тестовом блоге.

Ваши комментарии:

Комментарии со спамом удаляются.