Categories
CSS Web development

CSS width Property


CSS width Property

The CSS width property settles the width of an element.

The CSS min-width and max-width properties override the width property.

Demo:

Click the “Try it” button to change the width of the DIV element:



CSS width Property


Note: the width of an element does not include margins, padding and borders.

Syntax:

width: auto|value;

auto (default) – the width is calculated by the browser.

value – specifies the width in px, %, etc (read also Units in CSS).

Example1:

<!DOCTYPE html>
<html>
<head>
<style>
.example1 {
  width: auto;
  border: 1px solid #333;
}

.example2 {
  width: 100px;
  border: 1px solid #333;  
}

.example3 {
  width: 50%;
  border: 1px solid #333;  
}
</style>
</head>
<body>

<h4>width: auto;</h4>
<div class="example1">This is a paragraph.</div>

<h4>width: 100px;</h4>
<div class="example2">This is a paragraph.</div>

<h4>width: 50%;</h4>
<div class="example3">This is a paragraph.</div>

</body>
</html>

Output:

width: auto;

This is a paragraph.

width: 100px;

This is a paragraph.

width: 50%;

This is a paragraph.

Enjoy coding!

Read also:

CSS columns Property

CSS filter Property

CSS @keyframes Rule

Categories
CSS Web development

CSS direction Property



CSS direction Property

The CSS direction property defines the text direction within a block-level element.

Demo:

Syntax:

direction: ltr|rtl;

ltr (default) – text direction goes from left-to-right.

rtl – text direction goes from right-to-left.

Example:

<!DOCTYPE html>
<html>
<head>
<style>

.example2 {
  direction: rtl;
}
</style>
</head>
<body>

<p>This text goes from left to right.</p>

<p class="example2">This text goes from right to left.</p>

</body>
</html>

Output:

This text goes from left to right.

This text goes from right to left.


Enjoy coding!

Read also:

CSS flex Property

CSS grid Property

CSS line-height Property

Categories
CSS HTML Web development

CSS Four Seasons Slider/ Animation


CSS Four Seasons Slider/ Animation

To learn how to create the CSS Four Seasons Slider/ 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="four-seasons">
  <div class="window">
      <div>
  <input type="radio" id="spring" name="slideshow" value="spring">
  <label class="spring" for="spring">
    <div class="r-button1"></div>
    <div class="flowers"></div>
  </label>
  </div>
      <div>
  <input type="radio" id="summer" name="slideshow" value="summer">
  <label class="summer" for="summer">
    <div class="r-button2"></div>
    <div class="sun"></div>
  </label>
  </div>
      <div>
  <input type="radio" id="autumn" name="slideshow" value="autumn">
  <label class="autumn" for="autumn">
    <div class="r-button3"></div>
    <div class="leaf"></div>
  </label>
  </div>
      <div>
 <input type="radio" id="winter" name="slideshow" value="winter">
  <label class="winter" for="winter">
    <div class="r-button4"></div>
    <div class="snow"></div>
  </label>
  </div>
  </div>
  <div class="window-sill"></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: #718355;
}

.four-seasons {
  position: relative;
}

Style the window:

.window {
  position: relative;
  overflow: hidden;
  width: 330px;
  height: 250px;
  border: 10px solid white;
}
.window-sill {
    position: absolute;
    width: 400px;
    height: 20px;
    border-radius: 20px;
    background-color: #dda15e;
    left:-26px;
    box-shadow: inset 2px 2px 10px rgba(0,0,0,.2), 15px 15px rgba(0,0,0,.2);
}

Style the radio buttons:

.r-button1, .r-button2, .r-button3, .r-button4 {
  position: relative;
  display: block;
  border-radius: 50%; 
  background-color: transparent;
  cursor: pointer;
  border: 3px solid #dad7cd;
  transition: .3s;
  width:10px;
  height: 10px;
  z-index:10;
  top:210px;
}

.r-button1:before, .r-button2:before, .r-button3:before, .r-button4:before {
  content:"";
  position: absolute;
  height:7px;
  width:7px;
  background-color: transparent;
  transform: translate(-50%, -50%);
  left:50%;
  top:50%;
  border-radius:50%;
}

.r-button1 {
  left:115px;
}

.r-button2 {
  left:145px;
}

.r-button3 {
  left: 175px;
}

.r-button4 {
  left: 205px;
}

input#spring:checked ~ .spring {
  display: block;
  z-index:1;
}

input#summer:checked ~ .summer {
  display: block;
  z-index:1;
}

input#autumn:checked ~ .autumn {
  display: block;
  z-index:1;
}

input#winter:checked ~ .winter {
  display: block;
  z-index:1;
}

input {
  opacity: 0;
  cursor: pointer;
  display: block;
  position: absolute;
  outline: none;
  left: 0;
  z-index: 10;
}

input[type=radio]:checked + label .r-button1:before {
  background-color: #dad7cd;
}
input[type=radio]:checked:hover + label .r-button1:before {
  background-color: #a3b18a;
}

input[type=radio]:hover + label .r-button1 {
  border-color: #a3b18a;
}

input[type=radio]:checked + label .r-button2:before {
  background-color: #dad7cd;
}
input[type=radio]:checked:hover + label .r-button2:before {
  background-color: #a3b18a;
}

input[type=radio]:hover + label .r-button2 {
  border-color: #a3b18a;
}

