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

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

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

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

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

Код 1

Код 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

Код 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

Код 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

Яйцо — кролик.
Код 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 - правая щека.

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

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