Wish Happy Diwali Using CSS Design

First of all Happy Chhoti Diwali to all and so Diwali is tomorrow, let's create a unique developer way to wish you all.

Structure

folder

• index.html
• style.css

If you notice in the image, you'll see the bomb rockets and the normal rockets and on the other side the text itself.

So our target will be to write the code for bomb rockets, glowing text, continuous animation of rockets.

• Writing the background CSS to make it more elegant.

@import url("https://fonts.googleapis.com/css?family=Concert+One");
html,
body {
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
}

Above will create the background of #1B2735 this in radial gradient & also import the Google Font for better Text Visibility.

• Next will give write CSS for the text itself to make awesome.

.text {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  text-align: center;
  font-size: 10vw;
  font-family: 'Concert One', cursive;
  -webkit-animation: text-animation 5s linear infinite alternate;
          animation: text-animation 5s linear infinite alternate;
}

Perfect! Now we have a background and Text itself Happy Diwali at the center.

• Now let's add an animation frame to give it boldness

@-webkit-keyframes text-animation {
  from {
    color: white;
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B;
  }
  to {
    color: white;
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff0080, 0 0 30px #ff0080, 0 0 40px #ff0080, 0 0 55px #ff0080, 0 0 75px #ff0080;
    text-align: center;
  }
}

@keyframes text-animation {
  from {
    color: white;
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B;
  }
  to {
    color: white;
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff0080, 0 0 30px #ff0080, 0 0 40px #ff0080, 0 0 55px #ff0080, 0 0 75px #ff0080;
    text-align: center;
  }
}

• Up to this we have added text and boldness, Now it's time to add rockets and bombs which is necessary on Diwali.

.bomb-rocket, .normal-rocket {
  position: absolute;
  bottom: 0;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.bomb-rocket:nth-child(1) {
  left: 82vw;
  -webkit-animation-name: bomb-rocket-animate-2;
          animation-name: bomb-rocket-animate-2;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
  color: hotpink;
}

.normal-rocket:nth-child(16) {
  left: 50vw;
  -webkit-animation-name: normal-rocket-animate-2;
          animation-name: normal-rocket-animate-2;
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
  color: deepskyblue;
}

Well done! we got bold & glowing Happy Diwali and we have already created rockets and bomb but what's missing is fire.

@-webkit-keyframes bomb-rocket-animate-1 {
  0% {
    -webkit-transform: rotate(-10deg) translateY(0) scale(0);
            transform: rotate(-10deg) translateY(0) scale(0);
    opacity: 1;
    box-shadow: none;
  }
  0.1% {
    -webkit-transform: rotate(-10deg) translateY(0) scale(0.1, 0.5);
            transform: rotate(-10deg) translateY(0) scale(0.1, 0.5);
    background: -webkit-gradient(linear, left top, left bottom, from(currentColor), color-stop(80%, #000000));
    background: linear-gradient(180deg, currentColor 0%, #000000 80%);
    box-shadow: none;
    opacity: 1;
  }
  50% {
    -webkit-transform: rotate(-10deg) translateY(-50vh) scale(0.1, 0.5);
            transform: rotate(-10deg) translateY(-50vh) scale(0.1, 0.5);
    background: -webkit-gradient(linear, left top, left bottom, from(currentColor), color-stop(80%, #000000));
    background: linear-gradient(180deg, currentColor 0%, #000000 80%);
    box-shadow: none;
    opacity: 1;
  }

Since the animations & colors are quite big attaching the gist of CSS here.

Diwali CSS

Now, we are done with CSS, let's HTML structure to make it alive in the box.

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="./style.css">

</head>
<body>
<div class="bomb-rocket"></div>
<div class="bomb-rocket"></div>
<div class="normal-rocket"></div>
<div class="normal-rocket"></div>
<div class="normal-rocket"></div>
<div class="text">Happy Diwali</div>
</body>
</html>

Add more & more bomb-rocket and normal-rocket to give virtual effect.

Thank you all for giving your time & Wish you a very very Happy Diwali .