input[type=radio]:checked + label .r-button3:before {
  background-color: #dad7cd;
}
input[type=radio]:checked:hover + label .r-button3:before {
  background-color: #a3b18a;
}

input[type=radio]:hover + label .r-button3 {
  border-color: #a3b18a;
}

input[type=radio]:checked + label .r-button4:before {
  background-color: #dad7cd;
}
input[type=radio]:checked:hover + label .r-button4:before {
  background-color: #a3b18a;
}

input[type=radio]:hover + label .r-button4 {
  border-color: #a3b18a;
}

.spring, .summer, .autumn, .winter {
  position: absolute;
  width: 330px;
  height: 250px;
  transition: .3s;
}

Style and animate seasons:

.spring {
  background-color: #00b4d8;
}

.summer {
  background-color: #48cae4;
}

.autumn {
  background-color: #61a5c2;
}

.winter {
  background-color: #caf0f8;
}

.spring:before, .summer:before, .autumn:before, .winter:before {
  content:"";
  position: absolute;
  width:450px;
  height: 200px;
  border-radius:50%;
  left:-70px;
  top:160px;
}

.spring:after, .summer:after, .autumn:after, .winter:after {
  content:"";
  position: absolute;
  border-style: solid;
  border-width: 0 20px 60px 20px;
  top:65px;
  left:-2px;
}

.spring:before {
  background-color: #70e000;
  box-shadow: -150px -25px #38b000, 100px -30px #008000;
}

.summer:before {
  background-color: #38b000;
  box-shadow: -150px -25px #008000, 100px -30px #007200;
}

.autumn:before {
  background-color: #ca5310;
  box-shadow: -150px -25px #bb4d00, 100px -30px #8f250c;
}

.winter:before {
  background-color: #f8f9fa;
  box-shadow: -150px -25px #e9ecef, 100px -30px #dee2e6;
}

.window:before {
  content:"";
  position: absolute;
  background-color: #774936;
  width:7px;
  height: 10px;
  z-index:10;
  top:125px;
  left:15px;
  box-shadow: 30px 3px #774936, 170px 0 #774936, 270px 48px #774936;
}

