Dear friends in this article we will tell you how to design simple glass card using html and css. So i hope you like our article because here you can get the source code free and this code you use in the projects. Guys if you learn more interesting articles then go to search bar and type article name then you can find easily more interested articles.
Table of Contents
Popular Articles
How to make progress bar using css?
How to make flipbook using css?
How to make portfolio website with dark mode enable or disable using javascript?
How to create avatar using css only?
How to Start?
First of all learn html, css for design this Simple Glass Card and make a best ui project because css is the most important for any web designs. If you want to lean html, css then visit w3school website. It is a best site for learning programing languages and them get the manual try run button. After this doownload visual studio code for coding and install it in your system then you are ready for make it.
Now open your vs code editor and go to the right top section and click on file and select new file then save filename.html after this press ctrl+1 then html syntax generate automatically on your editor. This feature inbuild only visual code editor so i suggested you download this editor and make projects easily because it is a best code editor software. And this design for simple glass card project make a fast with visual studio code editor.
HTML for Simple Glass Card
Friends, now we will know how to write html code to make simple glass card and from where we will start for this. So let’s know. First of all you have to go to body tag and then inside that you have to take a div tag along with you have to take class and name of class will be circle. After that again you have to take another div tag inside the body tag and also you have to take the class and we will name its class as square. After that take another div tag and name its class as glass then save it.
Friends, if you have not understood anything after reading, then you can also understand by looking at the source code of our html given below. Or you can copy the source code and paste it in your code editor so that you do not spend much time writing the code.
HTML Source Code..
<div class="circle"></div>
<div class="sqaure"></div>
<div class="glass"></div>SS for Glassmorphism Card Design
Now we will know how to use css for make this Simple Glass Card. So first of all you have to know how we use css. So let’s know how to use it. We use css in three ways, first we also use it inline. And secondly we also use it internally. Thirdly, we also use it externally. But we have used css internally in this design. For that you have to go to your head section. And you have to type style, then the style tag will come in front of you, then closing it also has to be done. After this you have to take * inside it, then open and close curly braces. Then add margin 0 padding 0 box sizing border box.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
Now we will take the body tag and inside that we will flex the display after that we will center the justify content. Then we will also center the align items with the minimum height set to 100vh and then the background color will be rgb, something like this.
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: rgb(15,15,15);
}
Friends, now we have to take the glass class and in that first we will set its position by giving absolute. After that we will set the z index to 1 and then the width will be 300px after that we will take the height of 400ps then we will make 1px solid rgb from the border top and also 1px solid rgb from the border left. Then we will give background color rgba in it. After that we’ll make it 20px as the Backdrop Filter. Then at the end we’ll make the border a 10px radius, for example.
.glass{
position: absolute;
z-index: 1;
width: 300px;
height: 400px;
border-top: 1px solid rgb(129,129,129);
border-left: 1px solid rgb(129,129,129);
background: rgba(109,109,109,0.226);
backdrop-filter: blur(20px);
border-radius: 10px;
}
After this we will take the circle class and in this we will keep the width 150px and also keep its height 150px. After that we will give it 50% border radius so that circle can be made after that we will give background color rgb. Will keep its position absolute and make it 55% from the top and then 33% from the left. Something like this.
.circle{
width: 150px;
height: 150px;
border-radius: 50%;
background-color: rgb(0,238,255);
position: absolute;
top: 55%;
left: 33%;
}
Now we will take square class and in this we will set width to 150px and height to 150px after that we will keep background color as rgb then we will make position absolute so that we can set its position. Then we’ll do 20% from the top and 33% from the right. Something like this.
.sqaure{
width: 150px;
height: 150px;
background-color: rgb(255,0,149);
position: absolute;
top: 20%;
right: 33%;
}
Friends, we hope that whatever we have told you, you must have clearly understood and after reading this article you will be able to make glass cards by yourself. Friends, if you liked this article of ours. So visit our channel once from you so that you get to learn more and we make videos related to ui developments only. So you are requested to visit our channel once. So that you get to learn something else.
CSS Source Code..
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: rgb(15,15,15);
}
.glass{
position: absolute;
z-index: 1;
width: 300px;
height: 400px;
border-top: 1px solid rgb(129,129,129);
border-left: 1px solid rgb(129,129,129);
background: rgba(109,109,109,0.226);
backdrop-filter: blur(20px);
border-radius: 10px;
}
.circle{
width: 150px;
height: 150px;
border-radius: 50%;
background-color: rgb(0,238,255);
position: absolute;
top: 55%;
left: 33%;
}
.sqaure{
width: 150px;
height: 150px;
background-color: rgb(255,0,149);
position: absolute;
top: 20%;
right: 33%;
}
