Categories
Web development

CSS Printer Animation


To learn how to create the CSS Printer 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="printer-animation" class="printer-animation">
  <div class="printer">
  <input id="button" type="checkbox"> 
    <label class="button" for="button"></label>
    <div class="top"></div>
    <div class="middle"></div>
    <div class="trace"></div>
    <div class="paper">
    </div>
  </div>
  </div>

Step2.

Add CSS

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

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

input#button {
  display: none;
}

.printer-animation, .printer {
  position: relative;
  top:-35px;
}

Style the printer:

.top {
  position: absolute;
  background-color: #282c30;
  width: 160px;
  height:70px;
  border-radius: 20px 20px 0 0;
  border:5px solid black;
  transform: translate(-50%,-50%);
  left: 50%;
  top: 50%;
  box-shadow: inset 20px 0 #1e2124;
  z-index:-1;
}

.middle {
  position: absolute;
  background-color: #4a4f55;
  border: 5px solid black;
  width: 250px;
  height:100px;
  border-radius: 20px;
  top:30px;
  left:-130px;
  box-shadow: inset 20px 0 #373b3d;
  z-index:5;
}

.trace, .trace:before {
  position: absolute;
  background-color: #282c30;
}

.trace {
  border:5px solid black;
  width: 160px;
  height: 80px;
  border-radius: 10px;
  left:-85px;
  top:110px;
  box-shadow: inset 0 35px #1e2124;
  z-index:2;
}

.trace:before {
  content:"";
  width: 60px;
  height: 20px;
  border-radius: 0 0 10px 10px;
  top:80px;
  left:45px;
  border-bottom: 5px solid black;
  border-right: 5px solid black;
  border-left: 5px solid black;
}

.trace:after {
  position: absolute;
  content:"";
  width: 5px;
  height: 50px;
  background-color: black;
  left: 20px;
  top:15px;
  box-shadow: 60px 0 black, 115px 0 black;
}

.paper {
  position: absolute;
  border: 5px solid black;
  background-color: white;
  width:120px;
  height: 140px;
  top:-70px;
  left: -65px;
  z-index:3;
}

.button {
  position: absolute;
  z-index:30;
  border-radius: 50%;
  border: 5px solid black;
  background-color: #fd6e49;
  width:15px;
  height: 15px;
  left: 90px;
  cursor: pointer;
  top:45px;
  animation: pulse 1.5s infinite;
}

.button:active {
  background-color: #52dc97;
}

.button:hover {
  animation: none;
}

.paper:before {
  content:"Don't forget to smile :)";
  position: absolute;
  font-family: arial;
  text-align: center;
  top: 50px;
  transform: scaleY(-1);
  opacity:0;
}

Animate the button and the paper:

input#button:checked ~ .paper {
  animation: print 2.2s linear forwards;
}

input#button:checked ~ .paper:before {
  animation: display 2.2s linear forwards;
}

@keyframes print {
  0% {transform: translateY(0);z-index:3;}
  50% {transform: translateY(200px);z-index:3;}
  79% {transform: translateY(200px);z-index:3;}
  90% {transform: translateY(200px) rotateX(-90deg);z-index:3;}
  95% {transform: translateY(50px) scale(2);z-index:50;}
  100% {transform: translateY(50px) scale(2);z-index:50;}
}

@keyframes display {
  0% {opacity:0; transform: scaleY(-1);}
  28% {opacity:0; transform: scaleY(-1);}
  40% {opacity:1; transform: scaleY(-1);}
  80% {opacity:1; transform: scaleY(-1);}
  95% {opacity:1; transform: scaleY(1);}
  100% {opacity:1; transform: scaleY(1);}
}

@keyframes pulse {
  0% {
    transform:scale(.9);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 3px rgba(253, 110, 73,.3);
  }
    100% {
    transform: scale(.9);
    box-shadow: 0 0 0 0 rgba(253, 110, 73,.3);
  }
}

Step3. (optional)

Add jQuery

To repeat the animation on double click add jQuery:

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

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

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

Roll the dice!

JS Simple Signature Pad

HTML & CSS Birthday Card

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 diamond ring (open/ close on click)

