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
Web development

3d CSS Birthday Cake and Candles Animation


3d CSS Birthday Cake and Candles Animation

To learn how to create the Birthday Cake and Candles Animation with HTML, CSS and jQuery follow the steps below and watch the video tutorial.

Demo:

*to see the animation on the website click here.

Step1.

Add HTML

<div id="birthday-cake">
  <div class="cake">
    <div class="middle"></div>
    <div class="chocs"></div>
    <div class="top"></div>
  </div>
  <div class="candles">
    <div class="flame"></div>
    <div class="flame2"></div>
    <div class="flame3"></div>
    <div class="text">Happy Birthday!</div>
    <div class="shadows"></div>
  </div>
  <p class="text2">*click on the flame to blow candles</p>
</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: #f07167;
  overflow: hidden;
}

#birthday-cake {
  position: relative;
  top:50px;
  left:0;
}

Style the cake:

#birthday-cake:before {
  content:"";
  position: absolute;
  background-color: #ede0d4;
  width: 400px;
  height:140px;
  border-radius:50%;
  left:50%;
  top:50%;
  transform: translate(-50%,-10%);
  box-shadow: inset -2px -5px #e6ccb2;
}

.cake {
  position: absolute;
  background-color: #ddb892;
  width: 350px;
  height:130px;
  transform: translate(-50%,-60%);
}

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

.cake:before, .middle, .middle:before {
  border-radius: 50% 50% 50% 50% / 0% 0% 100% 100%;
  width:350px;
  height:50px;
}

.cake:before {
  background-color: #ddb892;
  top:130px;
}

.cake:after {
  background-color: #b08968;
  width:350px;
  height:30px;
  top:50px;
}

.middle {
  position: absolute;
  background-color: #b08968;
  top:80px;
  z-index:1;
}

.middle:before {
  content:"";
  position: absolute;
  background-color: #ddb892;
  top:-35px;
}

.top {
  position: absolute;
  background-color: #7f5539;
  width:350px;
  height: 90px;
  border-radius:50%;
  z-index:2;
  top:-45px;
  box-shadow: inset -5px -1px #fff, inset -70px 2px rgba(255,255,255,.1);
}

.chocs {
  position: absolute;
  width: 55px;
  height:50px;
  background-color: #7f5539;
  top:0;
  z-index:1;
  border-radius: 50% 50% 50% 50% / 0% 0% 100% 100%;
  box-shadow: 49px 20px #7f5539, 98px 25px #7f5539, 147px 30px #7f5539, 196px 25px #7f5539, 245px 20px #7f5539, 295px 0 #7f5539, 0px 4px #fff, 49px 24px #fff, 98px 29px #fff, 147px 34px #fff, 196px 29px #fff, 245px 24px #fff, 295px 4px #fff;
}

.chocs:before {
  content:"";
  position: absolute;
  width:175px;
  height:180px;
  background-color: rgba(255,255,255,.1);
  border-radius: 100% 0% 100% 0% / 0% 72% 28% 100%;
  left:175px;
  top:0;
}
CSS birthday cake

Style and animate candles:

.candles {
  position: absolute;
  width:30px;
  height: 80px;
  background-color: #0081a7;
  top:-160px;
  left:-20px;
  box-shadow: 50px 20px #0081a7, -50px 20px #0081a7;
}

.candles:before {
  content:"";
  position: absolute;
  width:30px;
  height: 10px;
  background-color: #0081a7;
  border-radius:50%;
  top:-5px;
  box-shadow: 0 80px #0081a7, -50px 20px #0081a7, -50px 100px #0081a7, 50px 20px #0081a7, 50px 100px #0081a7, inset 2px -1px #fff;
}

.candles:after {
  content:"";
  position: absolute;
  width:30px;
  height: 10px;
  border-radius:50%;
  top:15px;
  left:50px;
  box-shadow: inset 2px -1px #fff;
}

.shadows {
  position: absolute;
  width:30px;
  height: 10px;
  border-radius:50%;
  box-shadow: inset 2px -1px #fff;
  left:-50px;
  top:15px;
}

.shadows:before {
  content:"";
  position: absolute;
  background-color: #333;
  width:1.5px;
  height:15px;
  left:14.5px;
  top:-10px;
  box-shadow:50px -20px #333, 100px 0 #333;
}

.shadows:after {
  content:"";
  position: absolute;
  width:15px;
  height:90px;
  left:15px;
  background-color: rgba(255,255,255,.1);
  box-shadow: 50px -20px rgba(255,255,255,.1), 100px 0 rgba(255,255,255,.1);
  border-radius: 0% 100% 50% 50% / 100% 6% 10% 0%;
}


.flame, .flame:before, .flame2, .flame2:before, .flame3, .flame3:before {
  position: absolute;
  border-radius: 80% 15% 55% 50% / 55% 15% 80% 50%;
}

.flame,.flame3, .flame2 {
  cursor: pointer;
  width:30px;
  height: 30px;
  transform: rotate(-45deg);
  z-index:4;
  background-color: rgba(252,191,73,.8);
  transition: .5s;
  animation: flame .5s infinite;
}

.flame {
  top:-40px;
}

.flame2, .flame3 {
  top: -20px;
}

.flame2 {
  left:-50px;
}

.flame3 {
  left: 50px;
}

.flame:before, .flame2:before, .flame3:before {
  content:"";
  background-color: rgba(247,127,0,.4);
  width:20px;
  height:20px;
  top:5px;
  left:5px;
}

@keyframes flame {
  0%, 25%, 100% {transform: scaleY(1) rotate(-45deg);}
  50%, 75% {transform: scaleY(1.1) rotate(-45deg);}
}

Style text:

.text, .text2 {
  position: absolute;
  color: white;
  font-family: 'Brush Script MT', cursive;
  text-align: center;
}
.text {
  width:350px;
  font-size: 50px;
  left:-140px;
  top:100px;
  z-index:-1;
  transition: .3s;
  opacity:0;
}

.text2 {
  font-size: 25px;
  width: 300px;
  top:105px;
  left:-140px;
}

Step3.

Add jQuery

To read how to add the jQuery code to HTML click here. Add libraries below in to the <head> section.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

and then the following code:

