Categories
CSS HTML JQuery Web development

CSS Easter Egg Animation


CSS Easter Egg Animation

To learn how to create the CSS Easter Egg Animation follow the steps below and watch the video tutorial.

Demo:

*to see the animation on the website click here.

Step1.

Add HTML

<div id="easter-egg-animation">
  <div class="easter-egg">
  <div class="egg">
    <div class="shell"></div>
  </div>
  <div class="egg-top">
    <div class="shell-top"></div>
  </div>
  </div>
  <div class="shadow"></div>
  <div class="text">Happy</br>Easter!</div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #55ceaf;
}

#easter-egg-animation {
  position: relative;
  cursor: pointer;
}

Style and animate the egg:

.easter-egg {
  position: relative;
  transform-origin: bottom;
  animation: wiggle 2s forwards;
}

.egg {
   position: relative;
   width: 160px;
   height: 80px;
   background-color: #19a0bd;
   border-radius: 0% 100% 50% 50% / 0% 0% 100% 100%;
   top:90px;
}

.egg-top {
   position: absolute;
   width: 160px;
   height: 120px;
   background-color: #19a0bd;
   border-radius: 50% 50% 70% 30% / 100% 100% 0% 0%;
   top:-44px;
   left:0;
   transform-origin: left;
   animation: open .5s ease forwards 2s;
}

@keyframes open {
  0% {transform: rotate(0);}
  100% {transform: rotate(-220deg);top:0;}
}

.egg:before, .egg:after, .egg-top:before, .shell:before {
   content:"";
   position: absolute;
   border-style: solid;
}

.egg:before {
  border-color: transparent transparent #19a0bd transparent;
  border-width: 0 20px 20px 0;
  top: -20px;
}

.egg:after {
  border-color: transparent transparent #19a0bd transparent;
  border-width: 0 0 20px 20px;
  top: -20px;
  left: 140px;
}

.egg-top:before {
  border-color: #19a0bd transparent transparent transparent;
  border-width: 20px 20px 0 20px;
  top:119px;
}

.shell-top, .shell-top:before, .shell-top:after {
  position: absolute;
  border-style: solid;
  border-color: #19a0bd transparent transparent transparent;
  border-width: 20px 20px 0 20px;
}

.shell-top {
  left:40px;
  top:119px;
}

.shell-top:before, .shell-top:after {
  content:"";
  top:-20px;
}

.shell-top:before {
  left:20px;
}

.shell-top:after {
  left:60px;
}

.shell {
  position: absolute;
}

.shell:before {
  border-color: transparent transparent #19a0bd transparent;
  border-width: 0 20px 20px 20px;
  top:-19px;
  left:20px;
  filter: drop-shadow(40px 0 #19a0bd) drop-shadow(40px 0 #19a0bd);
}

.egg-top:after {
  content:"";
  position: absolute;
  background-color: rgba(255,255,255,.2);
  width:25px;
  height:60px;
  border-radius:50%;
  transform: rotate(-27deg);
  top:30px;
  left:115px;
}

.shell:after {
  content:"";
  position: absolute;
  border-radius:50%;
  width:10px;
  height:10px;
  background-color: #f1f3ed;
  top: 30px;
  left:20px;
  box-shadow: 30px 25px #f1f3ed, 60px 0 #f1f3ed, 90px 20px #f1f3ed, 120px -5px #f1f3ed, 30px -25px #f1f3ed, 90px -25px #f1f3ed;
}

.shadow {
  position: absolute;
  width:220px;
  height:30px;
  background-color: rgba(0,0,0,.1);
  border-radius:50%;
  z-index:-1;
  top:147px;
  left:-27px;
}

@keyframes wiggle {
  0% {transform: rotate(0);}
  20% {transform: rotate(-20deg);}
  40% {transform: rotate(20deg);}
  60% {transform: rotate(-20deg);}
  80% {transform: rotate(20deg);}
  85% {transform: rotate(-20deg);}
  90% {transform: rotate(20deg);}
  95% {transform: rotate(-20deg);}
  99% {transform: rotate(20deg);}
  100% {transform: rotate(0);}
}

Style and animate the text:

.text {
  position: absolute;
  top:100px;
  left:45px;
  text-align: center;
  color: white;
  font-size: 25px;
  z-index:-1;
  transform-origin: bottom;
  animation: up .5s ease forwards 2s;
}

@keyframes up {
  0% {transform: translateY(0) scale(1);}
  100% {transform: translateY(-80px) scale(2);}
}

Step3. (optional)

Add jQuery

To repeat the animation on click add jQuery:

To read how to add the jQuery code to HTML click here.

$(document).ready(function(){
  $('#easter-egg-animation').mouseleave(function(){
    $(this).removeClass('clicked');
  }).click(function(){
    $(this).addClass('clicked').html($(this).html());
  });
});

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Easter Bunny/ Foldable Easter Card

CSS Egg Shape and CSS Easter eggs

Decorate the Christmas tree! (CSS & jQuery/ UI drag and drop)

Categories
CSS HTML Web development

CSS Easter Animation


CSS Easter Animation

To learn how to create the CSS Easter Animation follow the steps below and watch the video tutorial.

Demo:

*to see the animation on the website click here.

Step1.

Add HTML

<div class="easter-animation">
  <div class="chick">
    <div class="beak"></div>
  </div>
  <div class="back-flower">
  <div class="daisy">
    <div class="flower"></div>
  </div>
  </div>
  <div class="egg">
    <div class="shell"></div>
  </div>
  <div class="egg-top">
    <div class="shell-top"></div>
  </div>
  <div class="daisy">
    <div class="flower"></div>
  </div>
  <div class="grass"></div>
  <p class="text">- hover over the egg -</p>
</div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  display: flex;
  height: 100vh;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  background-color: #94d2bd;
}