.window:after {
    content:"";
    position: absolute;
    z-index:10;
    border-style: solid;
    border-width: 0 20px 60px 20px;
    border-color: transparent transparent #007f5f transparent;
    top: 70px;
    left:28px;
    filter: drop-shadow(240px 45px #007f5f);
}

.sun {
  position: absolute;
  border-radius:50%;
  width: 60px;
  height: 60px;
  background-color: #ffc300;
  left:50px;
  box-shadow: 0 0 50px #ffd60a;
  animation: sun 5s linear infinite;
}

.sun:before {
  content:"";
  position: absolute;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  left:7.5px;
  top: 7.5px;
  background-color: #f1dca7;
}

@keyframes sun {
  0% {
    box-shadow: 0 0 100px #ffd60a;
  }
  50% {
    box-shadow: 0 0 0 #ffd60a;
  }
}

.snow, .snow:before {
  position: absolute;
  border-radius:50%;
  width:5px; 
  height: 5px;
  background-color: #f8f9fa;
  box-shadow: 10px -20px #f8f9fa, 20px -30px #f8f9fa, 30px 30px #f8f9fa, -30px -30px #f8f9fa, 40px -20px #f8f9fa, 50px 20px #f8f9fa, 0 -30px #f8f9fa, 15px -60px #f8f9fa;
  filter: drop-shadow(50px -50px #f8f9fa) drop-shadow(150px -50px #f8f9fa) drop-shadow(200px -70px #f8f9fa) drop-shadow(50px -150px #f8f9fa) drop-shadow(0 -100px #f8f9fa);
  animation: snow 5s linear infinite;
}

.snow:before {
  content:"";
  animation-delay: 2.5s;
}

@keyframes snow {
  0% {transform: translateY(-50px);}
  100% {transform: translateY(300px);}
}

.spring:after {
  border-color: transparent transparent #38b000 transparent;
  filter: drop-shadow(170px 0 #38b000);
}

.summer:after {
  border-color: transparent transparent #008000 transparent;
  filter: drop-shadow(170px 0 #008000);
}

.autumn:after {
  border-color: transparent transparent #8d0801 transparent;
  filter: drop-shadow(170px 0 #8d0801);
}

.winter:after {
  border-color: transparent transparent #f8f9fa transparent;
  filter: drop-shadow(170px 0 #f8f9fa);
}

.flowers {
  position: absolute;
  width:5px;
  height: 10px;
  background-color: #fff;
  border-radius:10px;
  left:30px;
  top: 210px;
  filter: drop-shadow(50px -20px #ffd23f) drop-shadow(170px 0 #90e0ef) drop-shadow(40px 20px #ffb3c1);
}

.flowers:before {
    content:"";
    position: absolute;
    background-color: #fff;
    width:10px;
    height: 5px;
    border-radius: 10px;
    top:2.5px;
    left:-2.5px;
}

.leaf {
    position: absolute;
    background-color: #78290f;
    width: 15px;
    height: 15px;
    border-radius: 0 50% 0 50%;
    left:50px;
    animation: fall 5s linear infinite;
    box-shadow: 100px -50px #9e2a2b;
}

.leaf:before {
    content:"";
    position: absolute;
    border-radius: 50% 0 50% 0;
    width: 13px;
    height: 13px;
    background-color: #e09f3e;
    left:100px;
    animation-delay: 1s;
}

@keyframes fall {
  0% {top:-50px; transform: translateX(-50px) rotateX(180deg);}
  100% {top:250px; transform: translateX(150px) rotateX(-180deg);}
}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Window Rain (Blind Open/Close) Animation

CSS & JavaScript Bee Progress Bar

CSS Bubble Animation

Categories
CSS HTML JavaScript Web development

CSS Record Player (Play on click/ control the volume of the audio)


CSS Record Player (Play on click/ control the volume of audio)

To learn how to create the Record Player (Play on click/ control the volume of the audio) with CSS and JavaScript follow the steps below and watch the video tutorial.

Demo:

*to see the animation and play the audio on the website click here.

Step1.

Add HTML

Use the <audio> and <source> tags to link the audio/ music.

<div class="record-player">
  <input type="checkbox" id="headshell">
  <label class="headshell" for="headshell"></label>
  <audio id="player">
  <source src="https://lenadesign.org/wp-content/uploads/2022/03/Sunshine-Telecasted.mp3" type="audio/mpeg"/>
</audio>
  <input type="range" max="1" min="0" step="0.1" id="volume-control" onchange="audioVolume(this.value)">
  <div class="plinth"></div>
  <div class="platter"></div>
  <div class="vinyl"></div>
  <div class="top-circle"></div>
</div>

Step2.

Add CSS

Set the position and colour of the background and elements:

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

.record-player {
  position: relative;
}

Style the record player:

.plinth {
  position: relative;
  background-color: #760d19;
  width:400px;
  height: 300px;
  box-shadow: 3px 3px 5px rgba(0,0,0,.5);
  border-radius: 20px;
}

.plinth:before {
  content:"";
  position: absolute;
  width:395px;
  height: 295px;
  background-color: #c4222f;
  border-radius: 20px;
}

.plinth:after {
  content:"";
  position: absolute;
  border-radius: 50%;
  background-color: #2c2424;
  width: 30px;
  height: 30px;
  top:20px;
  left:20px;
  box-shadow: 0 230px #2c2424;
}
.platter {
  position: absolute;
  border-radius: 50%;
  width:270px;
  height: 270px;
  background-color: #d6d6d6;
  z-index:2;
  top:15px;
  left:15px;
}

.platter:before {
  content:"";
  position: absolute;
  border-radius: 50%;
  background-color: #d6d6d6;
  width:40px;
  height:40px;
  border: 10px solid #2c2424;
  left:280px;
  top:30px;
}

.vinyl {
  position: absolute;
  background-image: repeating-radial-gradient(#181312, #181312 10%, #2c2424 15%);
  border-radius:50%;
  width:250px;
  height:250px;
  z-index:5;
  top:25px;
  left:25px;
  overflow: hidden;
  box-shadow: 2px 2px 4px rgba(0,0,0,.5);
}

.vinyl:before, .vinyl:after {
  content:"";
  position: absolute;
  border-style: solid;
  border-color: rgba(255,255,255,.1) transparent transparent transparent;
  border-width: 130px 50px 0 125px;
}

.vinyl:after {
  top:170px;
  left:60px;
  transform: rotate(-65deg);
}

.top-circle {
  position: absolute;
  z-index:10;
  width:70px;
  height: 70px;
  background-color: #7a101c;
  border-radius:50%;
  top:115px;
  left:115px;
}

.top-circle:before {
  content:"";
  position: absolute;
  border-radius:50%;
  width:15px;
  height:15px;
  background-color: #181312;
  top:28px;
  left:28px;
}

Style the input range slider:

input#volume-control {
  -webkit-appearance: none; 
  width: 100%; 
  background-color: transparent; 
}

input#volume-control:focus {
  outline: none; 
}

input#volume-control::-ms-track {
  width: 100%;
  cursor: pointer;
  background: transparent; 
  border-color: transparent;
  color: transparent;
}

input#volume-control {
  position: absolute;
  z-index:1;
  transform: rotate(-90deg) scale(.25);
  left:40%;
  top:70%;
}

input#volume-control::-webkit-slider-thumb {
   -webkit-appearance: none;
   cursor: pointer;
   width: 40px;
   height:70px;
   background-color: #333533;
   border: none;
   border-radius:2px;
   margin-top:-4px;
}

input#volume-control::-moz-range-thumb {
   cursor: pointer;
   width: 30px;
   height:70px;
   background-color: #333533;
   border: none;
   border-radius:2px;
}

input#volume-control::-ms-thumb {
  cursor: pointer;
   width: 30px;
   height:70px;
   background-color: #333533;
   border: none;
   border-radius:2px;
}

input#volume-control::-webkit-slider-runnable-track {
  background-color: #d6d6d6;
  border:none;
  margin:-30px; 
}

input#volume-control::-moz-range-track {
  background-color: #333533;
  border:30px solid black;
  outline:2px solid #d6d6d6;
}

Style and animate the headshell:

input#headshell {
  display: none;
}
.headshell {
  width: 30px;
  height: 140px;
  position: absolute;
  border-right: 10px solid #ffffff;
  border-bottom: 10px solid #ffffff;
  border-bottom-right-radius: 50px;
  z-index:15;
  left: 290px;
  top: 80px;
  cursor: pointer;
  transition: .3s;
  transform-origin: top;
}

.headshell:before, .headshell:after {
  content:"";
  position: absolute;
}

.headshell:before {
  background-color: black;
  width:20px;
  height:30px;
  top:-20px;
  left:25px;
}