<script>
$(document).ready(function() {
    $(".candles").click(function() {
        
      $(".flame").animate({"opacity": 0}, "fast");
      $(".flame2").animate({"opacity": 0}, "fast");
      $(".flame3").animate({"opacity": 0}, "fast");
      $(".text").animate({"top": -90, "opacity": 1}, "fast");
    });
});
</script>

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Coffee Express Animation

Birthday Cake – CSS Animation

CSS Door Animation (Open/Close on Hover)

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 Web development

Pure CSS Valentine’s Day Animation


Pure CSS Valentine's Day Animation/ Card

To learn how to create the CSS Valentine’s Day 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="happy-valentines">
<div class="valentines-day-card">
  <div class="clouds"></div>
  <div class="hearts">
    <div class="heartOne">
      <div class="left-side"></div>
      <div class="right-side"></div>
    </div>
    <div class="heartTwo">
      <div class="left-side"></div>
      <div class="right-side"></div>
    </div>
        <div class="heartThree">
      <div class="left-side"></div>
      <div class="right-side"></div>
    </div>
     <div class="heartFour">
      <div class="left-side"></div>
      <div class="right-side"></div>
    </div>
     <div class="heartFive">
     <div class="left-side"></div>
      <div class="right-side"></div>
    </div>
  </div>
  <div class="text"><span>Happy Valentine's</br> Day!</div>
</div>
<p class="hover">- hover over the text -</p>
</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=Pacifico&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: #ff758f;
}

Style the card:

.valentines-day-card {
  position: relative;
  width: 400px;
  height: 300px;
  background-color: #ff8fa3;
  overflow: hidden;
  border:10px solid white;
  border-radius:10px;
  box-shadow: 0 0 100px rgba(0,0,0,.4);
}

.valentines-day-card:before {
  content:"";
  position: absolute;
  background-color: #ffb3c1;
  width:100px;
  height:100px;
  border-radius:50%;
  top:140px;
  left:-25px;
  box-shadow:60px 20px #ffb3c1,130px 10px #ffb3c1, 190px 20px #ffb3c1,260px -5px #ffb3c1, 340px 20px #ffb3c1;
}

.valentines-day-card:after {
  content:"";
  position: absolute;
  background-color: #ffccd5;
  width:100px;
  height:100px;
  border-radius:50%;
  top:160px;
  left:-40px;
  box-shadow: 50px 20px #ffccd5,120px 40px #ffccd5, 200px 15px #ffccd5,260px 30px #ffccd5, 330px 30px #ffccd5,380px 10px #ffccd5;
}

.clouds {
  position: absolute;
  width:100px;
  height:100px;
  border-radius:50%;
  background-color: #fff0f3;
  z-index:5;
  top:210px;
  left:-20px;
  box-shadow: 55px 30px #fff0f3, 125px 10px #fff0f3,175px 20px #fff0f3, 250px 10px #fff0f3, 320px 5px #fff0f3, 380px 10px #fff0f3;
}
Pure CSS Valentine's Day Animation/ Card

Add and animate hearts:

.hearts {
  position: absolute;
  z-index:2;
}

.heartOne {
  position: absolute;
  left:100px;
  top:250px;
  animation: up 4s linear forwards 1s;
}

.heartTwo {
  position: absolute;
  left:270px;
  top:230px;
  animation: up 5s linear forwards 1.8s;
}

.heartThree {
  position: absolute;
  left:85px;
  top:415px;
  animation: up 5s linear forwards 3s;
}

.heartFour {
  position: absolute;
  left:320px;
  top:380px;
  animation: upTwo 9s linear infinite 3.5s;
}

.heartFive {
  position: absolute;
  left:150px;
  top:400px;
  animation: upTwo 13s linear infinite 4.5s;
}

.right-side:before, .right-side:after {
  position: absolute;
  content:"";
  transform-origin: left;
  animation: move 1s ease infinite;
}

.right-side:before {
  border-radius:50% 50% 50% 0;
  width:21px;
  height:20px;
  background-color: #c9184a;
  left:-0.26px;
}

.right-side:after {
  height:0;
  width:0;
  border-bottom:10px solid transparent;
  border-left: 15px solid #c9184a;
  top:19px;
  left:-0.26px;
}

@keyframes move {
  0%, 100% {transform: rotateY(0);}
  50% {transform: rotateY(-45deg);}
}

.left-side:before, .left-side:after {
  position: absolute;
  content:"";
  transform-origin: right;
  animation: move 1s ease infinite;
}

.left-side:before {
  border-radius:50% 50% 0 50%;
  width:20px;
  height:20px;
  left:-20.7px;
  background-color: #ff4d6d;
}

.left-side:after {
  height:0;
  width:0;
  left:-15px;
  border-bottom:10px solid transparent;
  border-right: 15px solid #ff4d6d;
  top:19px;
}

@keyframes up {
  0% {transform: translateY(0);}
  100% {transform: translateY(-200px);}
}

@keyframes upTwo {
  0% {transform: translateY(0);}
  100% {transform: translateY(-450px);}
}

Style and animate the text:

.text {
  position: absolute;
  color: #800f2f;
  font-size:30px;
  font-family: 'Pacifico', cursive;
  line-height:1;
  text-align: center;
  width:380px;
  left:10px;
  z-index:3;
  top:320px;
  animation: up 1s ease forwards;
  transition: .2s;
}

.hover {
  color: white;
  font-family: 'Pacifico', cursive;
  text-align: center;
}

.text:hover span {
  display: none;
}

.text:hover:before {
  content:"Remember not to eat too much candy—you're sweet enough already.";
  font-size:25px;

}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Valentine’s Day Card (Open/Close on Click)

CSS diamond ring (open/ close on click)

CSS Heart in Envelope

Categories
CSS Web development

CSS Shiny Diamond



CSS Shiny Diamond

To learn how to create the CSS Shiny Diamond follow the steps below and watch the video tutorial:

Demo:

*to see the animation on the website click here.

Step1.

Add HTML

<div class="diamond-container">
<div class="diamond">
  <div class="diamond-top"></div>
  <div class="diamond-bottom"></div>
</div>
  <div class="sparkles">
    <div class="one">✨</div>
    <div class="two">✨</div>
  </div>
</div>

Emoji source: Emojipedia

