Categories
CSS Web development

CSS min-height Property



CSS min-height Property

The CSS min-height property specifies the minimum height of an element.

The CSS min-height property prevents the value of the height property from becoming smaller than the min-height.

Syntax:

min-width: length;

length – specifies the height in px, %, etc (read also Units in CSS).

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.example-1, .example-2 {
  background-color: #e9c46a;  
}

.example-2 {
  min-height: 150px;
}
</style>
</head>
<body>

<h4>*no min-height specified</h4>
<p class="example-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit...</p>

<h4>min-height: 150px:</h4>
<p class="example-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit...</p>

</body>
</html>

Output:

*no min-height specified

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit…

min-height: 150px:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit…


Enjoy coding!

Read also:

CSS min-width Property

CSS clear Property

CSS margin Property

Categories
CSS Web development

CSS max-height Property



CSS max-height Property

The CSS max-height property specifies the maximum height of an element.

If your content is larger than the maximum height, it will overflow. How the container will handle the overflowing content you can specify by the overflow property.

The CSS max-height property prevents the value of the height property from becoming larger than the max-height.

Syntax:

max-height: none|value;

none (default) – no maximum height specified.

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

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.example-1 {
  max-height: 70px;
  overflow: auto;
}
</style>
</head>
<body>

<h4>max-height: none;</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>

<h4>max-height: 70px;</h4>
<p class="example-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>

</body>
</html>

Output:

max-height: none;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.

max-height: 70px;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.


Enjoy coding!

Read also:

CSS max-width Property

CSS direction Property

CSS @import Rule

Categories
CSS Web development

CSS height Property



CSS height Property

The CSS height property settles the height of an element.

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

Demo:

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


Example

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

Syntax:

height: auto|value;

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

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

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.parent {
  height: 150px;
  width: 200px;
  border: 1px solid #333;  
}

.child {
  height: 50%;
  width: 50%;
  border: 1px solid red;  
}
</style>
</head>
<body>

<div class="parent">
  <div class="child">I'm the 50% height of my parent.</div>
</div>

</body>
</html>

Output:

I’m the 50% height of my parent.

Enjoy coding!

Read also:

CSS background Property

CSS caret-color Property

CSS filter Property

Categories
CSS Web development

CSS max-width Property


CSS max-width Property

The CSS max-width property specifies the maximum width of an element.

The CSS max-width property prevents the value of the width property from becoming larger than the max-width.

Syntax:

max-width: none|length;

none (default) – no maximum width specified.

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

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.example1, .example2 {
  background-color: #fed9b7; 
  display: inline-block; 
}

.example2 {
  max-width: 50%;
}
</style>
</head>
<body>

<h4>max-width: none;</h4>
<span class="example1">This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</span>

<h4>max-width: 50%;</h4>
<span class="example2">This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</span>

</body>
</html>

Output:

max-width: none;

This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.

max-width: 50%;

This is a paragraph.This is a paragraph. This is a paragraph. This is a paragraph.

Enjoy coding!

Read also:

CSS animation Property

CSS box-sizing Property

CSS clip-path Property

Categories
CSS Web development

CSS min-width Property


CSS min-width Property

The CSS min-width property specifies the minimum width of an element.

The CSS min-width property prevents the value of the width property from becoming smaller than the min-width.

Syntax:

min-width: length;

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

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.example1, .example2 {
  background-color: #fed9b7; 
  display: inline-block; 
}

.example2 {
  min-width: 400px;
}
</style>
</head>
<body>

<h4>*no min-width specified</h4>
<span class="example1">This is a paragraph.</span>

<h4>min-width: 400px;</h4>
<span class="example2">This is a paragraph.</span>

</body>
</html>

Output:

*no min-width specified

This is a paragraph.

min-width: 400px;

This is a paragraph.

Enjoy coding!

Read also:

CSS align-self Property

CSS clear Property

CSS flex Property

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