CSS engagement ring

To learn how to create the CSS diamond ring (open/ close on click) follow the steps below and watch the video tutorial.

Demo:

*to see the animation on the website click here.

Step1.

Add HTML

<div class="jewellery-box">
  <input id="open" type="checkbox">
  <label class="open" for="open"></label>
  <div class="bottom"></div>
  <div class="inner-top"></div>
  <div class="inner-bottom"></div>
  <div class="text">Will You Marry Me?</div>
  <div class="diamond-ring">
    <div class="diamond"></div>
    <div class="band"></div>
    <div class="inner"></div>
    <div class="details"></div>
  </div>
</div>

Step2.

Add CSS

Import the font (optional):

Font source: Goole Fonts. To see how to import the google font into an HTML document click here.

@import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+P+One&display=swap');

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

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

.jewellery-box {
  position: relative;
  filter: drop-shadow(0 0 30px rgba(0,0,0,0.4));
}
.diamond-ring {
  position: relative;
}

Hide the input checkbox:

input#open {
  display: none;
}

Style the diamond ring:

.diamond {
  position: relative;
  border-style: solid;
  border-color: transparent transparent #27c3f3 transparent;
  border-width: 0 5px 5px 5px;
  height: 0;
  width: 15px; 
  z-index:1;
}
.diamond:before {
  content: "";
  position: absolute;
  top: 5px;
  left: -5px;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: #27c3f3 transparent transparent transparent;
  border-width: 15px 12.5px 0 12.5px;
}

.diamond:after {
  content:"";
  position: absolute;
  border-style: solid;
  border-color: #7fd4f9 transparent transparent transparent;
  border-width: 15px 7px 7px;
  width:0;
  height:0;
  left:0.5px;
  top:5px;
}

.band {
  position: absolute;
  width:45px;
  height:45px;
  border: 5px solid #fed53f;
  border-radius: 50%;
  top:15px;
  left:-15px;
  z-index:1;
}

.band:before, .band:after {
  content:"+";
  position: absolute;
  color:rgba(255,255,255,.5);
}

.band:before {
  left:5px;
  top:-15px;
  font-size:7px;
  text-shadow: 20px -12px;
  animation: shine .5s linear infinite;
}

.band:after {
  left:32px;
  top:-12px;
  font-size:9px;
  text-shadow: -19px -18px;
  animation: shine .5s linear infinite .2s;
}

@keyframes shine {
  from {opacity:1;}
  to {opacity:0;}
}
CSS diamond ring

Style the jewellery box:

.inner {
  position:absolute;
  background-color: #cf7b4a;
  width:70px;
  height:15px;
  z-index:3;
  left:-20px;
  top:55px;
  border-radius:20px 20px 0 0;
}

.open {
  position: absolute;
  z-index:5;
  background-color: #81171b;
  width: 170px;
  height:40px;
  border-radius: 30px 30px 0 0;
  left:-70px;
  top:-10px;
  transition: .1s;
  cursor: pointer;
}

.bottom {
  position: absolute;
  z-index:5;
  background-color: #81171b;
  width:170px;
  height:40px;
  box-shadow: 0 -10px #540804;
  border-radius: 0 0 15px 15px;
  top:40px;
  left:-70px;
  transition: .1s;
}

.bottom:before {
  content:"";
  position: absolute;
  border-radius:50%;
  width:10px;
  height:10px;
  background-color: #ad2e24;
  top:13px;
  left:13px;
  box-shadow: 15px 0 #ad2e24, 30px 0 #ad2e24, 45px 0 #ad2e24, 60px 0 #ad2e24, 75px 0 #ad2e24, 90px 0 #ad2e24, 105px 0 #ad2e24, 120px 0 #ad2e24, 135px 0 #ad2e24;
}

.inner-top {
  position: absolute;
  width:150px;
  height:0;
  border-style: solid;
  border-width: 0 10px 50px 10px;
  border-color: transparent transparent #912820 transparent;
  transition: .1s;
  transform-origin: top;
  left:-70px;
  top:40px;
  transform: rotateX(85deg);
}