Step2.

Add CSS

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

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

.diamond-container {
  position: relative;
}

Style the diamond:

.diamond {
  position: relative;
  left:-100px;
  top:-50px;
  filter: drop-shadow(0 0 100px white);
}

.diamond-top {
  position: relative;
}

.diamond-top:before, .diamond-top:after {
  content:"";
  position: absolute;
  width:0;
  height:0;
  border-style: solid;
  top:0;
}

.diamond-top:before {
  border-color: transparent transparent #b4e3e6 transparent;
  border-width: 0 25px 30px 25px;
  filter: drop-shadow(50px 0 #94d7d9) drop-shadow(50px 0 #b4e3e6);
}

.diamond-top:after {
  border-color: #d8f8f9 transparent transparent transparent;
  border-width: 30px 25px 0 25px;
  left:25px;
  filter: drop-shadow(50px 0 #d8f8f9);
}

.diamond-bottom, .diamond-bottom:before {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}

.diamond-bottom {
  left: 0;
  top: 30px;
  border-color: #70ced4 transparent transparent transparent;
  border-width: 100px 75px 0 75px;  
}

.diamond-bottom:before {
  content:"";
  border-color: #b4e3e6 transparent transparent transparent;
  border-width: 100px 25px 0 25px;  
  top:-100px;
  left:-25px;
}

.diamond-bottom:after {
  content:"";
  position: absolute;
  border-radius:50%;
  width: 100px;
  height:10px;
  background-color: #b4e3e6;
  top:-135px;
  left:-50px;
}

Style and animate the sparkles:

.sparkles {
  z-index:2;
  position: absolute;
}

.one {
  position:absolute;
  font-size:40px;
  color: transparent;
  text-shadow: 0 0 white, -115px -75px white;
  animation: shine .5s linear infinite;
}

.two {
  position: absolute;
  color: transparent;
  font-size: 25px;
  left:-65px;
  top:45px;
  text-shadow: 0 0 white, 55px -115px white;
  animation: shine .5s linear infinite .25s;
}

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

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS diamond ring (open/ close on click)

CSS Paper Plane Animation

CSS Background Change Animation – Day & Night

Categories
CSS HTML JQuery Web development

CSS Text Drop Animation

CSS Text Drop Animation

To learn how to create the CSS Text Drop 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="text-drop">
  <div class="h">H</div>
  <div class="e">e</div>
  <div class="l">l</div>
  <div class="l2">l</div>
  <div class="o">o</div>
  <div class="smile">:)</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: #001219;
}

Style and animate the text:

#text-drop {
  position: relative;
  display: flex;
  font-size:100px;
  font-family: arial;
  font-weight: 900;
}

.h {
  opacity:0;
  animation: drop .4s linear forwards;
  color: #9b5de5;
}

.e {
  opacity:0;
  animation: drop .4s linear forwards .2s;
  color: #f15bb5;
}

.l {
  opacity:0;
  animation: drop .4s linear forwards .4s;
  color: #fee440;
}

.l2 {
  opacity:0;
  animation: drop .4s linear forwards .6s;
  color: #00bbf9;
}

.o {
  opacity:0;
  animation: drop .4s linear forwards .8s;
  color: #00f5d4;
}

@keyframes drop {
  0% {transform: translateY(-200px) scaleY(0.9); opacity: 0;}
  5% {opacity: .7;}
  50% {transform: translateY(0px) scaleY(1); opacity: 1;}
  65% {transform: translateY(-17px) scaleY(.9); opacity: 1;}
  75% {transform: translateY(-22px) scaleY(.9); opacity: 1;}
  100% {transform: translateY(0px) scaleY(1); opacity: 1;}
}

.smile {
  opacity:0;
  animation: drop .4s linear forwards 1.2s;
  color: #9b5de5;
  font-size:90px;
  margin-left:15px;
}

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(){
  $('#text-drop').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 Slide Text Animation/ Slide Effect

CSS Bouncing Text Animation

CSS Mirror/ Reflection Text Effect

Categories
CSS HTML Web development

CSS Happy New Year Animation (fireworks)

CSS Fireworks

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

Demo:

*to see the CSS Happy New Year Animation (fireworks) on the website click here.

Step1.

Add HTML

<div class="happy-new-year">
  <div class="circle">
    <div class="clock-bottom"></div>
  </div>
  <div class="clock-middle">
    <div class="clock-face"></div>
  </div>
  <div class="clock-top">
    <div class="roof"></div>
    <div class="deco"></div>
    <div class="sides"></div>
  </div>
  <div class="clouds"></div>
  <div class="fireworks">
    <div class="one"></div>
  </div>
    <div class="fireworks-2">
    <div class="two"></div>
    </div>
      <div class="fireworks-3">
    <div class="two"></div>
      </div>
   <div class="fireworks-4">
    <div class="one"></div>
      </div>
  <div class="text">Happy 2022!</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: #1d3557;
  overflow: hidden;
}

.happy-new-year {
  position: relative;
}

Add the circle and clouds (background):

.circle {
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background-color: #000814;
}

.clouds {
  position: absolute;
  top:0;
  left:0;
}

.clouds:before, .clouds:after {
  content:"";
  position: absolute;
  background-color: #001d3d;
}

.clouds:before {
  width: 100px;
  height: 40px;
  border-radius: 30px;
  top:130px;
  left:-40px;
  box-shadow: 275px 40px #001d3d;
}

.clouds:after {
  width:50px;
  height: 50px;
  left:-10px;
  top:110px;
  border-radius:50%;
  box-shadow: 270px 40px #001d3d;
}
CSS Fireworks

Style the clock:

.clock-bottom {
  position: absolute;
  width: 100px;
  height:100px;
  background-color: #dd904a;
  top:240px;
  left:95px;
  border: 5px solid #333;
}

.clock-bottom:before {
  content:"";
  position: absolute;
  background-color: #333;
  width: 20px;
  height:100px;
  border-radius:30px;
  top:10px;
  left:10px;
  box-shadow: 30px 0 #333, 60px 0 #333;
}

.clock-bottom:after {
  content:"";
  position: absolute;
  background-color: #9c5221;
  width:12px;
  height:100px;
  border-radius: 30px;
  left:14px;
  top:14px;
  box-shadow: 30px 0 #9c5221, 60px 0 #9c5221;
}