.headshell:after {
  height:0;
  width:15px;
  border-top: 25px solid #b2aea6;
  border-right: 2px solid transparent;
  border-left: 2px solid transparent;
  top:133px;
  left:-20px;
  transform: rotate(90deg);
}

#headshell:checked + .headshell {
  transform: rotate(35deg);
}

@keyframes play  {
  to {transform: rotate(360deg);}
}

#headshell:checked ~ .vinyl {
  animation: play 2s linear infinite .3s;
}

Step3.

Add JavaScript

To play/ pause the audio on click:

let input = document.getElementById("headshell");
let audio = document.getElementById("player");

input.addEventListener("click", function(){
  if(audio.paused){
    audio.play();
    audio.currentTime = 0;
    input.innerHTML = "Pause";
  } else {
    audio.pause();
    input.innerHTML = "Play";
  }
});

To control the volume of the audio:

function audioVolume(amount) {
  let changevolume = document.getElementsByTagName("audio")[0];
  changevolume.volume = amount;
}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Christmas Animation

CSS Spooky House Animation

CSS Coffee Express Animation

Categories
CSS HTML JavaScript Web development

CSS Music Box (play/ pause audio on click)


CSS Music Box (play/ pause audio on click)

To learn how to create the CSS Music Box follow the steps below.

Demo:

*to see the animation and listen to the audio on the website click here.

*music source: (free music) youtube audio library – Fur Elise (by Beethoven).

Step1.

Add HTML

Use the <audio> and <source> tags to link the audio/ music.

    <div class="music-box">
        <input type="checkbox" id="music">
        <label class="music" for="music"></label>
        <audio id="player">
  <source src="https://lenadesign.org/wp-content/uploads/2022/03/Fur-Elise-by-Beethoven-Beethoven.mp3" type="audio/mpeg"/>
</audio>
      <div class="box-inside">
        <div class="ballerina">
            <div class="head"></div>
            <div class="skirt"></div>
            <div class="legs"></div>
            <div class="right-arm"></div>
            <div class="left-arm"></div>
        </div>
      <div class="inner"></div>
      </div>
      <div class="box"></div>
      <div class="shadow"></div>
    </div>

Step2.

Add CSS

Set the position and colour of the background and elements:

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

.music-box {
  position: relative;
  top:-150px;
}

Style and animate the ballet dancer:

.ballerina {
            position: absolute;
            filter: drop-shadow(1px 0 rgba(0,0,0,.3));
            z-index:2;
            left: 3px;
            top:20px;
            animation: rotate 5s linear infinite reverse;
        }

.ballerina:before {
            content:"";
            position: absolute;
            width:7px;
            height:10px;
            border-radius: 10px 10px 0 0;
            background-color: #3c3f48; 
            top:125px;
            left:4px;
            box-shadow: 0 3px #333;
        }

@keyframes rotate {
            to {transform: rotateY(360deg);}
        }

.head {
            position: absolute;
            background-color: #f8f9fa;
            border-radius:50%;
            width: 20px;
            height: 23px;
        }

.head:before, .head:after {
            position: absolute;
            content:"";
            background-color: #f8f9fa;    
        }
        

.head:before {
            border-radius:50%;
            width:12px;
            height: 12px;
            top:-3px;
        }
        

.head:after {
            width:5px;
            height: 15px;
            top:12px;
            left:7px;
        }

.skirt {
            position: absolute;
            background-color: #f8f9fa;   
            width: 15px;
            height: 40px;
            border-radius: 50px;
            top:25px;
            left:2px;
        }
        

.skirt:before, .skirt:after {
            content:"";
            position: absolute;
            background-color: #f8f9fa; 
            border-radius:50%;
        }

.skirt:before {
            width:60px;
            height:10px;
            top:30px;
            left:-22px;
        }
        

.skirt:after {
            width: 10px;
            height:10px;
            top:33px;
            left:-24px;
            box-shadow: 9px 3px #f8f9fa, 18px 5px #f8f9fa, 27px 7px #f8f9fa, 36px 5px #f8f9fa, 45px 3px #f8f9fa, 54px 0 #f8f9fa, 18px 0 #f8f9fa, 27px 0 #f8f9fa, 24px 0 #f8f9fa, 33px 0 #f8f9fa, 42px 0 #f8f9fa;
        }

.legs {
            position: absolute;
            background-color: #f8f9fa; 
            width:5px;
            border-radius:20px;
            height: 60px;
            top:65px;
            left:5px;
        }

.legs:before, .legs:after {
            content:"";
            position: absolute;
            border-radius:20px;
            background-color: #f8f9fa; 
            width:5px;
        }

.legs:before {
            height:30px;
            transform: rotate(-55deg);
            top:-5px;
            left:15px;
        }

.legs:after {
            transform: rotate(55deg);
            height:30px;
            top: 10px;
            left:15px;
        }

.right-arm, .left-arm {
            position: absolute;
            background-color: #f8f9fa; 
            border-radius: 20px;
            width:5px;
            height: 30px;
            top:7px;
        }

.right-arm {
            left:22px;
            transform: rotate(50deg);
        }

.left-arm {
            transform: rotate(-50deg);
            left:-8px;
        }

.right-arm:before, .left-arm:before {
            content:"";
            position: absolute;
            background-color: #f8f9fa; 
            border-radius: 20px;
            width:5px;
            height:30px;
        }