.easter-animation {
  position: relative;
  cursor: pointer;
}

Style the egg:

.egg {
   position: relative;
   width: 160px;
   height: 80px;
   background: linear-gradient(0deg, rgba(249,65,68,1) 30%, rgba(87,117,144,1) 30%, rgba(95,127,139,1) 60%, rgba(144,190,109,1) 60%, rgba(128,168,113,1) 95%, rgba(249,199,79,1) 95%);
   border-radius: 0% 100% 50% 50% / 0% 0% 100% 100%;
   top:90px;
}

.egg-top {
   position: absolute;
   width: 160px;
   height: 120px;
   background: linear-gradient(180deg, rgba(249,65,68,1) 40%, rgba(87,117,144,1) 40%, rgba(95,127,139,1) 70%, rgba(144,190,109,1) 70%, rgba(128,168,113,1) 95%, rgba(249,199,79,1) 95%);
   border-radius: 50% 50% 70% 30% / 100% 100% 0% 0%;
   top:-48px;
   left:0;
   transition: .2s;
}

.egg:before, .egg:after, .egg-top:before, .shell:before {
   content:"";
   position: absolute;
   border-style: solid;
}

.egg:before {
  border-color: transparent transparent #f9c74f transparent;
  border-width: 0 20px 20px 0;
  top: -19px;
}

.egg:after {
  border-color: transparent transparent #f9c74f transparent;
  border-width: 0 0 20px 20px;
  top: -19px;
  left: 140px;
}

.egg-top:before {
  border-color: #f9c74f transparent transparent transparent;
  border-width: 20px 20px 0 20px;
  top:120px;
}

.shell-top, .shell-top:before, .shell-top:after {
  position: absolute;
  border-style: solid;
  border-color: #f9c74f transparent transparent transparent;
  border-width: 20px 20px 0 20px;
}

.shell-top {
  left:40px;
  top:120px;
}

.shell-top:before, .shell-top:after {
  content:"";
  top:-20px;
}

.shell-top:before {
  left:20px;
}

.shell-top:after {
  left:60px;
}

.shell {
  position: absolute;
  z-index:-1;
}