.clock-middle {
  position: absolute;
  width:100px;
  height:100px;
  background-color: #dc8f4a;
  border: 5px solid #333;
  top:135px;
  left:95px;
  z-index:1;
}

.clock-middle:before {
  content:"";
  position: absolute;
  border: 5px solid #333;
  width:80px;
  height:80px;
  top:5px;
  left:5px;
}

.clock-middle:after {
  content:"";
  position: absolute;
  border-radius:50%;
  border: 5px solid #333;
  height:75px;
  width: 75px;
  top:7px;
  left:7px;
  background-color: #f9fcc5;
}
.clock-top {
  position: absolute;
  width:100px;
  height:20px;
  border: 5px solid #333;
  background-color: #d88e4a;
  top:110px;
  left:95px;
}

.clock-top:before {
  content:"";
  position: absolute;
  width:71px;
  height:0;
  border-top: 30px solid transparent;
  border-bottom: 50px solid #333;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  top:-80px;
  left:-5px;  
}

.clock-top:after {
  position: absolute;
  content:"";
  border: 5px solid #333;
  background-color: #d88e4a;
  width:63px;
  height:25px;
  top:-80px;
  left:14px;
}

.roof {
  position: absolute;
  height:0;
  width:0;
  border-bottom: 100px solid #333;
  border-right: 35px solid transparent;
  border-left: 35px solid transparent;
  top:-175px;
  left:15px;
}

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

.roof:before {
  width:2px;
  height:20px;
  left:-54px;
  top:150px;
  box-shadow: 106px 0 #333, 18px -75px #333, 88px -75px #333;
}

.roof:after {
  border-radius:50%;
  width:5px;
  height: 5px;
  left:-55.5px;
  top:145px;
  box-shadow: 106.5px 0 #333, 18px -75px #333, 88px -75px #333;
}

.deco {
  position: absolute;
  background-color: #965123;
  width: 10px;
  height: 10px;
  top:5px;
  left:7px;
  box-shadow: 15px 0 #965123, 30px 0 #965123, 45px 0 #965123, 60px 0 #965123, 75px 0 #965123;
  z-index:3;
}

.deco:before {
  content:"";
  position: absolute;
  background-color: #965123;
  width:10px;
  height: 13px;
  top:-75px;
  left:15px;
  box-shadow: 15px 0 #965123, 30px 0 #965123, 45px 0 #965123;
}

.sides {
  position: absolute;
  background-color: #333;
  width:30px;
  height: 100px;
  left:-30px;
  top:25px;
  box-shadow:130px 0 #333;
}

.sides:before {
  content:"";
  position: absolute;
  width:20px;
  height: 90px;
  background-color: #dc904c;
  left: 5px;
  top:5px;
  box-shadow:130px 0 #dc904c;
}
CSS Clock New Year

Style and animate the clock face:

.clock-face {
  position: absolute;
  background-color: #333;
  border-radius:50%;
  width:15px;
  height:15px;
  left: 50%;
  top: 50%;
  z-index:2;
  transform: translate(-50%, -50%);
}

.clock-face:before, .clock-face:after {
  content:"";
  position: absolute;
  background-color: #333;
  border-radius:30px;
  transform-origin: right;
}

.clock-face:before {
  width:30px;
  height: 5px;
  top:5px;
  left:-23px;
  transform: rotate(-50deg);
  animation: rotate 3s linear forwards;
 
}

@keyframes rotate {
  from {transform: rotate(-50deg);}
  to {transform: rotate(450deg);}
}

.clock-face:after {
  content:"";
  position: absolute;
  width: 25px;
  height:5px;
  top:5px;
  left:-18px;
  animation: rotateTwo 3s linear forwards;
}

@keyframes rotateTwo {
  from {transform: rotate(0deg);}
  to {transform: rotate(90deg);}
}

Add fireworks:

.fireworks, .fireworks-2, .fireworks-3, .fireworks-4 {
  position: absolute;
  border-radius: 50%;
  width: 150px;
  height: 150px;
}

.fireworks {
  top:-60px;
  left:-70px;
}

.fireworks-4 {
  left: 330px;
  top:170px;
  transform: scale(1.3);
}

.fireworks-3 {
  top:-100px;
  left:250px;
  transform: scale(0.7);
}

.fireworks-2 {
  top:50px;
  left:-150px;
  transform: scale(1.2);
}

.one, .one:before, .one:after, .two, .two:before, .two:after{
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  left:50%;
  top:50%;
  opacity:0;
  transform: translate(-50%,-50%);
}

.one {
  border: 5px dotted #ffd166;
  animation: show 1.2s ease infinite 3s;
}

.two {
  border: 5px dotted #118ab2;
  animation: show 1.2s ease infinite 3.2s;
}

@keyframes show {
  0%, 100% {height:10px;width:10px;opacity:0;}
  50% {height:100px; width: 100px;opacity:1;}
}

.one:before {
  content:"";
  border: 5px dotted #ef476f;
  animation: show-2 1.2s ease infinite 3.2s;
}

.two:before {
  content:"";
  border: 5px dotted #ffd166;
  animation: show-2 1.2s ease infinite 3.4s;
}

.one:after {
  content:"";
  border: 5px dotted #118ab2;
  animation: show-3 1.2s ease infinite 3.4s;
}

.two:after {
  content:"";
  border: 5px dotted #ef476f;
  animation: show-3 1.2s ease infinite 3.6s;
}

@keyframes show-2 {
  0%, 100% {height:10px;width:10px;opacity:0;}
  50% {height:130px; width: 130px;opacity:1;}
}

@keyframes show-3 {
  0%, 100% {height:10px;width:10px;opacity:0;}
  50% {height:160px; width: 160px;opacity:1;}
}

Style and animate the text:

.text {
  width: 300px;
  text-align: center;
  color: white;
  font-size: 40px;
  position: absolute;
  top:305px;
  z-index:10;
  font-family: tahoma;
  left:0;
  opacity:0;
  white-space: nowrap;
  animation: text 4s ease forwards 4s;
}

@keyframes text {
  0% {opacity:0;}
  100% {opacity:1;}
}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Champagne Glass Animation