.right-arm:before {
            transform: rotate(-90deg);
            top:-15px;
            left:-12px;
        }

.left-arm:before {
            transform: rotate(-90deg);
            top:-15px;
            left:12px;
}

Style the box:

.box-inside {
  position: absolute;
  transition: .5s;
  top:110px;
  left:-10px;
}

.inner {
  background-color: #1a232a;
  position: absolute;
  width:200px;
  height:40px;
  border-radius: 20px 20px 0 0;
  top:158px;
  left:-95px;
}

.box {
  position: absolute;
  width: 270px;
  background-color:#7c293d;
  height:140px;
  top:170px;
  left:-145px;
  z-index:3;
  border-radius: 0 0 5px 5px;
}

.box:before {
  content:"Music Box";
  position: absolute;
  font-size: 30px;
  font-family: "Brush Script MT", cursive;
  bottom: 10px;
  right:15px;
}
.music {
  position: absolute;
  width:270px;
  background-color: #8d334d;
  height: 50px;
  border-radius: 10px 10px 0 0;
  z-index:10;
  top:120px;
  left:-145px;
  transform-origin: left;
  transition: .5s;
  cursor: pointer;
}

Add the shadow:

.shadow {
  position: absolute;
  background-color: rgba(0,0,0,.3);
  width:350px;
  height: 30px;
  border-radius: 50%;
  top:300px;
  left:-185px;
  transition: .5s;
  transform-origin: right;
}

Use the input type=”checkbox” to animate the music box on click:

input#music {
  display: none;
}
#music:checked + .music {
  transform: rotate(-125deg) translateX(-20px) translateY(-30px);
}

#music:checked ~ .box-inside {
  transform: translateY(-115px);
}

#music:checked ~ .shadow {
  transform: scaleX(1.4);
}

Step3.

Add JavaScript

To play/ pause the audio on click:

let input = document.getElementById("music");
let audio = document.getElementById("player");

input.addEventListener("click", function(){
  if(audio.paused){
    audio.play();
    audio.currentTime = 0;
    input.innerHTML = "Pause";
  } else {
    audio.pause();
    input.innerHTML = "Play";
  }
});

Enjoy coding!

Hey, here’s something that might interest you:

CSS Christmas Card (Open/ Close on Click)

CSS diamond ring (open/ close on click)

CSS & jQuery Calculator

Categories
CSS HTML Web development

CSS treadmill/ runner animation


CSS treadmill/ runner animation

To learn how to create the CSS treadmill/ runner 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="treadmill-animation">
        <div class="treadmill">
            <div class="base"></div>
            <div class="legs"></div>
            <div class="legs-behind"></div>
          <div class="panel"></div>
        </div>
        <div class="runner">
        <div class="runner-body"></div>
        <div class="right-arm"></div>
        <div class="left-arm"></div>
        <div class="runner-legs">
            <div class="right-leg">
                <div class="right-calf">
                    <div class="right-shoe"></div>
                </div>
            </div>
            <div class="left-leg">
                <div class="left-calf">
                    <div class="left-shoe"></div>
                </div>
            </div>
        </div>
        <div class="runner-face">
            <div class="hair"></div>
            </div>
        </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: #4b3f72;
    }
    .treadmill-animation {
        position: relative;
        top:-50px;
        left:-50px;
    }

Style and animate the runner:

   .runner {
        position: absolute;
        left:-50px;
        top:7px;
        animation: jump .25s linear infinite;
    }

@keyframes jump {
  0% {transform: translateY(0);}
  50% {transform: translateY(-15px);}
}
    .runner-body {
        position: absolute;
        z-index:5;
        width:50px;
        height: 30px;
        border-radius:0 0 50px 50px;
        background-color: #119da4;
        top:-10px;
        left:-20px;
        transform: rotate(10deg);
    }
    .runner-body:before {
        content:"";
        position: absolute;
        background-color: #1d4e89;
        border-radius: 50px 50px 0 0;
        width:50px;
        height: 80px;
        top:-80px;
    }
    .runner-body:after {
        content:"";
        position: absolute;
        background-color: #e6b8a2;
        width: 25px;
        height: 40px;
        border-radius:30px;
        left:15px;
        top:-107px;
    }

    .right-arm, .left-arm, .right-arm:before, .left-arm:before {
        position: absolute;
        width:20px;
        height: 60px;
        border-radius: 30px;
        transform-origin: top;
    }
    .right-arm, .left-arm {
        top:-75px;
        left:0;
        animation: move .5s linear infinite;
    }
    .right-arm {
        background-color: #edc4b3;
        z-index:7;  
    }
    .left-arm {
        background-color: #deab90;
        z-index:-3;
        animation-delay: .25s;    
    }
    .right-arm:after, .left-arm:after {
        content:"";
        position: absolute;
        border-radius:50%;
        width: 25px;
        height: 25px;
        top:75px;
        left:35px;
      
    }
    .right-arm:before, .right-arm:after {
        background-color: #edc4b3;
    }
    .left-arm:before, .left-arm:after {
        background-color: #deab90;
    }
    .right-arm:before, .left-arm:before {
        content:"";
        top: 45px;
        left:-5px;
        transform: rotate(-45deg);
    }
    
    @keyframes move {
         0%, 100% {transform: rotate(65deg);}
        15% {transform: rotate(55deg);}
        50% {transform: rotate(-35deg);}
        75% {transform: rotate(-45deg);}
    }

