Пасхальная открытка css

Почти перед всеми большими праздниками я выкладываю коды для украшения сайта. Можно обходиться и без всяких поздравлялок, но думаю, читателю будет приятно, если он зайдёт не на безликий, однотипный блог/сайт, а на тот, где автор о нём помнит, не забыл поздравить с праздником, сказал тёплые слова.

И сегодня продолжу тему поздравления читателей с Пасхой.

Поздравление

Установить код поздравления можно на отдельной странице, а потом удалить её или закрыть от читателей до следующего года. Либо установить в сообщении перед праздником.

Выглядит изображение так:

Код:

<div class="easter">
 <div class="egg style1"></div>
 <div class="egg style2"></div>
 <div class="egg style3"></div>
 <div class="egg style4"></div>
 <p1>Поздравляю Вас со светлым праздником Пасхи!</p1>
</div>
<style>
 @import url(https://fonts.googleapis.com/css?family=Chewy); 
 p1{
 font-family: 'Chewy', cursive;
 font-size: 3vw;
 color:  rgb(235,100,0); 
 text-align: center;
 text-shadow: 0 0 10px rgba(255,255,0,.7);
}
.easter {
 display: inline-block;
 margin: 4vmax 0 0;
}
.egg {
 position: relative;
 display: inline-block;
 width:10em;
  height:13em;
  margin:30px auto;
  background:#f7f7f7;
  border-radius:50% / 55% 55% 45% 45%;
  box-shadow: 1.3em 1.3em 2.5em -1em rgba(0, 0, 0, .1),
         .2em .8em 1.3em -.1em rgba(0, 0, 0, .7),
         -1em -2.5em 5em rgba(0, 0, 0, .3) inset,
         -.4em -.3em 2.5em rgba(0, 0, 0, .4) inset;
}

.style1, .style2 {
background-image: radial-gradient(circle at center -50%,
         hsla(346,100%,40%,1) 0%,
         hsla(346,100%,40%,1) 10%,
         hsla( 61,100%,40%,1) 11%,
         hsla( 61,100%,40%,1) 20%,
         hsla(106,100%,40%,1) 21%,
         hsla(106,100%,40%,1) 30%,
         hsla(173,100%,40%,1) 31%,
         hsla(173,100%,40%,1) 40%,
         hsla(225,100%,40%,1) 41%,
         hsla(225,100%,40%,1) 50%,
         hsla(293,100%,40%,1) 51%,
         hsla(293,100%,40%,1) 60%,
         hsla(359,100%,40%,1) 61%,
         hsla(359,100%,40%,1) 70%,
         hsla( 61,100%,40%,1) 71%,
         hsla( 61,100%,40%,1) 80%,
         hsla(106,100%,40%,1) 81%,
         hsla(106,100%,40%,1) 90%,
         hsla(173,100%,40%,1) 91%,
         hsla(173,100%,40%,1) 100%
        );
}
.style2 {
 background-size:2.5em 2.5em;
}
.style3 {
background-color:#d22;
background-image: linear-gradient(135deg, #eceddc 25%, transparent 25%), linear-gradient(225deg, #eceddc 25%, transparent 25%), linear-gradient(315deg, #eceddc 25%, transparent 25%), linear-gradient(45deg, #eceddc 25%, transparent 25%);
background-size:40px 40px;
}
</style> 

Что можно изменить в коде:

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

Шрифт текста — выделила оранжевым

Цвет текста — отметила зелёным

Тень текста — выделила синим цветом

Размер текста — выделен розовым

Цвет яиц так же можно поменять. Разноцветные записаны в цветовой палитре hsla. Подбирать цвета можно в конвертере на сайте Сolorscheme (https://colorscheme.ru/color-converter.html)

Оформление текста можно сделать другое, поменяв текстовый код на свой. Например, текст с тенями, градиентный, с ховер-эффектом и так далее.

Код увидела на сайте https://codepen.io.