.inner-top:before {
  content:"";
  position: absolute;
  width:130px;
  height:0;
  border-style: solid;
  border-width: 0 10px 50px 10px;
  border-color: transparent transparent #ad2e24 transparent;
  transition: .1s;
  transform-origin: top;
  left:0;
  top:0;
}

.inner-bottom {
  position: absolute;
  width:150px;
  height:0;
  border-style: solid;
  border-width: 0 10px 60px 10px;
  border-color: transparent transparent #732019 transparent;
  transition: .1s;
  transform-origin: top;
  left:-70px;
  top:40px;
  transform: rotateX(85deg);
}

.inner-bottom:before {
  content:"";
  position: absolute;
  width:130px;
  height:0;
  border-style: solid;
  border-width: 0 10px 60px 10px;
  border-color: transparent transparent #cf7b4a transparent;
  transition: .1s;
  transform-origin: top;
  left:0;
  top:0;
}

.details {
  position: absolute;
  width:132px;
  background-color: #cf7b4a;
  border-radius:20px 20px 0 0;
  height:10px;
  left:-51px;
  top:35px;
}

Make the box open and close:

#open:checked + .open {
  transform: translateY(-40px);
}

#open:checked ~  .bottom {
  transform: translateY(45px);
}

#open:checked ~  .inner-top {
  transform: rotateX(180deg);
}

#open:checked ~  .inner-bottom {
  transform: rotateX(-40deg);
}

Style and animate the text:

.text {
  position: absolute;
  color: white;
  font-family: 'Mochiy Pop P One', sans-serif;
  font-size: 30px;
  transition: .3s;
  width:300px;
  text-align: center;
  top:-165px;
  left:-130px;
  opacity:0;
}

#open:checked ~  .text {
  opacity:1;
}

Enjoy coding!

Watch also the video tutorial:

Hey, here’s something that might interest you:

CSS Heart in Envelope

CSS Valentine’s Day Card

CSS Heart Shape & Heartbeat Animation

Categories
CSS HTML Web development

CSS Christmas Card (Open/ Close on Click)

CSS Christmas Card (Open/ Close on Click)

To learn how to create the CSS Christmas Card (Open/ Close on Click) follow the steps below and watch the video tutorial.

Demo:

*to see the CSS Christmas Card on the website click here.

Step1.

Add HTML

<div class="christmas-card">
  <input id="open" type="checkbox">
  <label class="open" for="open"></label>
<div class="card-front">
  <div class="christmas-tree"></div>
  <div class="ribbon"></div>
  <div class="text">- Click to Open -</div>
  <div class="star"></div>
  <div class="balls"></div>
</div>
  
  <div class="card-inside">
    <div class="title">Merry</br>Christmas!</div>
  <div class="wishes">I hope the magic of Christmas fills every corner of your heart and home with joy — now and always.</div>
  <div class="gift">
    <div class="bow"></div>
  </div>
</div>

Step2.

Add CSS

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

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

Style the card (make the card open/ close):

.christmas-card {
  position: relative;
  width: 200px;
  height:300px;
  transform-style: preserve-3d;
  transform: perspective(2500px);
  transition: 3s;
}
input#open {
  display: none;
}

.card-front {
  position: relative;
  background-color: #fff;
  width: 200px;
  height:300px;
  overflow: hidden;
  transform-origin: left;
  box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
  transition: .3s;
}

.card-inside {
  position: absolute;
  background-color: #fff;
  width: 200px;
  height:300px;
  z-index:-1;
  left:0;
  top:0;
  box-shadow: inset 100px 20px 100px rgba(0,0,0,0.2);
}

.open {
  position: absolute;
  width: 200px;
  height:300px;
  left:0;
  top:0;
  background-color: transparent;
  z-index:6;
  cursor: pointer;
}

#open:checked ~ .card-front {
  transform: rotateY(-155deg);
  box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
}

#open:checked ~ .card-front:before {
  z-index:5;
}
CSS Christmas Card (Open/ Close on Click)

Style the front side of the card:

.card-front:before {
  content:"";
  position: absolute;
  width: 180px;
  height: 280px;
  background-color: #c94038;
  top: 10px;
  left: 10px;
}