.shell:before {
  border-color: transparent transparent #f9c74f transparent;
  border-width: 0 20px 20px 20px;
  top:-19px;
  left:20px;
  filter: drop-shadow(40px 0 #f9c74f) drop-shadow(40px 0 #f9c74f);
}

.shell:after {
  content:"";
  position: absolute;
  background-color: rgba(0,0,0,.1);
  width:160px;
  height: 40px;
  border-radius:50%;
  top:50px;
  left:0;
}

.egg-top:after {
  content:"";
  position: absolute;
  background-color: rgba(255,255,255,.2);
  width:25px;
  height:60px;
  border-radius:50%;
  transform: rotate(-27deg);
  top:20px;
  left:105px;
}

Add grass and flowers:

.grass {
  position: absolute;
}

.grass:before {
  content:"";
  position: absolute;
  border-left: 8px solid #90be6d;
  border-top: 1px solid #90be6d;
  border-top-left-radius: 100%;
  width: 40px;
  height: 60px;
  top:30px;
  left:130px;
  filter: drop-shadow(20px -5px #90be6d) drop-shadow(-120px -5px #90be6d);
}

.grass:after {
  content:"";
  position: absolute;
  border-right: 6px solid #90be6d;
  border-top: 1px solid #90be6d;
  border-top-right-radius: 100%;
  width: 30px;
  height: 50px;
  top:30px;
  left:90px;
  filter: drop-shadow(20px -5px #90be6d) drop-shadow(-120px -5px #90be6d);
}

.daisy {
  position: absolute;
  border-right: 7px solid #90be6d;
  border-top: 2px solid #90be6d;
  border-top-right-radius: 100%;
  width: 40px;
  height: 110px;
  top:50px;
  left:-15px;
}

.daisy:before, .daisy:after {
  content:"";
  position: absolute;
  background-color: white;
  border-radius:10px;
}

.daisy:before {
  width: 60px;
  height:10px;
  top:-10px;
  left:-25px;
}

.daisy:after {
  height:60px;
  width:10px;
  top:-35px;
}

.flower, .flower:before {
  position: absolute;
  background-color: white;
  border-radius:10px;
}

.flower {
  width:60px;
  height:10px;
  left:-25px;
  top:-10px;
  transform: rotate(45deg);
  z-index:2;
}

.flower:before {
  content:"";
  width:60px;
  height:10px;
  left:0;
  transform: rotate(90deg);
}

.flower:after {
  position: absolute;
  content:"";
  border-radius:50%;
  background-color: #f9c74f;
  width:10px;
  height:10px;
  top:0;
  left:25px;
}

.back-flower {
  position: absolute;
  transform: scaleX(-1) scale(.7);
  top:50px;
  left:160px;
}

Add transition on hover:

.easter-animation:hover .egg-top {
  transform: translateY(-55px);
}

Style and animate the chick:

.chick {
  position: absolute;
  background-color: #e9d8a6;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  width:130px;
  height: 150px;
  left:15px;
  top:-10px;
  z-index:-3;
}

.chick:before {
  content:"";
  position: absolute;
  background-color: #333;
  width: 7px;
  height:10px;
  border-radius:50%;
  top:50px;
  left:50px;
  box-shadow: 25px 0 #333;
  transform-origin: 50%;
  animation: blink 2s infinite;
}
@keyframes blink {
    0%, 100% {transform: scale(1, .05);}
    5%, 95% {transform: scale(1, 1);}
}

.beak {
  position: absolute;
  border-color: transparent transparent #ee9b00 transparent;
  border-width: 0 25px 30px 25px;
  border-style: solid;
  left:40px;
  top:50px;
}

.beak:before {
  content:"";
  position: absolute;
  border-color: #d48a00 transparent transparent transparent;
  border-width: 20px 20px 0 20px;
  border-style: solid;
  top:29px;
  left:-19px;
}

Style the text:

.text {
  position: absolute;
  top:170px;
  width:100%;
  text-align: center;
  color: white;
  font-family: Brush Script MT;
  font-size:20px;
}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Easter Eggs

CSS Easter Bunny/ Foldable Easter Card

CSS Christmas Tree Animation

Categories
Web development

CSS Easter Eggs


CSS Easter Eggs

To learn how to create the CSS Easter Eggs follow the steps below and watch the video tutorial.

Demo:

*to see the CSS Easter Eggs on the website click here.

Step1.

Add HTML

<div class="easter-eggs">
  <div class="egg-one">
    <div class="decoration"></div>
    <div class="dots"></div>
  </div>
  <div class="egg-two">
    <div class="shine"></div>
  </div>
  <div class="grass"></div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f1dca7;
  overflow: hidden;
}

.easter-eggs {
  position: relative;
  top:0;
  left:0;
}

Style the first egg:

.egg-one {
  position: relative;
  width: 170px;
  height: 220px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient( circle at 50% -10%, rgba(195,144,195,1) 20%, rgba(195,144,195,1) 20%, rgba(243,216,109,1) 20%, rgba(243,216,109,1) 40%, rgba(140,197,87,1) 40%, rgba(140,197,87,1) 60%, rgba(74,166,156,1) 60%, rgba(74,166,156,1) 80%, rgba(239,137,160,1) 80%, rgba(239,137,160,1) 100%);
  overflow: hidden;
  transform: rotate(20deg);
  filter: drop-shadow(0 0 15px rgba(0,0,0,.2));
}

.egg-one:before, .egg-one:after, .decoration:before, .decoration:after, .dots {
  content:"";
  position: absolute;
  width: 20px;
  height: 35px;
  border-radius:50%;
}

.egg-one:before {
  background-color: #ed87a4;
  top:37px;
  left:75px;
  box-shadow: 0 105px #f3d86d;
}

.egg-one:after {
  background-color: #ed87a4;
  transform: rotate(30deg);
  top:25px;
  left:35px;
}

.decoration {
  position: absolute;
}

.decoration:before {
  background-color: #ed87a4;
  transform: rotate(-30deg);
  top:25px;
  left:115px;
}

.decoration:after {
  background-color: #f3d86d;
  top:135px;
  left:30px;
  transform: rotate(-10deg);
  box-shadow: -35px -20px #f3d86d;
}

.dots {
  background-color: #f3d86d;
  top: 120px;
  left:155px;
  transform: rotate(10deg);
  box-shadow: -35px 20px #f3d86d;
  z-index:2;
}

.dots:before, .dots:after {
  content:"";
  position: absolute;
  background-color: rgba(255,255,255,.3);
  border-radius:50%;
}

.dots:before {
  width:40px;
  height:70px;
  left:-150px;
  top:-40px;
}

Style the second egg:

.egg-two {
  position: absolute;
  width: 170px;
  height: 220px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 50% -10%, rgba(247,225,124,1) 20%, rgba(247,225,124,1) 20%, rgba(160,198,88,1) 20%, rgba(185,206,98,1) 27%, rgba(247,225,124,1) 27%, rgba(247,225,124,1) 32%, rgba(171,201,93,1) 32%, rgba(160,198,88,1) 40%, rgba(237,142,180,1) 40%, rgba(237,142,180,1) 60%, rgba(85,191,215,1) 60%, rgba(247,225,124,1) 60%, rgba(247,225,124,1) 64%, rgba(89,188,214,1) 64%, rgba(85,191,215,1) 80%, rgba(158,121,185,1) 80%, rgba(158,121,185,1) 100%);
  overflow: hidden;
  top:30px;
  left:140px;
  transform: rotate(-110deg);
  filter: drop-shadow(0 0 15px rgba(0,0,0,.2));
}

.egg-two:before, .egg-two:after {
  content:"";
  position: absolute;
  border-radius: 50%;
  width:30px;
  height: 30px;
}

.egg-two:before {
  background-color: #56c1d3;
  top:70px;
  box-shadow: 40px 20px #56c1d3, 90px 20px #56c1d3, 140px 0 #56c1d3;
}

.egg-two:after {
  background-color: #f08cb6;
  top:125px;
  left:-20px;
  box-shadow: 40px 15px #f08cb6, 90px 22px #f08cb6, 140px 15px #f08cb6, 185px 0 #f08cb6;
}

.shine {
  position: absolute;
  background-color: rgba(255,255,255,.3);
  border-radius:50%;
  width:40px;
  height:70px;
  top:90px;
  left:120px;
  z-index:2;
}

Add some grass:

.grass {
  position: absolute;
  border-top: 1px solid #90be6d;
  border-left: 6px solid #90be6d;
  width: 35px;
  height: 50px;
  border-top-left-radius: 100%;
  top:170px;
  filter: drop-shadow(30px 0 #90be6d) drop-shadow(160px 0 #90be6d) drop-shadow(120px 0 #90be6d);
}

.grass:before {
  content:"";
  position: absolute;
  border-top: 1px solid #90be6d;
  border-right: 6px solid #90be6d;
  width: 35px;
  height: 50px;
  border-top-right-radius: 100%;
  top:0;
  filter: drop-shadow(30px 0 #90be6d) drop-shadow(30px 0 #90be6d);
  left:-60px;
}

.grass:after {
  content:"";
  position: absolute;
  border-top: 1px solid #90be6d;
  border-right: 6px solid #90be6d;
  width: 20px;
  height: 35px;
  border-top-right-radius: 100%;
  top:20px;
  filter: drop-shadow(30px 0 #90be6d) drop-shadow(30px 0 #90be6d);
  left:-60px;
}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Easter Bunny/ Foldable Easter Card

CSS Egg Shape and CSS Easter eggs

CSS Background Stripes

Categories
Web development

CSS Easter Bunny/ Foldable Easter Card


CSS Easter Bunny/ Foldable Easter Card

To learn how to create the CSS Easter Bunny/ Easter Card follow the steps below and watch the video tutorial.

Demo:

*to see the animation on the website click here.

Step1.

Add HTML

<div class="easter-card">
  <div class="card-front">
    <div class="bottom"></div>
    <div class="easter-bunny">
      <div class="head"></div>
      <div class="ear-left"></div>
      <div class="ear-right"></div>
      <div class="paws"></div>
    </div>
  </div>
  <div class="card-inside">
    <div class="wishes">Just wanted to say a warm springtime hello and wish you a happy Easter!</div>
    <div class="easter-eggs">
      <div class="eggs"></div>
      <div class="basket"></div>
    </div>
  </div>
</div>

Step2.

Add CSS

Import the font:

Font source: Google Fonts

To read how to import the font in CSS click here.

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500&display=swap');

Set the position and the colour of the background and elements:

body {
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  font-family: 'Caveat', cursive;
  background-color: #b7b7a4;
}

.easter-card {
  position: relative;
  cursor: pointer;
  transform-style: preserve-3d;
	transform: perspective(2000px);
  transition: .5s;
}

Create the card:

.card-front {
  position: relative;
  background-color: #e9dfd1;
  width: 300px;
  height:300px;
  transform-origin: left;
  transition: .5s;
  box-shadow: inset 30px 10px 100px rgba(0,0,0,.1), 0 0 50px rgba(0,0,0,.1);
}

.card-inside {
  position: absolute;
  background-color: #e9dfd1;
  width: 300px;
  height:300px;
  z-index:-2;
  left:0;
  top:0;
  box-shadow: inset 30px 10px 100px rgba(0,0,0,.1), 0 0 50px rgba(0,0,0,.1);
}

Make the card open/ close on hover:

.easter-card:hover {
	transform: perspective(2000px) rotate(2deg);
}

.easter-card:hover .card-front {
  transform: rotateY(-160deg); 
  box-shadow: 0 10px 100px rgba(0,0,0,.1);
}
CSS Foldable Easter Card

Style the front of the card:

.bottom {
  position: absolute;
  background-color: #e66d68;
  width:300px;
  height: 90px;
  bottom:0;
  z-index:7;
}

.easter-card:hover .bottom {
  display: none;
}

.bottom:before {
  content:"Happy Easter!";
  position: absolute;
  color: white;
  font-size: 35px;
  width:100%;
  text-align: center;
  top:22px;
}

.easter-card:hover .easter-bunny {
  display: none;
}

.easter-bunny {
  position: absolute;
}

.head {
  position: absolute;
  background-color: white;
  width:130px;
  height: 150px;
  border-radius:50%;
  top:130px;
  left:85px;
  z-index:5;
}

.head:before {
  position: absolute;
  content:"";
  background-color: #333;
  width:25px;
  height:25px;
  border-radius:50%;
  top:40px;
  left:30px;
  box-shadow: 45px 0 #333;
}

.head:after {
  content:"";
  position: absolute;
  background-color: white;
  border-radius:50%;
  width:10px;
  height: 10px;
  left:35px;
  top:50px;
  box-shadow: 45px 0 white;
}
.ear-left, .ear-right {
  position: absolute;
}

.ear-left:before, .ear-left:after, .ear-right:before, .ear-right:after {
  content:"";
  position: absolute;
  border-radius: 55% 45% 70% 30% / 30% 30% 70% 70%;
}

.ear-left:before, .ear-left:after {
  transform: rotate(-20deg);
}

.ear-right:before, .ear-right:after {
  transform: rotate(20deg);
}

.ear-left:before, .ear-right:before {
  height: 145px;
  width:35px;
  background-color: white;
  top:10px;
}

.ear-left:before {
  left:90px;
}

.ear-right:before {
  left:180px;
}

.ear-left:after, .ear-right:after {
  background-color: #f7d9d1;
  width:20px;
  height: 130px;
  top:27px;
  box-shadow: inset -3px -3px rgba(0,0,0,.1);
}

.ear-left:after {
  left:100px;
}

.ear-right:after {
  left:183px;
}

.paws {
  position: absolute;
  background-color: #f7d9d1;
  width: 25px;
  height:15px;
  border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;
  top:193px;
  left:137px;
  z-index:10;
  box-shadow: inset 0 -3px rgba(0,0,0,.1);
}

.paws:before, .paws:after {
  content:"";
  position: absolute;
  background-color: white;
  border-radius:50%;
  width:50px;
  height: 50px;
  box-shadow: inset -3px -3px rgba(0,0,0,.1);
  top:-10px;
}

.paws:before {
  left:-80px;
}

.paws:after {
  left:50px;
}
HTML & CSS Easter Bunny

Style the inside part of the card:

.wishes {
  font-size: 20px;
  width:200px;
  margin-left:50px;
  margin-top:50px;
  color: #333;
}

.wishes:before {
  content:"xxx";
  position: absolute;
  top:130px;
  left:200px;
}

.easter-eggs {
  position: absolute;
  background-color: #333;
  width:150px;
  height:3px;
  border-radius:10px;
  top:85%;
  left:25%;
}

.easter-eggs:before {
  content:"";
  position: absolute;
  border: 3px solid #333;
  background-color: #333;
  border-radius: 0 0 20px 20px;
  width: 60px;
  height: 30px;
  top:-33px;
  left:30%;
}

.easter-eggs:after {
  content:"";
  position: absolute;
  border: 3px solid #333;
  background-color: #e9dfd1;
  width:70px;
  height:3px;
  border-radius:10px;
  top:-39px;
  left:27%;
}

.basket {
  position: absolute;
  border-radius: 100px 100px 0 0;
  border: 3px solid #333;
  width:60px;
  height: 40px;
  top:-82px;
  left:30%;
}

.basket:before {
  content:"";
  position: absolute;
  background-color: #e9dfd1;
  border-radius:10px;
  width: 35px;
  height: 3px;
  top:50px;
  left:20px;
  box-shadow: -10px 10px #e9dfd1, -5px 20px #e9dfd1;
}

.basket:after {
  content:"";
  position: absolute;
  width: 1px;
  height: 0;
  border-bottom: 8px solid #333;
  border-top: 8px solid #333;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  transform: rotate(-90deg);
  top:-8px;
  left:23px;
}

.eggs, .eggs:before, .eggs:after {
  position: absolute;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  width:20px;
  height:25px;
  border: 3px solid #333;
  background-color: #e9dfd1;
}

.eggs {
  top:-52px;
  left:50px;
  z-index:-1;
}

.eggs:before {
  content:"";
  left:27px;
  top:-5px;
}

.eggs:after {
  content:"";
  left:14px;
  top:-10px;
}
CSS Easter Bunny

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Egg Shape and CSS Easter eggs

CSS Heart in Envelope

Pure CSS Train Animation

Categories
Photoshop

How to create an Easter Egg in Photoshop?

Easter Egg in Photoshop

Follow the steps below and watch the video tutorial:

Step1.

CREATE AN EGG SHAPE

Fill the background of any colour you like (colour used in the tutorial: #fffffc). Use the Ellipse Tool and draw a circle. Fill the circle of any colour you like.

Easter Egg in Photoshop

Go to Edit–>Transform–>Wrap.

egg shape in Photoshop

Click on the top of the circle and holding the button move the mouse up:

egg shape in Photoshop

Step2.

ADD EGG PATTERN

Create the new layer. Use Pen Tool and draw kind of broken shell/ zigzag shape.

egg in Photoshop

Right click on the path and select Make Selection…

easter egg in Photoshop

Press Shift+Delete (in Mac OS) to fill the path (used colour in the tutorial: #fefae0). Use the Pen Tool again and draw a similar path on the top of the egg. Fill the path.

easter egg image

Create a new layer. Draw a triangle shape by using the Pen Tool in the middle of the egg. Fill the triangle (used colour in the tutorial: #ef6f51):

easter eggs in photoshop

Create a new layer. Draw a second triangle shape by using the Pen Tool on the top of the first triangle. Fill the triangle (used colour in the tutorial: #f4a261).

Create a new layer. Use the Ellipse Tool and draw two flat circles:

easter eggs

Create a new layer. Use the Ellipse Tool and draw two circles (used colour in the tutorial: #ffb4a2):

easter egg photoshop

Create a new layer. Use Rectangle Tool and draw a square. Fill the square (used colour in the tutorial: #f2cc8f). Drag this layer at the bottom of the Shell/ Zigzag path.

easter egg in photoshop

Hide the background and the egg layer by unticking the eyeballs in the layer panel. Right-click on the Rectangle layer and select Merge Visible.

egg in Photoshop

Make an egg layer visible (click on the eyeball).

Create Clipping Mask: Hold down Alt (Option in Mac OS), position the pointer over the line dividing two layers(rectangle layer and the egg layer) in the Layers panel (the pointer changes to two overlapping circles), and then click.

easter egg

Merge the visible layers:

easter egg in photoshop

Step3.

SHADOWS

Change the colour of the background (used colour in the tutorial: #8ecae6). Use the Ellipse Tool and draw the flat circle in black:

In the Layers panel, reduce the opacity of the circle to 20%:

easter egg in photoshop

Right-click on the rectangle layer and select Blending Options…:

Tick Inner Shadow and set the opacity to 40% and the Blend Mode to Multiply:

Easter Egg

Easter Egg is ready!

Easter Egg in Photoshop

Watch also the video tutorial:

Hey, here’s something that might interest you:

How to create a sparkle effect in Photoshop?

How to create a rainbow effect in Photoshop?

Categories
Adobe Illustrator

How to draw Easter eggs in Adobe Illustrator?

To create simple Easter Eggs in Adobe Illustrator follow the steps below and watch the video tutorial.

Easter Eggs Adobe Illustrator

Step1.

DRAW AN EGG

Create the new file. Use the Ellipse Tool and draw the circle. Choose the colour you like (colour used in tutorial #90be6d).

drawing Easter Eggs tutorial

By using the Direct Selection Tool select the top of the circle:

draw the easter eggs in adobe illustrator

And stretch a bit the top part of the circle by pulling the top of the circle up. We’ve got an egg shape!

egg shape in adobe illustrator

Step2.

ADD SHADOWS TO THE EGG

In the layers panel, duplicate the egg path twice.

easter eggs vector image

Move duplicate paths aside and put one on another. Select the duplicate paths by using the Selection Tool:

easter eggs

Go to the Properties panel on the right side of the screen and click on –>Pathfinder—>Click to Exclude option.

Easter eggs adobe illustrator

By using the Direct Selection Tool remove the top part of the new shape. Go to the Properties panel. Change the colour to black and reduce the opacity to 20%.

Fit the new shape on the egg path:

egg shape adobe illustrator

By using the Ellipse tool draw the flat ellipse on the bottom of the egg shape path:

draw an egg shape in adobe illustrator

Go to the Properties panel on the right side of the screen and reduce the opacity of the new shape to 20%.

Right-click on the new shape and go to Arrange and select Send to Back, to move the shape under the egg.

easter egg

Select the egg and shadow by Selection Tool. Go to Edit on the top of the page and select first copy and then paste. Copy the selected shapes twice and put them in line.

eggs in adobe illustrator
draw the eggs

Step3.

DECORATE EASTER EGGS

STRIPES

Duplicate the egg path and move aside:

draw an easter egg

By using Ellipse Tool draw three flat ellipses on the new egg path. Choose any colour you like (used colour in the tutorial: #f9c74f):

decorating easter eggs in adobe illustrator

Select all the new paths and click in the Properties panel on the right side of the screen—>Pathfinder—>Click to Exclude.

decorating an easter egg in adobe illustrator

By using the Direct Selection Tool remove unwanted parts of the new shape.

egg decoration

And fit the new shape to the first egg then right-click on the shadow path and go to Arrange–>Bring to Front. The first egg is done!

easter egg stripes

DOTS

Change the colour of the second egg (colour used in the tutorial: #f0716f):

dotted easter egg

Use the Ellipse Tool and draw small circles all over the second egg (colour used in the tutorial: #fdfcgc) then right-click on the shadow path and go to Arrange–>Bring to Front. The second egg is done!

STARS

Change the colour of the third egg (colour used in the tutorial #00afb9):

stars egg decoration

Duplicate the third egg path:

easter eggs

Move the duplicate path aside. Use the Star Tool and draw the stars all over the new egg path:

star tool adobe illustrator

Go to Properties panel–>Pathfinder—>and click on Click to Minus Front.

star tool

Change again the colour of the third egg (colour used in tutorial #fdfcdc) and fit the new shape to the egg then right-click on the shadow path and go to Arrange–>Bring to Front. Done!

easter eggs in adobe illustrator

Watch also the video tutorial:

Hey, here’s something that might interest you:

How to draw a paper plane in Adobe Illustrator?

How to wrap your text around a circle/ square in Adobe Illustrator?

Categories
CSS Web development

CSS Egg Shape and CSS Easter eggs

Easter is coming very soon and with the Easter coloured eggs. I love coming up with new Easter egg decorating ideas each year 🙂

CSS Easter Eggs
*to see the CSS Easter Eggs on the website click here.

Coloured eggs have become one of the most widely recognized Easter symbols, but did you know that coloured eggs are older than Easter?

Yes, in many cultures, the coloured egg is a symbol of new life fertility, and rebirth.

Today I’ll show you how to create the Egg shape in CSS using the border-radius property and some simple ideas how to style the CSS eggs.

Let’s start with the CSS Egg Shape:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style>

.egg {
   position: absolute;
   width: 140px;
   height: 200px;
   background-color: lightblue;
   border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
</style>

<body>
   <div class="egg"></div>
</body>
</html>

Output:

CSS Egg Shape

To style/ decorate the CSS eggs I used the CSS Gradients (check also CSS background stripes) and the CSS box-shadow property.

Demo:

Step1.

Add HTML

Create the container and add three eggs:

<div class="container">
  <div class="eggOne"></div>
  <div class="eggTwo"></div>
  <div class="eggThree"></div>
  <div class="shadow"></div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and the elements:

body {
  background-color: #bee3db;
  display: flex;
  justify-content:center;
  align-items: center;
  height: 100vh;
}

.container {
  position: relative;
}

Add the eggs:

.eggOne, .eggTwo, .eggThree {
   position: absolute;
   overflow:hidden;
   display: inline-block;
   width: 126px;
   height: 180px;
   box-shadow: inset -10px -10px rgba(0,0,0,0.1);
   top:-100px;
   border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

Style the first egg by using the linear gradient background:

.eggOne {
  left:-300px;
  background: repeating-linear-gradient(#f9c74f, #f9c74f 10px,
  #90be6d 10px, #90be6d 20px);
}

Style the second egg by using box-shadow property:

.eggTwo {
  left:-100px;
  background-color: #f94144;
}

.eggTwo:before {
  content:"";
  position:absolute;
  border-radius:50%;
  background-color: #fff;
  height:25px;
  width:25px;
  left:10px;
  box-shadow: 40px 20px #fff, 70px 60px #fff, 100px 30px #fff, 30px 175px #fff, 20px 60px #fff,-10px 95px #fff, -20px 135px #fff, 30px 135px #fff, 30px 95px #fff, 70px 105px #fff, -10px 40px #fff, 80px 155px #fff;
}

.eggTwo:after {
  content:"";
  position: absolute;
  box-shadow: inset -10px -10px rgba(0,0,0,0.02);
  width: 126px;
  height: 180px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

Style the third egg by using the linear gradient background:

.eggThree {
  left:100px;
  background: repeating-linear-gradient(-45deg, #70c1b3, #70c1b3 20px,
  #247ba0 20px, #247ba0 40px);
}

Add shadow to the eggs:

.shadow {
  position: absolute;
  background-color: rgba(0,0,0,0.1);
  border-radius:50%;
  z-index:-1;
  width:130px;
  height:20px;
  top:65px;
  left:-300px;
  box-shadow: 200px 0 rgba(0,0,0,0.1), 400px 0 rgba(0,0,0,0.1);
}

To see the CSS Easter Eggs on the website go to lenastanley.com.

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

Advanced CSS Border-radius/ Drop Shape, Lemon Shape, Leaf Shape & Egg Shape

CSS EASTER EGG ANIMATION

CSS Christmas Tree Animation