» » Оформление поздравлений на Блоггере

Оформление поздравлений на Блоггере

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

Оформление

Книжка-поздравление

Для оформления понадобится только ссылка на открытку с праздником и сам код. Можно книгу использовать не только как поздравление, но и для других своих целей. Посмотрите несколько вариантов:
Книжка-поздравление
Код:
<div class="book">
    <img alt="книга" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8cQTA87GQsMSyV7DbDrll65au_8C-_TwBUvA7H94nFDqs-WNya-VLoFDkcWC2Nw61qQd53EFzch8IN9yoTFN75NaEIG6o35OrrYmjAoWMo1kohszlpNHgmVc8K07aM2Y4I8Zb6I_LzC3s/s0/2021-03-16_084111.jpg" />
</div>
<style>
.book {
    width: 18.5em;
    height: 23.0991em;
    margin-top: -4.4em;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    transform: perspective(60em) rotateX(58deg) rotateZ(-34deg) skewY(-7deg);
    box-shadow: -1.4em 1.7em 0.3em -0.3em rgba(0,0,0,0.8), -1.6em 1.8em 0.9em -0.2em rgba(0,0,0,0.5), 0.3em 1.9em 1.3em rgba(0,0,0,0.3);
    border-top-right-radius: 0.4em;
}
.book img {
    border-top-right-radius: 0.4em;
    box-sizing: border-box;
    width: 100%;
    clip: rect(0em, 18.5em, 23.1em, 0em);
    display: block;
    position: absolute;
    filter: saturate(90%);
}
.book:before,
.book:after {
    content: '';
    position: absolute;
    top: 0;
}
.book:before {
    width: 105%;
    height: 105%;
    left: -5%;
    z-index: -1;
    background-repeat: no-repeat;
    background-image: linear-gradient(115deg, transparent 2.8%, #3f3f3f 3%, #3f3f3f 16%, transparent 16%), linear-gradient(125deg, transparent 10%, #3f3f3f 10%, #3f3f3f 17%, #222 46.8%, transparent 47%), linear-gradient(125deg, transparent 46%, rgba(0,0,0,0.5) 46.5%, rgba(0,0,0,0.25) 49%, transparent 53%), linear-gradient(to right, #444, #666), linear-gradient(#444, #444), linear-gradient(140deg, transparent 45%, #eee 45%, #ccc 96.8%, rgba(170,170,170,0) 97%);
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 0.4em, 94% 0.2em, 100% 100%;
    background-position: 0 0, 0 0, 0 0, 0 95.8%, 0 100%, 0 0;
}
.book:after {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-image: linear-gradient(to right, transparent 2%, rgba(0,0,0,0.1) 3%, rgba(0,0,0,0.1) 4%, transparent 5%), linear-gradient(-50deg, rgba(0,0,0,0.1) 20%, transparent 100%), linear-gradient(-50deg, rgba(0,0,0,0.2) 20%, transparent 100%), linear-gradient(to bottom, rgba(0,0,0,0.1) 20%, transparent 100%), linear-gradient(to bottom, rgba(0,0,0,0.1) 20%, transparent 100%);
    background-size: 100% 100%, 2% 20%, 1% 20%, 2% 20%, 1% 20%;
    background-position: 0 0, 2.2% 100%, 3% 100%, 2.2% 0, 3% 0;
}
</style>  
Красным выделила картинку, которую вы меняете на свою.
Код найден на codepen.io, автор  Lynn Fisher

Открытка в телефоне

Оформление можно использовать не только для поздравлений. Можно добавлять какую-либо информацию.
Картинки подыскивать лучше с текстом по центру, так как бока немного обрезаются. 
Цвет телефона можно менять.
Открытка в телефоне
Код:
<div class="mobile-wrapper">
    <div class="mobile">
        <div class="photo"></div>
        <div class="screen"></div>
    </div>
</div>
<style>
.mobile-wrapper {
    width: 300px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
.mobile-wrapper:after {
    content: '';
    width: 19%;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    border-radius: 25px;
    display: block;
    background: linear-gradient(90deg, #000000, 75%, #093ad6);
    z-index: -1;
    transform: perspective(1000px) rotateY(14deg) scale(0.85) translate3d(-35px, 0px, 0);
}
.mobile-wrapper:before {
    width: 100%;
    height: 5%;
    background: black;
    position: absolute;
    bottom: 7%;
    left: 4%;
    content: '';
    border-radius: 50%;
    filter: blur(9px);
    opacity: .2;
    transform: perspective(100px) rotate3d(1, 0, 0.5, 25deg) scale3d(0.8, 0.8, 0.8);
}
.mobile-wrapper .mobile {
    width: 100%;
    padding-bottom: 216%;
    background: black;
    border-radius: 25px;
    transform: perspective(1000px) rotateY(-40deg) scale3d(0.8, 0.8, 0.8);
}
.mobile-wrapper .mobile .photo {
    border-radius: 0 0 15px 15px;
    background: black;
    width: 50%;
    padding-bottom: 13%;
    position: absolute;
    left: 50%;
    top: 0%;
    transform: translateX(-50%);
    z-index: 1;
}
.mobile-wrapper .mobile .photo:after {
    content: '';
    width: 40%;
    padding-bottom: 5%;
    border-radius: 20px;
    background: #191919;
    border: 2px solid #191919;
    position: absolute;
    right: 30%;
    top: 50%;
    transform: translateY(-50%);
}
.mobile-wrapper .mobile .photo:before {
    content: '';
    width: 8%;
    padding-bottom: 8%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    border: 2px solid #212121;
    position: absolute;
    right: 10%;
    top: 50%;
    transform: translateY(-50%);
}
.mobile-wrapper .mobile .screen {
    border-radius: 20px;
    width: 95%;
    height: 98%;
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRQ1VvA3aJuV71Vlatspf5kZOPXJL5wZaNmT13x41wVScp0-kC-_IwdPVOUez-ppniM8uRrti8RJMw2xyMc4abggCIxCagXzuh705dK6-h6IMvMD45REHj3k0ngd8RDkJzvFWa6ed61gKk/s0/kartinki-9-maya-14.jpg") no-repeat center; 
    background-size: cover;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
</style>  
Красным выделила адрес фото. Меняйте на своё.
Голубым выделила цвет телефона (боковая часть), цвет градиентный, меняем на свои два цвета.
Зелёным — рамку вокруг экрана.
Найдено на codepen.io.

Роза анимированная

Код:
<div class="container">
  <svg version="1.1" stroke="#531a50" stroke-width="2" stroke-linejoin="square" stroke-linecap="butt" stroke-miterlimit="5" stroke-dasharray="600" stroke-dashoffset="600" x="0px"      
y="0px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;">
<g id="XMLID_1_">
<path id="XMLID_226_" style="fill:none;" d="M141.699,28.536c-2.719-3.544-7.022-6.085-11.414-6.835
c-2.105-0.359-6.033-0.747-8.056,0.778c-0.305-7.745-10.111-13.968-17.049-14.642c-9.049-0.88-14.428,6.888-15.406,15.065
c-0.365,0.047-0.732,0.107-1.099,0.184c-0.459-0.702-1.325-1.094-2.158-0.487c-8.092,5.89-7.658,17.458-7.172,26.443
c0.281,5.203,1.126,11.636,4.52,15.655c-7.374-2.16-15.321-2.492-22.495,0.406c-1.172,0.473-1.625,2.113-0.37,2.834
c4.502,2.587,9.244,4.39,14.419,5.047c2.825,0.358,6.831,0.662,10.224,0.028c-9.534,14.678-16.16,32.074-21.013,48.585
c-5.567,18.938-9.501,39.34-8.952,59.159c0.045,1.608,2.265,1.527,2.442,0c2.293-19.73,4.852-38.943,10.878-57.955
c5.417-17.091,13.362-32.521,21.249-48.39c1.132,6.821,5.351,12.99,10.382,17.646c0.838,0.775,2.139,0.429,2.485-0.656
c1.311-4.11-0.961-9.879-2.424-13.72c-0.241-0.633-0.504-1.263-0.78-1.888c15.485,5.976,38.861-15.468,38.496-30.219
c-0.01-0.394-0.185-0.698-0.432-0.916c-0.037-0.078-0.086-0.151-0.158-0.209c-0.191-0.152-0.396-0.284-0.596-0.421
c2.162-0.547,4.081-1.58,5.662-3.782C145.555,36.521,144.309,31.938,141.699,28.536z M126.792,41.734
c-0.637,0.026-1.272,0.064-1.902,0.121c0.296-0.453,0.558-0.959,0.774-1.536c0.16-0.429,0.139-0.814,0.004-1.143
c0.013-2.447-1.123-4.464-2.695-6.436c-0.11-0.138-0.228-0.243-0.35-0.333c-3.322-3.75-8.549-7.839-13.864-6.396
c-1.836,0.499-3.259,1.802-4.134,3.428c-0.904-1.031-1.893-1.979-2.951-2.818c1.83-8.477,15.842-1.895,19.466,1.137
C125.271,31.216,128.332,36.339,126.792,41.734z M120.173,35.1c0.054,0.088,0.108,0.176,0.18,0.261
c0.989,1.163,1.783,2.367,1.818,3.864c-0.012,0.042-0.031,0.076-0.04,0.121c-1.285,5.899-10.488-0.44-13.304-3.163
c-0.446-1.078-0.983-2.135-1.594-3.155c0.515-1.915,1.342-3.568,3.948-3.47C114.756,29.692,117.898,32.576,120.173,35.1z
M110.152,40.907c1.265,1.231,2.765,2.195,4.534,2.858c-1.598,0.53-3.069,1.251-4.284,2.288
C110.516,44.342,110.431,42.62,110.152,40.907z M107.21,11.796c5.873,1.796,7.985,5.749,10.921,10.061
c-4.416-2.037-10.03-3.273-14.575-1.124c-2.082,0.984-3.604,2.509-4.109,4.354c-2.269-1.345-4.766-2.178-7.369-2.284
C94.487,15.793,98.46,9.12,107.21,11.796z M88.444,25.669c9.186,2.26,16.509,6.969,17.466,17.631
c0.895,9.973-4.787,17.096-11.859,23.318c-0.676,0.595-0.501,1.453,0.021,1.973c-0.306-0.17-0.607-0.344-0.939-0.484
c0.012-1.224-1.216-2.034-2.345-1.713C80.485,55.956,82.317,37.905,88.444,25.669z M66.488,67.061
c6.94-1.102,13.554,0.53,20.513,1.668C80.496,70.733,72.891,69.604,66.488,67.061z M93.256,72.142
c1.517,1.972,3.045,3.886,4.121,6.221c1.078,2.342,2.813,5.926,3.159,9.049C96.99,82.842,94.953,77.633,93.256,72.142z
M122.443,65.218c-7.65,6.111-14.893,8.174-24.461,7.038c-0.877-1.276-1.93-2.396-3.222-3.256c0.321,0.086,0.676,0.057,1.017-0.143
c7.253-4.246,12.989-12.077,14.367-20.523c6.441-6.023,17.5-1.759,25.475-2.351C133.379,54.034,128.984,59.993,122.443,65.218z
M138.718,39.658c-1.44,1.334-3.587,1.811-5.461,2.633c-1.01-0.256-2.06-0.422-3.136-0.508c3.812-4.894-2.072-12.57-7.317-16.901
c2.024-1.319,5.996-0.047,7.94,0.606c2.786,0.936,5.28,2.496,7.235,4.706C140.43,32.967,141.876,36.732,138.718,39.658z"/>
</g>
</svg>
</div>
<style>
.container{
  max-width: 300px;
  width: 100%;
  margin: 0 auto;
}
#XMLID_226_{
  animation: draw 10s forwards;
}
 @keyframes draw {
  from{}
  to {
    stroke-dashoffset: 0;
  }
}
</style>  
Надпись или поздравление можно написать любое — простое, анимированное, с тенью, градиентное и т.п.
В коде цвет розы можно менять — выделила красным.
Найдено на codepen.io - автор Sushma Shrestha

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