.christmas-tree {
  position: absolute;
  width:0;
  height:0;
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
  border-bottom: 160px solid #034247;
  top: 75px;
  left:50px;
}

.christmas-tree:after {
  content:"";
  position: absolute;
  width: 100px;
  height: 25px;
  background-color: #c47f1a;
  left:-50px;
  top:140px;
}

.christmas-tree:before {
  content:"";
  position: absolute;
  background-color: #a86d16;
  width:50px;
  height: 25px;
  top:130px;
  left:20px;
  box-shadow: -90px 0 #a86d16;
}
.text {
  position: absolute;
  color: white;
  font-family: brush script mt;
  top:260px;
  width:200px;
  text-align: center;
  font-size:15px;
}

.text:before {
  content:"Merry Christmas!";
  position: absolute;
  width:80px;
  color: #333;
  text-align: center;
  line-height: 10px;
  top:-42.5px;
  left:61px;
}

.text:after {
  content:"";
  position: absolute;
  width:0;
  height:0;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-bottom: 20px solid #faa307;
  top:-185px;
  left:93px;
}

.ribbon, .ribbon:before {
  position: absolute;
  width:0;
  height:0;
  border-bottom: 12.5px solid transparent;
  border-top: 12.5px solid transparent;
}

.ribbon {
  border-left: 10px solid #c94038;
  top:205px;
  left:30px;
}

.ribbon:before {
  content:"";
  border-right: 10px solid #c94038;
  left: 120px;
  top:-12.5px;
}

.ribbon:after {
  content:"";
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius:50%;
  background-color: white;
  top:-25px;
  left:21.5px;
  box-shadow: 5px -3px white, 10px -6px white, 15px -9px white, 20px -12px white, 25px -15px white, 30px -18px white, 35px -21px white, 40px -24px white, 45px -27px white, 50px -30px white, 55px -33px white, 60px -36px white, 60px -36px white, 15px -50px white, 20px -53px white, 25px -56px white, 30px -59px white, 35px -62px white, 40px -65px white, 45px -68px white, 50px -71px white;
}

.star {
  position: absolute;
  display: block;
  width: 0px;
  height: 0px;
  border-right: 20px solid transparent;
  border-bottom: 13px solid #ffba08;
  border-left: 20px solid transparent;
  transform: rotate(-35deg);
  top:68px;
  left:80px;
    }

.star:before {
      border-bottom: 13px solid #ffba08;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      position: absolute;
      height: 0;
      width: 0;
      top: -9px;
      left: -11px;
      display: block;
      content: '';
      transform: rotate(-35deg);
    }

.star:after {
      position: absolute;
      display: block;
      top: 0.75px;
      left: -20px;
      width: 0px;
      height: 0px;
      border-right: 20px solid transparent;
      border-bottom: 13px solid #ffba08;
      border-left: 20px solid transparent;
      transform: rotate(-70deg);
      content:'';
}

.balls {
  position: absolute;
  width:12px;
  height: 12px;
  border-radius: 50%;
  background-color: #c94038;
  top:185px;
  left:110px;
  box-shadow: -30px -30px #c94038, -18px -74px #c94038;
}

.balls:before {
  content:"";
  position: absolute;
  border-radius: 50%;
  widtH: 10px;
  height: 10px;
  background-color: #f6b4b8;
  left:-20px;
  top:10px;
  box-shadow: 15px -55px #f6b4b8;
}
CSS Card Front

Style the card inside:

.card-inside:before {
  content:"";
  position: absolute;
  width: 180px;
  height: 280px;
  background-color: #c94038;
  top: 10px;
  left: 10px;
}

.title {
  position: absolute;
  color: #333;
  font-size:30px;
  font-family: brush script mt;
  line-height: 25px;
  text-align: center;
  top:45px;
  width:200px;
}

.wishes {
  position: absolute;
  width: 150px;
  text-align: center;
  font-family: brush script mt;
  line-height:15px;
  font-size: 20px;
  color: #333;
  height: 300px;
  top: 45%;
  left:25px;
}

.gift {
  position: absolute;
  border: 3px solid #333;
  width:30px;
  height: 30px;
  top: 235px;
  left:83px;
}

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

