How to create UI designed glassmorphic cards
Creating UI designed glassmorphic cards with vannila-tilt effect
Note : OUTPUT IS AT THE END OF THE CODE .DONT MISS
GLASSMORPHISM
Hello guys.I have been here today with another dynamic article about creating UI designed GLASSMORPHIC CARDS using Html and Css. It's really simple by following this tutorial.
Here these are the steps to get the correct result .plz follow the steps one by one
Step 1- first of all write the basic code of html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
So for that we have to create cards using the following code.In this code i have taken a main division named main,in which all the sub divisions are embed in that.
In that main division tag create a division with name profile card and in that sub division create another sub division in which it contains the information of the card like heading tags and paragraph tags which contain information about the person belongs to the card.
Here I'm going to create a small photo of the user, so I have create a img using img tag with dimensions.
<div class="main">
<div class="profilecards">
<div class="overview">
<img height="65px" width="65px" src="E:\☻DINESH IMP☻\html css/download.jpg" alt="" class="img">
<h3>wiliard johns</h3>
<p>hello guys !welcome to Mr.unofficial blog here im goig to create a glassmorphic card effect using html and css</p>
<a href="#">read more</a>
</div>
</div>
</div>
Now the total html code looks like this given below.
<body>
<div class="main">
<div class="profilecards">
<div class="overview">
<img height="65px" width="65px" src="E:\☻DINESH IMP☻\html css/download.jpg" alt="" class="img">
<h3>wiliard johns</h3>
<p>hello guys !welcome to Mr.unofficial blog here im goig to create a glassmorphic card effect using html and css</p>
<a href="#">read more</a>
</div>
</div>
<div class="profilecards">
<div class="overview">
<img height="65px" width="65px" src="E:\☻DINESH IMP☻\html css/download.jpg" alt="" class="img">
<h3>antony williams</h3>
<p>hello guys !welcome to Mr.unofficial blog here im goig to create a glassmorphic card effect using html and css</p>
<a href="#"> read more</a>
</div>
</div>
<div class="profilecards">
<div class="overview">
<img height="65px" width="65px" src="E:\☻DINESH IMP☻\html css/download.jpg" alt="" class="img">
<h3>sergio marconi</h3>
<p>hello guys !welcome to Mr.unofficial blog here im goig to create a glassmorphic card effect using html and css</p>
<a href="#"> read more</a>
</div>
</div>
</div>
</body>
So for designing the background I'm taking margin and padding of the whole content will be zero .And take the box-sizing as border box.
And we have to write the code for designing the attributions which make the content to be at center and background color should be dark .To design that follow the below code.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
justify-content: center;
align-items: center;
display: flex;
min-height: 100vh;
background: #050505;
color: #fff;
}
Here i have designed the position of the semi circles to in the body to be absolute and aslo adjusted the height and width.Its time to create a gradient semi circle, so for that take the background as linear gradient and give the desired colors.
Now the gradient will spread over the page ,so we have to make it as a circle using the "clip-path" tag as shown below.
As same as shown above ,do it for after body condition .In this we will create a semi circle using clip-path tag .Follow the code to understand.
body::before {
content: '';
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: linear-gradient( #EE7752, #23A6D5, #e71034);
clip-path: circle(20% at right 70%);
}
body::after {
content: '';
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: linear-gradient(#e71034, #23A6D5);
clip-path: circle(20% at left 30%);
}
Step 4- Now it's time to style the cards.
Here i have considered the main division and styled it.I have aligned the items to be located at center and justified the content to be at center .
And the main thing done here is that I have used the display property and flex wrap property which makes the cards flow one after another.
And i also used z index, which can regulate the cards to be indexed at one .
.main {
align-items: center;
justify-content: center;
position: relative;
display: flex;
flex-wrap: wrap;
z-index: 1;
max-width: 1200px;
}
Here i have write the code in which I have included the cards height and width ,position , alignments etc..
And now for designing the Background just looks like glassmorphic follow the color code given in the code and we also add a little border to the card which makes it more beautiful.
Its not enough for the card something is missing ,🤔 yeah got it! To make the card more attractive we have to add blur focus om the cards background.For that I have used "backdrop-filter " tag to make some blur focus.
.main .profilecards {
position: relative;
width: 220px;
height: 350px;
margin: 30px;
background: rgba(225, 225, 225, 0.1);
overflow: hidden;
justify-content: center;
align-items: center;
border-left: 1px solid rgba(225, 225, 225, 0.5);
border-top: 1px solid rgba(225, 225, 225, 0.5);
backdrop-filter: blur(5px);
border-radius: 10px;
}
.overview {
padding: 20px;
text-align: center;
justify-content: center;
transition: 0.5s;
}
.img {
border-radius: 50%;
margin-top: 30px;
}
h3 {
font-size: 18px;
text-transform: uppercase;
z-index: 1;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
p {
font-size: 14px;
font-weight: 100;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
a {
color: rgba(255, 255, 255, 0.521);
position: relative;
display: inline-block;
padding: 5px;
margin-top: 15px;
background: linear-gradient(to left, #E73c7E, #23A6D5);
border-radius: 5px;
text-decoration: none;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
Now I'm going to design the hover effect to the cards in which the hover effect just looks like amazing.When we hoovered on the card the user information comes up with a transition.Its really looks amazing .
To design that , I'm considering the 2 sub divisions and writing the code.
We have to write two cases for hover effect ,they are before hover and after hover cases.In before hover we have to write the transformation property to be translate on y direction about 100px and we have to make the opacity as zero.
Due to this , the information if the user will be moves down and disappears.In the after hovering stage we have to write the transformation as zero and opacity as one.This can makes the information appears with rising effect .
Applying VANILLA-tilt effect
Open your browser and go to vannila-tilt.js.
And there you will find the homepage like this.
Now in the download section you will see vanilla-tilt effects ,you can download any one of them
And next go to the how to use section .,there you can find the je script tag .copy that one and paste it at before the end body tag like shown in below image.
Now go to the JS WAY section in the page and now copy these lines shown below.
And paste them at before the end of body tag and now we have to make some changes.
I will show you the changes.
Step 1
.In the JS WAY section we have copied some script ,now paste it and go into it and after the speed add glare:true, and "max-glare":1,
Step 2.
In the same script you will find a code like "queryselector(.your element)" edit it as "querySelectorAll(.profile cards)".
Thats it .Now check the output.The cards will have some tilt effect with some glare focus.
The output for this code will be looks like this.
For any queries .click on the live chat option and contact us .
Thats it for today. For better results ,follow the instructions explained above.
This code was learned and inspired by online tutorials yt
Yours Dinesh
No comments: