Dear friends in this articles we learn about How to make Cigarette with Vapor Effect Using CSS Only | Cigarette. If you like our article then visit more.

Creative

Now you have to do coding, your file has also been created, now time has come to do your coding, so before starting coding, you must know about html css because whatever code we will write, it is in html and css only. That’s why these languages ​​are very important to you, so let’s start coding now and make cigarette.

How to make it.

Press ctrl + 1 and see the shortcut feature of Visual Studio Code in front of you, using which makes our work easy and very quick, when you do ctrl + 1, then the complete syntax of html will open in front of you, using which we create a website We can create web applications, all the code that is written is written inside it, so it is very important for us to learn html if we want to become a web developer, then well then we know how make cigarette further coding do. So here you can make easily cigarette using css only with vapour effect and i hope you like it.

In this creative used all css code with animation effect and you can make by external css but we are making with internal css without any cdn link and code.

Cigarette

First of all you have to take div and give it a class and save it by keeping class name as container then you have to take form tag inside it you have to take h3 heading and save it by keeping title of form, after that you have to take div again and its The class name is to be named iconbox, then inside it you have to take the span tag and put a label in it, then take another div tag and save its class name by keeping the box, then take another div tag and save its class name by placing the icon. Then put the user icon inside it and then save it.

HTML for Cigarrete

Friends, now we will write the code of html, then first of all you have to go to the body tag. And there you have to take div tag and name of its class you have to name cigarette. After that you have to take div tag in cigarette and you will name its class bottom. Again you have to take div tag and name its class vapour. Then inside it you have to take span tag and give style to it with variable like i 1 in the same way you have to take 6 more times for make this cigarette.

CSS for Design

Now we will know how to design cigarette with css. So let’s know how to style. First of all you have to go to head section and in that you have to take style tag then after that you have to take * tag and also keep margin 0 padding 0 after that you have to put box sizing border box. Then take the body tag and flex the display in it. Then justify content has to be centered and aligned items have to be centered. Then we will take minimum height 100vh and take background rgb.

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: rgb(36, 35, 37);
}

Now we will take cigarette class and in this class we will give width 400px and height 50px. Then after this we will give the border right 10px solid red. and background white then we will give box shadow 2px 0px 5px red. Then we will take the bottom class and in that we will keep the width at 25% and keep the height as 100% then keep the background rgb and take 7px solid gray from the border right.

.cigarette{
width: 400px;
height: 50px;
border-right: 10px solid red;
background: white;
box-shadow: 2px 0px 5px red;
}
.bottom{
width: 25%;
height: 100%;
background: rgb(180, 80, 13);
border-right: 7px solid grey;
}

Now we will take the vapour class and set the position to absolute inside it then 46% from the top and 64% from the left after that we will flex the display and set the z index to 1 so that we go up and show. Then we’ll take the span tag and make the position relative inside it, then block the display 50px from the bottom. After that set the margin to 0 from top and 2px from right and 50px from bottom left.

After that we will keep the minimum width 4px and height 80px then give the border right 2px solid white. And then give the border radius 50% after that we will keep the animation animate 5s linear infinity then we will make 5px blur in the filter. After that we will delay the animation and calculate and take the var i which we styled inside the span in the code of html.

.vapour{
position: absolute;
top: 46%;
left: 64%;
display: flex;
z-index: 1;
}
.vapour span{
position: relative;
bottom: 50px;
display: block;
margin: 0 2px 50px;
min-width: 4px;
height: 80px;
border-right: 2px solid white;
border-radius: 50%;
animation: animate 5s linear infinite;
filter: blur(5px);
animation-delay: calc(var(–i) * -0.4s);
}

Now we will give animation in vapour To give animation we have to take animate variable and then after keyframe we will paste that variable then we will transform translate y to 0 and scale x to 0 in it Then we’ll set the opacity to 1 at 15%. Then at 50% the transform translate y to 150px and scale X to 5. Then at 95% we’ll set the opacity to 0 then at 100% the transform transform to -300px and scale x 10 Something like this.

@keyframes animate{
0%{
transform: translateY(0) scaleX(1);
opacity: 0;
}
15%{
opacity: 1;
}
50%{
transform: translateY(-150px) scaleX(5);
}
95%{
opacity: 0;
}
100%{
transform: translateY(-300px) scaleX(10);
}
}

If you want to get source code related this artcle the copy the given blow code and phaste you code editor then run it.

Source Code..

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cigarette</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: rgb(36, 35, 37);
        }
        .cigarette{
            width: 400px;
            height: 50px;
            border-right: 10px solid red;
            background: white;
            box-shadow: 2px 0px 5px red;
        }
        .bottom{
            width: 25%;
            height: 100%;
            background: rgb(180, 80, 13);
            border-right: 7px solid grey;
        }
        .vapour{
            position: absolute;
            top: 46%;
            left: 64%;
            display: flex;
            z-index: 1;
        }
        .vapour span{
            position: relative;
            bottom: 50px;
            display: block;
            margin: 0 2px 50px;
            min-width: 4px;
            height: 80px;
            border-right: 2px solid white;
            border-radius: 50%;
            animation: animate 5s linear infinite;
            filter: blur(5px);
            animation-delay: calc(var(--i) * -0.4s);
        }
        @keyframes animate{
            0%{
                transform: translateY(0) scaleX(1);
                opacity: 0;
            }
            15%{
                opacity: 1;
            }
            50%{
                transform: translateY(-150px) scaleX(5);
            }
            95%{
                opacity: 0;
            }
            100%{
                transform: translateY(-300px) scaleX(10);
            }
        }
    </style>
</head>
<body>
    <div>
           <div></div>
           <div></div>
           <div>
            <span style="--i:1;"></span>
            <span style="--i:3;"></span>
            <span style="--i:2;"></span>
            <span style="--i:6;"></span>
            <span style="--i:5;"></span>
            <span style="--i:4;"></span>
            <span style="--i:7;"></span>
        </div>
    </div>
</body>
</html>

Watch video related this article…