.runner-legs {
        position: absolute;
        transform: rotate(20deg);
        z-index:4;
    }
    .right-leg, .left-leg, .right-calf, .left-calf, .right-shoe, .left-shoe {
        position: absolute;
        transform-origin: top;
    }
    .right-leg, .left-leg, .right-calf, .left-calf {
        width:22px;
        height: 70px;
    }
    .right-leg, .left-leg {
        border-radius:0 0 20px 20px;
        animation: run .5s linear infinite;
    }
.right-leg {
        background-color: #edc4b3;
        z-index:5;
        box-shadow: inset 0 40px #119da4;
    }
.left-leg {
        background-color: #deab90;
        box-shadow: inset 0 40px #19647e;
        animation-delay: .25s;
      z-index:2;
    }
.right-calf, .left-calf {
        top:57px;
        animation: calf .5s linear infinite;
        transform: rotate(75deg);
    }
.right-calf {
        background-color: #edc4b3;
    }
    .left-calf {
        background-color: #deab90;
        animation-delay: .25s;
    }
    .right-shoe, .left-shoe {
        width: 50px;
        height: 20px;
        border-radius: 0 30px 0 0;
        overflow: hidden;
        top: 50px;
    }
    .right-shoe {
        background-color: #e6dcd7;
        box-shadow: inset 0 -7px #b8475d;
    }
    .left-shoe {
        background-color: #cdb9ae;
        box-shadow: inset 0 -7px #83203e;
    }
    .right-shoe:before, .left-shoe:before {
        content:"";
        position: absolute;
        background-color: #333;
        height:2px;
        width:10px;
        top:0;
        left:37px;
        box-shadow: -3px -5px #333, -6px -10px #333;
        transform: rotate(-75deg);
    }

    @keyframes run {
        0%, 100% {transform: rotate(-65deg);}
        15% {transform: rotate(-55deg);}
        50% {transform: rotate(35deg);}
        75% {transform: rotate(45deg);}
        
    }
    @keyframes calf {
        0%, 100% {transform: rotate(75deg);}
        15% {transform: rotate(0deg);}
        50% {transform: rotate(0);}
        75% {transform: rotate(55deg);}
    }
    
    .runner-face {
        position: absolute;
        background-color: #edc4b3;
        z-index:8;
        width:45px;
        height:50px;
        top:-145px;
        left:12px;
        border-radius:0 0 20px 5px;
        transform: rotate(5deg);
    }
    
    .runner-face:before, .runner-face:after {
        content:"";
        position: absolute;
        border-radius:50%;
    }
    .runner-face:before {
        width:5px;
        height:10px;
        top:15px;
        left:25px;
        background-color: #333;
        box-shadow: 10px 0 #333;
    }
    .runner-face:after {
        width:10px;
        height:10px;
        left:27px;
        top:30px;
        background-color: #c38e70;
        animation: scale .25s linear infinite;
    }
    @keyframes scale {
        0%,100% {transform: scale(1);}
        50% {transform: scale(.7);}
    }
    .hair {
        position: absolute;
        z-index:5;
        background-color: #774936;
        width: 57px;
        height:17px;
        border-radius: 10px 0 20px 0;
        top:-5px;
        left:-2px;
    }
    .hair:before, .hair:after {
        content:"";
        position: absolute;
    }
    .hair:before {
        background-color: #774936;
        width:12px;
        height:20px;
        border-radius:0 0 15px 0;
        top:15px;
    }

Style and animate the treadmill:

   .treadmill {
        position: relative;
    }
    
    .base {
        position: absolute;
        overflow: hidden;
        width: 500px;
        height: 50px;
        border-radius: 50px;
        background-color: #6c757d;
        top:135px;
        left:-200px;
        border: 5px solid #333;
    }
    
    .base:before {
        content:"";
        position: absolute;
        width: 500px;
        height:5px;
        top:70px;
        background-color: #333;
        box-shadow: 0 0 #333, 0 -7px #333, 0 -14px #333, 0 -21px #333, 0 -28px #333, 0 -35px #333, 0 -42px #333, 0 -49px #333,0 -56px #333, 0 -63px #333, 0 -70px #333, 0 -77px #333, 0 -84px #333, 0 -91px #333, 0 -98px #333, 0 -105px #333;
        animation: mill .25s linear infinite;
    }
    .base:after {
        content:"";
        position: absolute;
        border: 5px solid #333;
        top:-5px;
        left:-5px;
        width:380px;
        height:50px;
        background-color: #343a40;
        border-radius: 50px;
    }
    
@keyframes mill {
  0% {transform: translateY(0);}
  100% {transform: translateY(35px);}
}

.legs, .legs:before, .legs-behind:before, .legs-behind:after {
  position: absolute;
  width:25px;
}

.legs, .legs-behind:before {
   height:180px;
   transform: skew(15deg);
}
    
.legs {
   background-color: #212529;
   top:25px;
   z-index:7;
   left:115px;
}

.legs:before, .legs-behind:after {
  height:10px;
}
    
.legs:before {
        content:"";
        background-color: #212529;
        left:-280px;
        top:170px;
    }

.legs-behind {
  position: absolute;
  width:500px;
  height:50px;
  background-color: rgba(0,0,0,.2);
  border-radius:50%;
  top:170px;
  z-index:-4;
  left:-200px;
}

.legs-behind:before {
  content:"";
  background-color: #adb5bd;
  top:-150px;
  left:400px;
}

