Dear friends in this articles we learn about How to make Tea Cup With Vapor Effect using CSS only | CSS Creative. If you like our article then visit more.
Table of Contents
Tea Cup Using CSS
First of all, you have to download a code editor in which we can write our code, we are telling you the names of some code editors, Visual Studio Code, this is the most used and most people use it because some of its features are very Works easily in writing our code quickly and it has built-in tags and properties, with the help of which we make our code very easy for make tea cup.
VS Code Editor
After this, you have to open the code editor and save it by selecting a new file and remember that while saving the file, you must write dot html because the browser has to explain it from html itself, without html we can not run any language That’s why it is very important for us to come to html for make a tea cup.
HTML CSS
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.
In this article, I came up with something very cool stuff — Smoking hot coffee cup animation. Ya!! you read it correctly, don’t get confused just check out the above GIF, looks great right? So here I’m going to show you guys how to create the Smoking hot coffee cup using CSS3 Keyframe Animations.
I tried to create the smoke animation effect using box-shadow and CSS3 Keyframe Animations without using any other Animation frameworks. It’s really very simple to create the Smoky Cup. This is make on the visual code editor and amazing vapour effect it is a unique design on the web unity.
Come, Let’s dive
HTML Code
Consider a div with class:wrapper and next inside that consider a div with class:cup and now inside the child div consider the two span elements with different classes, one class:handle is to create the handle of the cup and one more class:smoke is to create the smoke effect.
HTML for Structure
Friends, now we will know how to write html code and what we will need to write code. So let’s know that first you have to download Visual Studio Code Editor. To download, you have to go to the official website of Visual Studio and from there you can download the editor for your system. Then after installing it, after installing, open the editor, then select the new file, write its name and put dot html in the last.
Now we have to first take the div and name its class as container. After that take another div inside the container and name it cup then we will take another div inside the cup and name it top then also take another div tag inside it and name it circle then inside top Will take another div and name it handle. Take the div tag again and name its class vapour. Inside vapour class will take span tag and give style to it along with variable i 1 . Then we will copy and paste it 17 times so that we can give animation to the vapour.
CSS for Design
Friends, now we will know where to write css and how to write it, first of all you need to know that in how many ways we can write css. So let’s know. We can write css in 3 ways. First we can write inline, second we can write internal. And third I can write external. But we have written inline in this article so that we can keep our code in a single file.
First we will go to the head section and go there and take the style tag then we will write the css inside it. Something like this first we will take * and put margin 0 padding 0 inside it then take box sizing border box. After that we will take body tag and in that we will flex the display then center justify content and also center the align items then keep the minimum height 100vh then 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);
}
Then we will take container class and make position relative in it, after that we will make 50px from top then we will take cup class and keep position relative in that too, after that width will be 280px and height will be 300px. Then take the background linear gradient, then keep the border bottom left radius 45% and also keep the border bottom right radius 45%. Then we’ll take the top class and position it as absolute, making it -30px from top and 0 from left. Then make it with 100% and set the height to 60px. Then in this too background will take linear gradient and make the border 50% radius.
.container{
position: relative;
top: 50px;
}
.cup{
position: relative;
width: 280px;
height: 300px;
background: linear-gradient(to right, #f9f9f9, #d9d9d9);
border-bottom-left-radius: 45%;
border-bottom-right-radius: 45%;
}
.top{
position: absolute;
top: -30px;
left: 0;
width: 100%;
height: 60px;
background: linear-gradient(to right, #f9f9f9, #d9d9d9);
border-radius: 50%;
}
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>Tea Cup by Code with Nizami</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);
}
.container{
position: relative;
top: 50px;
}
.cup{
position: relative;
width: 280px;
height: 300px;
background: linear-gradient(to right, #f9f9f9, #d9d9d9);
border-bottom-left-radius: 45%;
border-bottom-right-radius: 45%;
}
.top{
position: absolute;
top: -30px;
left: 0;
width: 100%;
height: 60px;
background: linear-gradient(to right, #f9f9f9, #d9d9d9);
border-radius: 50%;
}
.circle{
position: absolute;
top: 5px;
left: 10px;
width: calc(100% - 20px);
height: 50px;
background: linear-gradient(to left, #f9f9f9, #d9d9d9);
border-radius: 50%;
box-sizing: border-box;
overflow: hidden;
}
.tea{
position: absolute;
top: 20px;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(#c57e65, #e28462);
border-radius: 50%;
}
.handle{
position: absolute;
right: -70px;
top: 40px;
width: 160px;
height: 180px;
border: 25px solid #dcdcdc;
border-left: 25px solid transparent;
border-bottom: 25px solid transparent;
border-radius: 50%;
transform: rotate(42deg);
}
.plate{
position: absolute;
bottom: -50px;
left: 50%;
transform: translateX(-50%);
width: 500px;
height: 200px;
background: linear-gradient(to right, #f9f9f9, #e7e7e7);
border-radius: 50%;
box-shadow: 0 35px 35px rgba(0, 0, 0, 0.2);
}
.plate::before{
content: '';
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
border-radius: 50%;
background: linear-gradient(to left, #f9f9f9,#e7e7e7);
}
.plate::after{
content: '';
position: absolute;
top: 30px;
left: 30px;
right: 30px;
bottom: 30px;
border-radius: 50%;
background: radial-gradient(rgba(0,0,0,0.2) 25%, transparent, transparent);
}
.vapour{
position: relative;
display: flex;
z-index: 1;
padding: 0 20px;
}
.vapour span{
position: relative;
bottom: 50px;
display: block;
margin: 0 2px 50px;
min-width: 8px;
height: 120px;
background: #fff;
border-radius: 50%;
animation: animate 5s linear infinite;
filter: blur(8px);
animation-delay: calc(var(--i) * -0.5s);
}
@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:16;"></span>
<span style="--i:5;"></span>
<span style="--i:13;"></span>
<span style="--i:20;"></span>
<span style="--i:6;"></span>
<span style="--i:7;"></span>
<span style="--i:10;"></span>
<span style="--i:8;"></span>
<span style="--i:17;"></span>
<span style="--i:11;"></span>
<span style="--i:12;"></span>
<span style="--i:14;"></span>
<span style="--i:2;"></span>
<span style="--i:9;"></span>
<span style="--i:15;"></span>
<span style="--i:4;"></span>
<span style="--i:19;"></span>
<span style="--i:18;"></span>
</div>
<div>
<div></div>
</div>
</div>
<div></div>
</div>
</div>
</body>
</html>Watch video related this article…