.gift:before {
  width:30px;
  height:3px;
  top:14px;
}

.gift:after {
  height:30px;
  width:3px;
  left: 14px;
}

.bow {
  position: absolute;
}

.bow:before, .bow:after {
  content:"";
  position: absolute;
  width: 7px;
  height: 7px;
  border: 3px solid #333;
  border-radius:50%;
  top:-14px;
}

.bow:before {
  transform: skew(20deg, 10deg);
  left:2px;
}

.bow:after {
  transform: skew(-20deg,-10deg);
  left:15px;
}
CSS Card Open on Click

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Christmas Card

CSS Christmas Tree Snow Globe

CSS Folded Birthday Card

Categories
CSS Web development

Pure CSS Envelope (Open/Close on click)

Pure CSS Envelope (Open/Close on click)

To learn how to create the CSS Envelope (Open/Close on click) follow the steps below and watch the video tutorial:

Demo:

*to see the CSS Envelope (Open/Close on click) on the website click here.

Step1.

Add HTML

<div class="envelope-container">
  <input id="flap" type="checkbox">
  <label class="flap" for="flap"></label>
  <div class="envelope-back"></div>
  <div class="card">Thanks!</div>
  <div class="card-front"></div> 
</div>

Step2.

Add CSS

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

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e9f5db;
}
.envelope-container {
  position: relative;
}

Style the envelope and the card:

input#flap {
  display: none;
}
.envelope-back {
  position: relative;
  width: 320px;
  height: 200px;
  background-color: #718355;
}

.envelope-back:before {
  content:"";
  position: absolute;
  background-color: rgba(0,0,0,0.07);
  width: 320px;
  height:10px;
  border-radius:50%;
  top:220px;
}

.card {
  position: absolute;
  width:300px;
  height: 180px;
  background-color: white;
  top:10px;
  left:10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:40px;
  font-family: Brush Script MT;
  transition: .1s;
  z-index:1;
  cursor: pointer;
}

.card-front {
  position: absolute;
  width:0;
  height:0;
  border-bottom: 100px solid #87986a;
  border-left: 160px solid transparent;
  border-right: 160px solid transparent;
  top:100px;
  left:0;
  z-index:3;
}

.card-front:before, .card-front:after {
  content:"";
  position: absolute;
  border-bottom: 100px solid transparent;
  border-top: 100px solid transparent;
  height:0;
  width:0;
}

.card-front:before {
  border-left: 161px solid transparent;
  border-right: 161px solid #97a97c;
  top:-100px;
  left:-162px;
}

.card-front:after {
  border-right: 161px solid transparent;
  border-left: 161px solid #97a97c;
  top:-100px;
  left:-160px;
}

.flap {
  position: absolute;
  width:0;
  height:0;
  border-top: 110px solid #b5c99a;
  border-left: 160px solid transparent;
  border-right: 160px solid transparent;
  top:0;
  left:0;
  cursor: pointer;
  transition: .3s;
  transform-origin: top;
  z-index:4;
}
CSS Envelope

Open and close an envelope:

#flap:checked + .flap {
  transform: rotateX(180deg);
}

#flap:checked ~ .card-front {
  z-index:7;
}

#flap:checked ~ .card {
  z-index:4;
  transform: translateY(-60px);
}

Watch also the video tutorial:

Enjoy coding!

Read also:

CSS Envelope (Open/Close on Hover)

CSS Valentine’s Day Card

CSS 3d flip Business Card

Categories
HTML Web development

HTML alt Attribute

HTML alt Attribute

The HTML alt attribute gives alternative information for an image.

You can use the alt attribute with the following elements:

<area>

<img>

<input> (only can be used with <input type=”image”>)

Area Example:

<!DOCTYPE html>
<html>
<body>

<p>Click on the laptop, or the cup of coffee:</p>

<img src="https://lenadesign.org/wp-content/uploads/2021/06/homeOffice.jpg" alt="homeOffice" usemap="#workmap" width="640" height="480">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="laptop" href="https://lenadesign.org/wp-content/uploads/2021/06/laptop.jpg">
  <area shape="circle" coords="337,300,44" alt="coffee" href="https://lenadesign.org/wp-content/uploads/2021/06/photoshop-gif.gif">
