Пасхальные яйца на CSS

Добрый день. С приближающейся Пасхой вас! И пост сегодня будет об яйце, которое можно установить на своём сайте и поздравить читателей. Яичко можно установить в самой статье, добавив код в редакторе в режиме html или в боковую панель, вместе с текстом поздравления. В панель добавляем так: открыть Дизайн/ нажать Добавить гаджет/ выбрать HTML/JavaScript.

Все коды нашла на сайте https://codepen.io/

Оформление на Пасху

Код 1

<div class="egg"></div>
<style>
.egg {
height:220px;
width:170px;
top: 30%;
left: 30%;
background: radial-gradient(
ellipse at 60% 20%,
#ffffff 0%,
#f4D9BD 14%,
#edcfaa 35%,
#907080 80%);
position: relative;
border-radius: 50%;
box-shadow:
-15px 120px 40px -30px #7587d9,
0px 50px 40px -10px #9180c1,
10px -45px 40px -20px #937E90 inset,
0px -10px 60px 0px #69639e inset;
}
.egg::after,
.egg::before {
content: '';
position: absolute;
border-radius: 50%;
width: 160px;
height: 300px;
clip-path: polygon(18% 31%, 16% 21%, 26% 19%, 44% 14%, 33% 21%, 40% 33%, 49% 39%, 68% 30%, 80% 14%, 70% 34%, 51% 43%, 49% 51%, 59% 60%, 60% 68%, 66% 71%, 59% 77%, 45% 76%, 39% 71%, 32% 75%, 24% 62%, 21% 70%, 17% 82%, 13% 68%, 15% 57%, 10% 54%, 7% 46%, 1% 48%, 2% 37%, 10% 33%, 11% 24%);
}
.egg::after {
left: 7px;
background: radial-gradient(
ellipse at 70% 45%,
#FDC286 20%,
#AB8441 50%,
#8A7372 60%);
box-shadow:
0px 110px 140px -30px #474666 inset;
}
.egg::before {
top: 5px;
left: 5px;
background: linear-gradient(
#ffe9cD 0%,
#b090a0 100%);
}
</style>

Поменять в коде можно расположение, размер яйца, цвет. Код на CSS.

Код 2

<h1>Поздравляю Вас со Светлой Пасхой! Христос Воскрес!</h1>
<div class="osterei">
</div>
<style>
.osterei {
background-color: #7d2779;
background-image: linear-gradient(#ba55d3 10%, #e52b50 80%);
display: block;
width: 120px;
height: 155px;
border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
position: relative;
top: 45%;
left: 45%;
}
</style>

Можно увеличить яйцо - в коде выделила синим.

Поменять цвет яйца и процентное соотношение цветов градиента — выделила красным.

Текст меняем на свой — выделила жёлтым.

Код 3

<div class="eggs"
<h1>Христос воскрес!</h1>
<div class="egg1">
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
</div>
<style>
.eggs {
margin: 1em auto;
text-align: center;
}
.egg1 {
width: 140px;
height: 200px;
margin: 1em auto;
border-radius: 50%/60% 60% 40% 40%;
overflow: hidden;
display: inline-block;
}
.stripe {
height: 20%;
}
.stripe:not(:first-child) {
border-top: 2px solid #fff;
}
.stripe:nth-child(1) {
background-color: #6a38ff;
}
.stripe:nth-child(2) {
background-color: #9933ff;
}
.stripe:nth-child(3) {
background-color: #0055ff;
}
.stripe:nth-child(4) {
background-color: #ed0226;
}
.stripe:nth-child(5) {
background-color: #CF1259;
}
</style>

Цвет полос в коде выделила красным

Текст — желтым.

Код 4

Яйцо — кролик.

<div class="box">
<div class="head">
<div class="head-copy"></div>
<div class="left-ear">
<div class="inner-ear"></div>
</div>
<div class="right-ear">
<div class="inner-ear"></div>
</div>
<div class="left-eye">
<div class="catchlight"></div>
</div>
<div class="right-eye">
<div class="catchlight"></div>
</div>
<div class="nose"></div>
<div class="left-cheek"></div>
<div class="right-cheek"></div>
</div>
</div>
<style>
.box {
position: relative;
height: 600px;
width: 600px;
margin: auto;
margin-top: 5%;
}
.head {
position: absolute;
height: 20%;
width: 25%;
top: 40%;
left: 37.5%;
background: #FFF5C3;
border-radius: 50%;
animation: roll 5.2s;
}
.head-copy {
position: absolute;
height: 100%;
width: 100%;
background: #FFF5C3;
border-radius: 50%;
z-index: 2;
}
.left-ear {
position: absolute;
height: 100%;
width: 20%;
top: -75%;
left: 16%;
background: #F5F5F5;
border-radius: 50%;
}
.right-ear {
position: absolute;
height: 100%;
width: 20%;
top: -75%;
right: 16%;
background: #F5F5F5;
border-radius: 50%;
}
.inner-ear {
position: absolute;
height: 80%;
width: 65%;
top: 8%;
left: 17.5%;
background: #FFE0FC;
border-radius: 50%;
}
.left-eye {
position: absolute;
height: 16%;
width: 12.8%;
top: 32%;
left: 25%;
background: #000000;
border-radius: 50%;
z-index: 3;
}
.right-eye {
position: absolute;
height: 16%;
width: 12.8%;
top: 32%;
right: 25%;
background: #000000;
border-radius: 50%;
z-index: 3;
}
.catchlight {
position: absolute;
height: 30%;
width: 30%;
top: 12%;
right: 12%;
background: #FFFFFF;
border-radius: 50%;
z-index: 4;
}
.nose {
position: absolute;
height: 10%;
width: 10%;
top: 55%;
left: 45%;
background: #FFB6C1;
border-radius: 50%;
z-index: 3;
}
.left-cheek {
position: absolute;
height: 18%;
width: 32%;
top: 55%;
left: -4%;
background: #FFE095;
border-radius: 50%;
z-index: 3;
transform: rotate(60deg);
}
.right-cheek {
position: absolute;
height: 18%;
width: 32%;
top: 55%;
right: -4%;
background: #FFE095;
border-radius: 50%;
z-index: 3;
transform: rotate(120deg);
}
@keyframes roll {
0% {
transform: translateX(-32.5px) rotate(-70deg);
}
15% {
transform: translateX(30px) rotate(60deg);
}
30% {
transform: translateX(-25px) rotate(-50deg);
}
45% {
transform: translateX(20px) rotate(40deg);
}
60% {
transform: translateX(-15px) rotate(-30deg);
}
75% {
transform: translateX(0) rotate(20deg);
}
100% {
transform: rotate(0);
}
}
</style>

Цвет кролика можно поменять. Каждая деталь кролика прописана в коде, например .right-cheek - правая щека.