.legs-behind:after {
        content:"";
        background-color: #adb5bd;
        left:120px;
        transform: skew(15deg);
        top:20px;
    }

.panel {
  position: absolute;
  width: 200px;
  height: 25px;
  background-color: #adb5bd;
  z-index:8;
  border-radius:30px;
  left:40px;
  box-shadow: inset -100px 0 #6c757d;
}

.panel:before, .panel:after {
  content:"";
  position: absolute;
}

.panel:before {
  width: 60px;
  height:25px;
  background-color: #343a40;
  top:-25px;
  left:90px;
  border-radius:0 25px 0 0;
}

.panel:after {
  border-style: solid;
  border-width: 30px 0 25px 30px;
  border-color: transparent transparent #343a40 transparent;
  height:0;
  width:0;
  top:-55px;
  left:60px;
}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Cyclist /Bike Animation

CSS Car Animation

CSS Paper Plane Animation

Categories
CSS HTML JavaScript Web development

CSS Polaroid/ Camera (press the button to take a photo)


CSS Polaroid/ Camera Animation

To learn how to create the CSS & JavaScript Polaroid/ Camera Animation follow the steps below and watch the video tutorial.

Demo:

Press the button to take a photo:

*to see the animation on the website click here.

Step1.

Add HTML

  <div class="polaroid-camera">
  <button id="button"></button>
  <div id="circle"></div>
  <div class="lens">
    <div class="reflection"></div>
  </div>
  <div class="flash"></div>
  <div class="stripes"></div>
  <div class="bottom">
    <div class="bottom-front"></div>
  </div>
  <div class="slot"></div>
  <div class="shadow"></div>
  <div id="photo" class="photo">
    <div class="house">
      <div class="windows"></div>
    </div>
  </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: #04a5b2;
  overflow: hidden;
}

.polaroid-camera {
  position: relative;
  top:-50px;
}

Style the camera:

.polaroid-camera:before, .polaroid-camera:after {
  content:"";
  position: absolute;
  transform: translate(-50%,-50%);
  left:0;
  top:50%;
  background-color: #faedcd;
  width:300px;
}

.polaroid-camera:before {
  border-radius: 30px 30px 0 0;
  box-shadow: inset 0 45px #fefae0;
  height:150px;
}

.polaroid-camera:after {
  height:40px;
  top:-10px;
}

button {
  position: absolute;
  width:50px;
  height:20px;
  transition: .2s;
  border-radius: 10px 10px 0 0;
  background-color: #003049;
  border: none;
  top:-95px;
  left:50px;
  transform-origin: bottom;
  cursor: pointer;
  z-index:125;
}

button:active {
  transform: scaleY(.5);
}

.lens {
  position: absolute;
  border-radius:50%;
  border:5px solid #333;
  background-color: white;
  width:115px;
  height:115px;
  z-index:1;
  transform: translate(-50%,-50%);
  top:50%;
  left:0;
}

.lens:before, .lens:after {
  content:"";
  position: absolute;
  border-radius:50%;
  transform: translate(-50%,-50%);
  top:50%;
  left:50%;
}

.lens:before {
  border: 10px solid #333;
  width:90px;
  height:90px;
  background-color: #006494;
}

.lens:after {
  border:10px solid #0582ca;
  width: 40px;
  height:40px;
  background-color: #003554;
}

.reflection, .reflection:before, .reflection:after {
  position: absolute;
  border-radius:50%;
}

.reflection {
  background-color: rgba(255,255,255,.8);
  width: 15px;
  height:15px;
  top:50px;
  left:60px;
  z-index:2;
}

.reflection:before {
  content:"";
  width:115px;
  height:115px;
  background-color: rgba(255,255,255,.1);
  top:-50px;
  left:-60px;
}

.reflection:after {
  content:"";
  width:20px;
  height:20px;
  background-color: rgba(255,255,255,.4);
  top:35px;
  left:-30px;
  box-shadow: 40px -73px rgba(255,255,255,.4);
}

.flash {
  position: absolute;
  width:40px;
  height:40px;
  background-color: #333;
  border-radius: 5px;
  z-index:4;
  left:85px;
  top:-40px;
}

.flash:before, .flash:after {
  content:"";
  position: absolute;
  border-radius:50%;
  transform: translate(-50%,-50%);
  top:50%;
  left:50%;
}

.flash:before {
  border: 5px solid #006494;
  width:20px;
  height:20px;
  background-color: #0582ca;
}

.flash:after {
  background-color: #003554;
  width:8px;
  height:8px;
  box-shadow: 8px -5px rgba(255,255,255,.3);
}

.stripes {
  position: absolute;
  width:14.5px;
  height:20px;
  background-color: #e02846;
  top:55px;
  box-shadow: -14.5px 0 #568760;
}

.stripes:before, .stripes:after {
  content:"";
  position: absolute;
  border-radius: 50%;
}

.stripes:before {
  width: 30px;
  height:30px;
  background-color: #333;
  left:50px;
  top:-20px;
}

.stripes:after {
  border:5px solid #ba181b;
  background-color: #a4161a;
  left:-130px;
  top:-40px;
  width: 30px;
  height: 30px;
}

.bottom {
  position: absolute;
  perspective: 250px;
  z-index:10;
}

.bottom:before, .bottom:after {
  content:"";
  position: absolute;
  height:30px;
  transform: rotateX(45deg);
  top:73px;
}

.bottom:before {
  background-color: #e0d0a6;
  width:314px;
  left:-157px;
}