</map>

</body>
</html>

Output:

Click on the laptop, or the cup of coffee:

homeOffice laptop coffee

Img Example:

<img src="https://lenadesign.org/wp-content/uploads/2021/07/small-avatar.jpg" alt="avatar" width="320" height="240">

Output:

avatar

Input Example:

<!DOCTYPE html>
<html>
<body>

<form action="">
  <label for="fname">First name: </label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name: </label>
  <input type="text" id="lname" name="lname"><br>
  <input type="image" src="https://lenadesign.org/wp-content/uploads/2021/06/submit-button.png" alt="Submit" width="100" height="100">
</form>

</body>
</html>

Output:




Enjoy coding!

Read also:

HTML Attributes

HTML Form Elements

HTML SVG

Categories
CSS HTML JavaScript Web development

HTML & CSS Range Sliders

HTML & CSS Range Sliders

To create a range slider you need to use the input tag type range (<input type=”range”>) that specifies a control for entering a number whose exact value is not important. The default range is 0 to 100:

<!DOCTYPE html>
<html>
<body>

<form action="">
  <label for="vol">Number between 0 and 100:</label>
  <input type="range" id="vol" name="vol" min="0" max="100">
  <input type="submit">
</form>

</body>
</html>

Output:


To create the custom range slider add some CSS:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.range-slider-container {
  width: 100%;
}

.range-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 25px;
  background: #e9c46a;
  outline: none;
  border-radius:40px;
  opacity: 0.8;
  transition: opacity .2s;
}

.range-slider:hover {
  opacity: 1;
}

.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 25px;
  height: 25px;
  border-radius:50%;
  background-color: #e76f51;
  cursor: pointer;
}
.range-slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius:50%;
  background-color: #e76f51;
  cursor: pointer;
}

</style>
</head>
<body>

<div class="range-slider-container">
  <input type="range" min="0" max="100" value="50" class="range-slider" id="range">
</div>

</body>
</html>

Output:


To display the current value add the JavaScript to the code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.range-slider-container {
  width: 100%;
}

.range-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 25px;
  background: #e9c46a;
  outline: none;
  border-radius:40px;
  opacity: 0.8;
  transition: opacity .2s;
}

.range-slider:hover {
  opacity: 1;
}

.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 25px;
  height: 25px;
  border-radius:50%;
  background-color: #e76f51;
  cursor: pointer;
}
.range-slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius:50%;
  background-color: #e76f51;
  cursor: pointer;
}
p {position: relative; left:45%;}

</style>
</head>
<body>


<div class="range-slider-container">
  <input type="range" min="0" max="100" value="50" class="range-slider" id="range">
  <p>Value: <span id="example"></span></p>
</div>
    
<script>
var randgeSlider = document.getElementById("range");
var val = document.getElementById("example");
val.innerHTML = randgeSlider.value;

  randgeSlider.oninput = function() {
  val.innerHTML = this.value;
}
</script>

</body>
</html>

Output:

Value:



Enjoy coding!

Read also:

CSS & JavaScript Bee Progress Bar

Pure CSS Slider/ Slideshow

CSS Toggle Switch

Categories
CSS HTML Web development

CSS Toggle Switch

CSS Toggle Switch

To learn how to create a “toggle switch” (on/off button) with CSS follow the steps below:

Demo:


Step1.

Add HTML

<label class="toggle-switch">
  <input type="checkbox" checked>
  <span class="slider round"></span>
</label>

Step2.

Add CSS

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 110px;
}

.toggle-switch input { 
  display: none;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #264653;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 90px;
  width: 90px;
  left: 12px;
  bottom: 10px;
  background-color: #e9c46a;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2a9d8f;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2a9d8f;
}

input:checked + .slider:before {
  transform: translateX(87px);
}

.slider.round {
  border-radius: 100px;
}

.slider.round:before {
  border-radius: 50%;
}

Enjoy coding!

Read also:

CSS Desk Lamp (Switch On/ Off)

CSS Umbrella (Open/Close on Click)

Pure CSS Envelope (Open/Close on click)