CSS Party drinks

CSS Birthday Animation

Categories
CSS HTML Web development

CSS Christmas Animation

CSS Christmas Animation

To learn how to create the CSS Christmas Animation follow the steps below.

Demo:

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

Step1.

Add HTML

<div class="merry-christmas">
  <div class="window">
    <div class="christmas-tree">
      <div class="star"></div>
      <div class="christmas-lights"></div>
      <div class="balls"></div>
    </div>
    <div class="curtains"></div>
    <div class="window-details"></div>
  </div>
  <div class="snow">
    <div class="snowflakes"></div>
    <div class="snowflakes-2"></div>
    <div class="snowflakes-3"></div>
    <div class="snowflakes-4"></div>
    <div class="snowflakes-5"></div>
  </div>
  <div class="bricks"></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: #00111c;
  overflow: hidden;
}

.merry-christmas {
  position: relative;
}

Style the window:

.window {
  position: relative;
  overflow: hidden;
  width:300px;
  height:220px;
  border: 10px solid #001523;
  background-color: #001a2c; 
}
.window-details {
 position: absolute;
 z-index:3;
 width:300px;
 height:5px;
 background-color: #001523;
 top:115px;
}

.window-details:before, .window-details:after {
  content:"";
  position: absolute;
  background-color: #001523;
  height: 220px;
  top:-115px;
}

.window-details:before {
  width:20px;
  left: 135px;
}

.window-details:after {
  width:5px;
  left:65px;
  box-shadow: 160px 0 #001523;
}
CSS Christmas Tree Window

Add Christmas Tree and curtains:

.christmas-tree, .christmas-tree:before {
  position: absolute;
  width:100px;
  height:0;
  border-bottom: 50px solid #242c1d;
  border-right: 30px solid transparent;
  border-left: 30px solid transparent;
}

.christmas-tree {
  top: 170px;
  left:120px;
}

.christmas-tree:before {
  content:"";
  top:-40px;
  left:-30px;
}

.christmas-tree:after {
  content:"";
  height:0;
  position: absolute;
  border-bottom: 90px solid #242c1d;
  border-right: 70px solid transparent;
  border-left: 70px solid transparent;
  top:-130px;
  left:-20px;
}

.star {
  position: absolute;
  display: block;
  width: 0px;
  height: 0px;
  border-right: 25px solid transparent;
  border-bottom: 18px solid #ffba08;
  border-left: 25px solid transparent;
  transform: rotate(-35deg);
  top:-140px;
  left:25px;
  z-index:1;
    }

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

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

.christmas-lights, .christmas-lights:before, .christmas-lights:after {
  position: absolute;
  width:5px;
  height: 5px;
  background-color: #ffba08;
  border-radius:50%;
}

.christmas-lights {
  top:-80px;
  left:7px;
  z-index:1;
  box-shadow:5px 2px #ffba08, 10px 4px #ffba08, 15px 6px #ffba08, 20px 8px #ffba08, 25px 10px #ffba08, 30px 12px #ffba08, 35px 14px #ffba08, 40px 16px #ffba08, 45px 18px #ffba08, 50px 20px #ffba08, 55px 22px #ffba08, 60px 24px #ffba08, 65px 26px #ffba08, 70px 28px #ffba08,75px 30px #ffba08, 80px 32px #ffba08, 85px 34px #ffba08, 90px 36px #ffba08;
  animation: light 17s linear infinite;
}

.christmas-lights:before {
  content:"";
  top:55px;
  left:-20px;
  box-shadow:5px 2px #ffba08, 10px 4px #ffba08, 15px 6px #ffba08, 20px 8px #ffba08, 25px 10px #ffba08, 30px 12px #ffba08, 35px 14px #ffba08, 40px 16px #ffba08, 45px 18px #ffba08, 50px 20px #ffba08, 55px 22px #ffba08, 60px 24px #ffba08, 65px 26px #ffba08, 70px 28px #ffba08,75px 30px #ffba08, 80px 32px #ffba08, 85px 34px #ffba08, 90px 36px #ffba08, 95px 38px #ffba08, 100px 40px #ffba08, 105px 42px #ffba08, 110px 44px #ffba08, 115px 46px #ffba08, 120px 48px #ffba08, 125px 50px #ffba08;
}

.christmas-lights:after {
  content:"";
  top:110px;
  left:-28px;
  box-shadow:5px 2px #ffba08, 10px 4px #ffba08, 15px 6px #ffba08, 20px 8px #ffba08, 25px 10px #ffba08, 30px 12px #ffba08, 35px 14px #ffba08, 40px 16px #ffba08;
}