.bottom:after {
  width: 15px;
  background-color: #a71e34;
  box-shadow: -15px 0 #3a5a40;
}

.bottom-front {
  position: absolute;
  background-color: #ebd9ae;
  width:328px;
  height:15px;
  top:102px;
  left:-164px;
}

.bottom-front:before {
  content:"";
  position: absolute;
  width: 15.5px;
  height: 15px;
  left:164px;
  background-color: #e02846;
  box-shadow: -15.5px 0 #568760;
}

.bottom-front:after {
  content:"";
  position: absolute;
  width:328px;
  height:50px;
  border-radius:0 0 20px 20px;
  background-color: #540b0e;
  top:15px;
}

.slot {
  position: absolute;
  background-color: #220901;
  width: 270px;
  transform: translate(-50%,-50%);
  border-radius: 10px 10px 0 0;
  height:15px;
  z-index:11;
  top:159px;
}

.shadow {
  position: absolute;
  width: 400px;
  height:70px;
  background-color: rgba(0,0,0,.3);
  border-radius:50%;
  top:120px;
  left:-200px;
  z-index:-4;
}

Style the photo:

.photo {
  z-index:-1;
  transform: translate(-50%,-50%);
  top:50px;
  position: absolute;
  border-style: solid;
  border-color: white;
  width:170px;
  height: 160px;
  border-top-width: 10px;
  border-bottom-width: 35px;
  border-left-width:10px;
  border-right-width:10px;
  background-color: #fbb13c;
  overflow: hidden;
}

.photo:before, .photo:after {
  content:"";
  position: absolute;
  border-radius: 50%;
}

.photo:before {
  background-color: #faf0ca;
  width:25px;
  height: 25px;
  top:20px;
  left: 120px;
}

.photo:after {
  background-color: #cc5803;
  width:35px;
  height: 35px;
  top:70px;
  left:30px;
  box-shadow: 20px 20px #cc5803, -20px 25px #cc5803, 0 30px #cc5803, -40px 70px #cc5803;
}

.house {
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: #faf0ca;
  box-shadow: 40px 0 #f2a65a, 60px 0 #f2a65a;
  top:125px;
  left:70px;
  z-index:101;
}

.house:before {
  content:"";
  position: absolute;
  border-bottom: 25px solid #031926;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  width:0;
  height:0;
  top:-25px;
}

.house:after {
  content:"";
  position: absolute;
  background-color: #cc5803;
  width:60px;
  height: 25px;
  transform: skew(40deg);
  left:30px;
  top:-25px;
}

.windows {
  position: absolute;
  width:15px;
  height:25px;
  border-radius: 10px 10px 0 0;
  background-color: #772f1a;
  top:10px;
  left:10px;
}

.windows:before {
  content:"";
  position: absolute;
  border-radius: 10px 10px 0 0;
  width: 10px;
  height:15px;
  background-color: #031926;
  left:45px;
  box-shadow: 25px 0 #031926;
}

.windows:after {
  content:"";
  position: absolute;
  width:5px;
  height: 60px;
  background-color: #031926;
  left:-35px;
  top:-35px;
  border-radius:10px;
}

Add flash animation (the animation will work after adding JavaScript):

.flash-animation {
  animation: flash-animation .2s ease;
}

#circle {
  position: absolute;
  background-color: rgba(255,255,255,.4);
  width: 100px;
  height:100px;
  border-radius:100%;
  z-index:5;
  top:-70px;
  left:55px;
  opacity:0;
}

Add animation for a photo (the animation will work after adding JavaScript):

@keyframes eject-photo {
  0% {transform: translateY(0);left:-95px;}
  100% {transform: translateY(115px); left:-95px;}
}

.eject-photo {
  animation: eject-photo .6s ease forwards .3s;
}

Step3.

Add JavaScript

let light = document.getElementById('circle');

document.getElementById('button').addEventListener('click', () => {
  light.classList.remove('flash-animation');
  setTimeout(function(){
  light.classList.add('flash-animation');
  },500);
});

let eject = document.getElementById('photo');

document.getElementById('button').addEventListener('click', () => {
  eject.classList.remove('eject-photo');
  setTimeout(function(){
  eject.classList.add('eject-photo');
  },500);
});

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Slide Text Animation/ Sliding Text Effect

CSS Windmill Animation

Pure CSS Valentine’s Day Animation

Categories
CSS HTML Web development

CSS Gradient Stroke Effect


To create the CSS Text with Gradient Stroke follow the steps below and watch the video tutorial.

CSS Gradient Stroke

Demo:

*to see the text on the website click here.

Step1.

Add HTML

<div class="gradient-stroke">GRADIENT STROKE</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=Righteous&display=swap');

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

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

Style the text:

.gradient-stroke {
  font-size:80px;
  font-family: 'Righteous', cursive;
  background-image: linear-gradient( 69.7deg,  rgba(244,37,243,1) 1.4%, rgba(244,87,1,1) 36.2%, rgba(255,204,37,1) 72.2%, rgba(20,196,6,1) 113%);
  -webkit-background-clip: text;
  -webkit-text-stroke-color: transparent;
  -webkit-text-stroke-width: 10px;
  padding: 10px;
  letter-spacing:5px;
  filter: brightness(1.3);
}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

How to add stroke/ outline to the text in CSS?

How to create a transparent text with stroke in CSS?

SVG Stroke & Fill Animation

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