@keyframes light {
  0% {filter: drop-shadow(0 0 8px #fff) brightness(1.2) hue-rotate(0) saturate(7);}
  50% {filter: drop-shadow(0 0 10px #fff) brightness(2) hue-rotate(360deg) saturate(7);}
  100% {filter: drop-shadow(0 0 8px #fff) brightness(1.2) hue-rotate(0) saturate(7);}
}

.balls {
  position: absolute;
  border-radius: 50%;
  height:15px;
  width: 15px;
  background-color: #b62922;
  box-shadow: 40px 30px #003488, 75px -15px #b62922, 45px -40px #b62922, 10px -55px #003488, 30px -95px #b62922, 65px -80px #003488;
  z-index:2;
}

.curtains {
  position: absolute;
  z-index:2;
}

.curtains:before, .curtains:after {
  content:"";
  position: absolute;
  background-color: rgba(0, 33, 55,0.6);
  width: 200px;
  height: 250px;
  top:-15px;
}

.curtains:before {
  border-radius: 0 0 50% 0;
  left:-100px;
}

.curtains:after {
  border-radius: 0 0 0 50%;
  left:200px;
}
CSS Christmas Tree Window

Add some snow and bricks:

.snow {
  position: absolute;
  z-index:5;
}

.snow:before, .snow:after {
  content:"";
  position: absolute;
  background-color: white;
  width:30px;
  height:5px;
}

.snow:before {
  top:-120px;
  left:10px;
  border-radius: 0 20px 0 0;
  box-shadow: 230px 105px white;
}

.snow:after {
  border-radius:10px;
  top:-245px;
  left:280px;
  box-shadow: -15px 0 white, -40px 0 white, -85px 0 white, -170px 0 white,-195px 0 white;
}

.bricks {
  position: absolute;
  background-color: #001523;
  width: 80px;
  height: 25px;
  left:100px;
  top:250px;
  box-shadow: 100px 0 #001523, 240px -50px #001523, -240px -100px #001523, -220px -150px #001523, 300px -200px #001523,-150px -300px #001523;
}
CSS Christmas Animation. Window.

and create the snowfall:

.snowflakes, .snowflakes-2, .snowflakes-3, .snowflakes-4, .snowflakes-5 {
  position: absolute;
  border-radius:50%;
  background-color: rgba(255,255,255,0.5);
  width:5px;
  height:5px;
  top:-500px;
  box-shadow: 100px -100px rgba(255,255,255,0.5), -100px -150px rgba(255,255,255,0.5), -200px -100px rgba(255,255,255,0.5), 0 -100px rgba(255,255,255,0.5), 200px -300px rgba(255,255,255,0.5), 100px -350px rgba(255,255,255,0.5), 150px -100px rgba(255,255,255,0.5), 70px -200px rgba(255,255,255,0.5), 300px -100px rgba(255,255,255,0.5), 400px -100px rgba(255,255,255,0.5), 450px -300px rgba(255,255,255,0.5), 500px -300px rgba(255,255,255,0.5), 600px -400px rgba(255,255,255,0.5), 550px -250px rgba(255,255,255,0.5), -200px -300px rgba(255,255,255,0.5), -100px -400px rgba(255,255,255,0.5), 700px -500px rgba(255,255,255,0.5),-400px -500px rgba(255,255,255,0.5), -350px -100px ;
  box-shadow: 100px -100px rgba(255,255,255,0.5), -100px -150px rgba(255,255,255,0.5), -200px -100px rgba(255,255,255,0.5), 0 -100px rgba(255,255,255,0.5), 200px -300px rgba(255,255,255,0.5), 100px -350px rgba(255,255,255,0.5), 150px -100px rgba(255,255,255,0.5), 70px -200px rgba(255,255,255,0.5), 300px -100px rgba(255,255,255,0.5), 400px -100px rgba(255,255,255,0.5), 450px -300px rgba(255,255,255,0.5), 500px -300px rgba(255,255,255,0.5), 600px -400px rgba(255,255,255,0.5), 550px -250px rgba(255,255,255,0.5), -200px -300px rgba(255,255,255,0.5), -100px -400px rgba(255,255,255,0.5), 700px -500px rgba(255,255,255,0.5),-400px -500px rgba(255,255,255,0.5), -350px -100px rgba(255,255,255,0.5), -500px -300px rgba(255,255,255,0.5), 800px -200px rgba(255,255,255,0.5), 750px -250px rgba(255,255,255,0.5), 680px -150px rgba(255,255,255,0.5), 900px -100px rgba(255,255,255,0.5), -700px -300px rgba(255,255,255,0.5),950px -310px rgba(255,255,255,0.5);
}

.snowflakes {
  animation: fall 7s linear infinite
}

@keyframes fall {
  0% {transform: translateY(0);}
  100% {transform: translateY(1000px) translateX(-100px);}
}

.snowflakes-2 {
  left: 100px;
  animation: fall-2 7s linear infinite;
}

@keyframes fall-2 {
  0% {transform: translateY(0);}
  100% {transform: translateY(1000px) translateX(100px);}
}

.snowflakes-3 {
  left:-200px;
  animation: fall-2 7s linear infinite 5s;
}

.snowflakes-4 {
  left:50px;
  animation: fall 7s linear infinite 2s;
}

.snowflakes-5 {
  left:-50px;
  animation: fall 7s linear infinite 4s;
}

Enjoy coding!

Hey, here’s something that might interest you:

CSS Christmas Card (Open/ Close on Click)

Pure CSS Snow Globe

CSS Christmas Tree

Categories
CSS Web development

Pure CSS Snow Globe

CSS Snow Globe

To learn how to create the CSS Snow Globe follow the steps below and watch the video tutorial.

Demo:

*to see the animation on the website click here.

Step1.

Add HTML

<div class="snow-ball">
  <div class="snow-globe">
  <div class="ball-container">
    <div class="cottage">
      <div class="roof"></div>
      <div class="window"></div>
      <div class="chimney">
        <div id="up" class="smoke"></div>
        <div id="up" class="smoke2"></div>
      </div>
    </div>
    <div class="snowman">
      <div class="scarf"></div>
      <div class="hat"></div>
    </div>
    <div class="trees"></div>
    <div class="trees2"></div>
    <div class="reflection"></div>
    <div class="snowfall">
      <div class="snowflake"></div>
      <div class="snowflake1"></div>
      <div class="snowflake2"></div>
    </div>
  </div>
  <div class="holder"></div>
  </div>
  <div class="shadow"></div>
</div>

Step2.

Add CSS

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

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

.snow-ball {
  position: relative;
  top:-15px;
}

Style the snow globe:

.ball-container {
  position: relative;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  border: 5px solid rgba(255,255,255,0.3);
  overflow: hidden;
}

.ball-container:before {
  content:"";
  position: absolute;
  background-color: #f2f2f2;
  width:350px;
  height: 110px;
  top:275px;
}

.ball-container:after {
  content:"";
  position: absolute;
  background-color: white;
  border-radius: 50%;
  width:324px;
  height:40px;
  top:255px;
  left:23px;
}
CSS Snow ball

Style the cottage:

.cottage {
  position: absolute;
  z-index:2;
  width: 80px;
  height: 40px;
  background-color: #aca081;
  box-shadow: -40px 0 #8d826c;
  top:230px;
  left:120px;
}

.cottage:before {
  content:"";
  position: absolute;
  background-color: #aca081;
  width:57.5px;
  height: 57.5px;
  transform: rotate(45deg);
  top:-28px;
  left:11px;
}

.cottage:after {
  content:"";
  position: absolute;
  background-color: #e7e7e7;
  box-shadow: -40px 0 #c0c0c0;
  width: 80px;
  height:20px;
  top:22px;
}

.roof {
  position: absolute;
  background-color: rgba(0,0,0,0.2);
  width:40px;
  height: 5px;
  left:-40px;
}

.roof:before {
  content:"";
  position: absolute;
  background-color: white;
  border-radius: 5px 0px 0px 5px;
  width:50px;
  height: 43px;
  top:-43px;
  transform: skew(-45deg);
  left:13px;
}

.roof:after {
  content:"";
  position: absolute;
  transform: skew(45deg);
  background-color: white;
  width: 7px;
  height: 43px;
  border-radius: 0 2px 5px 0;
  top:-43px;
  left:98px;
}

.window {
  position: absolute;
  width: 23px;
  height: 23px;
  background-color: #fff7c2;
  top:-5px;
  left:30px;
  box-shadow: 10px 0 #625f56, -10px 0 #625f56;
}

.window:before {
  content:"";
  position: absolute;
  width: 23px;
  height: 2px;
  background-color: #c5bb97;
  top:11px;
}

.window:after {
  content:"";
  position: absolute;
  width: 2px;
  height: 23px;
  background-color: #c5bb97;
  top:0;
  left:10.3px;
}

.chimney {
  position: absolute;
  background-color: #8d826c;
  width:15px;
  height:30px;
  top:-45px;
  left:-25px;
  box-shadow: 0 -5px #625f56;
  z-index:3;
}

.chimney:before {
  content:"";
  position: absolute;
  width:10px;
  height: 5px;
  background-color: #bfaf94;
  border-radius:10px;
  top: 15px;
  left: 60px;
  box-shadow: 5px 10px #bfaf94, -8px 15px #bfaf94, -28px 25px #bfaf94, -32px 35px #bfaf94, 20px 17px #bfaf94, 30px 30px #bfaf94, 32px 40px #bfaf94,-28px 44px #bfaf94, -50px 37px #7d7360, -55px 44px #7d7360, -70px 41px #7d7360;
}

.chimney:after {
  content:"";
  position: absolute;
  background-color: white;
  width:45px;
  height: 10px;
  top:62px;
  left:44px;
  border-radius:5px;
}
CSS Snowball

And add smoke from the chimney:

#up {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #e5e5e5;
  border-radius: 50%;
  opacity: 0;
  top: -25px;
  left: -5px;
  z-index:-1;
}

.smoke {
  animation: up 2.5s ease-out infinite; 
}

.smoke2 {
  animation: up 1.7s ease-out infinite 1s; 
}

.smoke2:before {
  content:"";
  position: absolute;
  left:5px;
  width:15px;
  height:15px;
  background-color: #e5e5e5;
  border-radius:50%;
  top:20px;
}

@keyframes up {
  0%{
    transform: translateY(0) scale(0.5);
    opacity: 0.8;
  }
  100%{
    transform: translateY(-50px) scale(1.35);
    opacity: 0.1;
  }
}

Style trees and the snowman:

.trees {
  position: absolute;
  background-color: white;
  width:20px;
  height:45px;
  border-radius:10px;
  left:50px;
  top:210px;
  z-index:3;
  box-shadow: 160px -10px white;
}

.trees:before {
  content:"";
  position: absolute;
  background-color: #625f56;
  width:5px;
  border-radius:5px 5px 0 0;
  height:30px;
  left:7.5px;
  top:25px;
  box-shadow: 159.5px -10px #625f56;
}

.trees2 {
  position: absolute;
  height:0;
  width:0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 90px solid #97b2b0;
  top:165px;
  left:165px;
}

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

.trees2:after {
  content:"";
  position: absolute;
  height:0;
  width:0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 90px solid #62827c;
  left:-140px;
  top:20px;
}

.snowman {
  position: absolute;
  border-radius:50%;
  background-color: rgba(0,0,0,0.1);
  width:30px;
  height:10px;
  top:270px;
  left:265px;
  z-index:4;
}

.snowman:before {
  content:"";
  position: absolute;
  background-color: #f2f2f2;
  width:30px;
  height:30px;
  border-radius: 50%;
  top:-23px;
}

.snowman:after {
  content:"";
  position: absolute;
  background-color: #f2f2f2;
  width:20px;
  height:20px;
  border-radius: 50%;
  top:-40px;
  left:5px;
}

.scarf {
  position: absolute;
  width:20px;
  height:5px;
  background-color: #a5a696;
  top:-23px;
  left:5px;
  border-radius:10px;
  z-index:5;
}

.scarf:before {
  content:"";
  position: absolute;
  width:5px;
  height: 15px;
  background-color: #a5a696;
  left:5px;
  border-radius:10px;
}

.scarf:after {
  content:"";
  position: absolute;
  height:0;
  width:0;
  border-top:3px solid transparent;
  border-bottom:3px solid transparent;
  border-right: 10px solid #ca6702;
  top:-7px;
  left:-5px;
  transform: rotate(-10deg);
}

.hat {
  position: absolute;
  z-index:6;
  border-top: 12px solid #60676a;
  border-right: 2px solid transparent;
  border-left: 2px solid transparent;
  border-bottom: 5px solid transparent;
  width:15px;
  top:-52px;
  left:5px;
}

.hat:before {
  content:"";
  position: absolute;
  background-color: #60676a;
  width: 25px;
  height:3px;
  border-radius:10px;
  left:-5px;
}

.hat:after {
  content:"";
  position: absolute;
  background-color: #60676a;
  border-radius:50%;
  width:3px;
  height:3px;
  top:5px;
  box-shadow: 5px 0 #60676a;
}
CSS Snow Ball

Add the ball reflection and the holder with the shadow:

.reflection {
  position: absolute;
  z-index:7;
  background-color: rgba(255,255,255,0.2);
  width: 370px;
  height: 370px;
  border-radius: 50%;
  box-shadow: inset 5px 10px 20px rgba(255,255,255,0.4);
}
.holder {
  position: absolute;
  z-index:8;
  width:255px;
  height:20px;
  background-color: #625f56;
  top:335px;
  left:63px;
}

.holder:before {
  content:"";
  position: absolute;
  width: 255px;
  height:0;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-bottom: 60px solid #7d7360;
  top:20px;
  left:-10px;
}

.holder:after {
  content:"";
  position: absolute;
  width:285px;
  height: 5px;
  border-radius:20px;
  background-color: #625f56;
  top:75px;
  left:-15px;
}

.shadow {
  position: absolute;
  width: 370px;
  height: 10px;
  border-radius:20px;
  background-color: rgba(0,0,0,0.2);
  top:410px;
  left:4px;
  transition: .3s;
}
Pure CSS snowglobe

Create the Snowfall:

.snowfall {
  position: absolute;
  z-index:6;
}

.snowflake, .snowflake1, .snowflake2 {
  position: absolute;
  border-radius:50%;
  background-color: white;
  width: 7px;
  height: 7px;
  filter: blur(1px);
  left: 50px;
  box-shadow: 40px 40px white, -40px -40px white, 80px 60px white, 100px -70px white, 110px -20px white,20px -20px white,120px 40px white, 150px 10px white, 180px 20px white, 50px -60px white, 100px 20px white, 150px -80px white, 170px -50px white, 185px -70px white, 190px 40px white, 220px -10px white, 230px -60px white, 240px -30px white, 250px 20px white, 260px -80px white, -20px 20px white, 10px 10px white, 280px -40px white, 300px -10px white, 320px -100px white, 290px -110px white, 100px -100px white, 80px -120px white;
  animation: fall 2.5s linear infinite;
}

.snowflake {
  left:0;
}

.snowflake1 {
  top:-80px;
  left: 60px;
  animation-delay: .5s;
}

.snowflake2 {
  top: -70px;
  left: 100px;
  animation-delay: 1s;
}

@keyframes fall {
  0 {transform: translateY(-50px);opacity:0.9;}
  100% {transform: translateY(380px);opacity:0.2;}
}

Add effects on hover:

.snow-ball:hover .snow-globe {
  animation: shake .3s ease;
  animation-iteration-count: 2;
}

@keyframes shake {
  0% {transform: rotate(0);}
  25% {transform: rotate(-30deg);}
  50% {transform: rotate(0);}
  75% {transform: rotate(30deg);}
  100% {transform: rotate(0);}
}
.snow-ball:hover .shadow {
  opacity:0;
}

.snow-ball:hover .snowfall {
  animation: bounce .5s ease;
  animation-iteration-count: 2;
}

@keyframes bounce {
	0%, 100% {transform: translateX(0);}
	10%, 30%, 50%, 70%, 90% {transform: translateX(-20px);}
	20%, 40%, 60%, 80% {transform: translateX(20px);}
}

Enjoy coding!

Watch also the video tutorial:

Hey, here’s something that might interest you:

CSS Christmas Tree Snow Globe

CSS Winter window scene

JS Canvas Snow Animation

Categories
CSS HTML Web development

CSS Bouncing Envelope / Contact Animation

CSS Bouncing Envelope / Contact Animation

To learn how to create the CSS Bouncing Envelope follow the steps below and watch the video tutorial.

Demo:

*to see the animation on the website click here.

Step1.

Add HTML

<div class="contact-envelope">
  <div class="envelope">
    <div class="envelope-back"></div>
    <div class="message"></div>
    <div class="envelope-front"></div>
  </div>
  <div class="shadow"></div>
</div>

Step2.

Add CSS

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

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

.contact-envelope {
  position: relative;
  border-radius: 50%;
  background-color: #4987f4;
  width:200px;
  height: 200px;
  z-index:-1;
}

Style the envelope:

.envelope {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width:200px;
  height: 200px;
  animation: bounce 1s ease infinite;
}

.envelope-back {
  position: absolute;
  background-color: #e19605;
  width:110px;
  height: 70px;
  top:80px;
  z-index:1;
}

.envelope-back:before {
  content:"";
  position: absolute;
  background-color: #e19605;
  border-radius:10px;
  width: 84px;
  height: 84px;
  top:-39px;
  left:13px;
  transform: rotate(-45deg);
}

.message {
  position: absolute;
  z-index:2;
  background-color: #eae2b7;
  width:90px;
  height: 95px;
}

.message:before {
  content:"";
  position: absolute;
  background-color: #ced4da;
  width: 75px;
  height: 3px;
  left:7.5px;
  top:12px;
  box-shadow: 0 10px #ced4da, 0 20px #ced4da, 0 30px #ced4da, 0 40px #ced4da, 0 50px #ced4da, 0 60px #ced4da, 0 70px #ced4da;
}

.envelope-front:before, .envelope-front {
  position: absolute;
  width:0;
  height:0;
  border-top: 35px solid transparent;
  border-bottom: 35px solid transparent;
}

.envelope-front {
  border-right: 60px solid #f9c748;
  z-index:3;
  left:95px;
  top:80px;
}

.envelope-front:before {
  content:"";
  border-left: 60px solid #f9c748;
  left:-50px;
  top:-35px;
}

.envelope-front:after {
  content:"";
  position: absolute;
  width:0;
  height:0;
  border-bottom: 45px solid #fcb933;
  border-left: 55px solid transparent;
  border-right: 55px solid transparent;
  left:-50px;
  top:-10px;
}

Add the shadow:

.shadow {
  position: absolute;
  width: 110px;
  height: 10px;
  background-color: rgba(0,0,0,0.4);
  border-radius:50%;
  top:145px;
  left:45px;
  z-index:-2;
  animation: scale 1s linear infinite;
}

Step3.

Add CSS Animation

 @keyframes bounce {
        0%   { transform: scale(1,1) translateY(0); }
        10%  { transform: scale(1.1,.9) translateY(0); }
        30%  { transform: scale(.9,1.1)   translateY(-55px);}
        50%  { transform: scale(1.05,.95) translateY(0); }
        58%  { transform: scale(1,1) translateY(-7px); }
        65%  { transform: scale(1,1) translateY(0);}
        100% { transform: scale(1,1) translateY(0);}
    }

@keyframes scale {
  0% {transform: scaleX(1);}
  10% {transform: scaleX(1);}
  30% {transform: scaleX(0.5);}
  50% {transform: scaleX(1.1);}
  58% {transform: scaleX(1);}
  75% {transform: scaleX(0.98);}
  100% {transform: scaleX(1);}
}

Enjoy coding!

Watch also the video tutorial:

Hey, here’s something that might interest you:

CSS Bouncing Text Animation

CSS Bouncing Basketball

Pure CSS Envelope (Open/Close on click)