The Glassmorphism will describe the UI button, this effect is based on the combination of shadow, transparency, and background blur. The glassmorphism effect is made by using the backdrop-filter effect in the CSS code.
In this blog (Glassmorphism Product Card), there is a card that contains some brief details of the product like a picture or photo of the product, brand name, the specific name of the product, cost, and some description of the product. There is also a product size that we can as the size we need. It mainly depends on the product. There are two buttons one is named "add to cart" where you add your product and the other one is with a heart shape where you can like the product.
The source code of this Glassmorphism Product Card is given below, if you want the source code of this program, you can copy it. You can use this Glassmorphism Product Card code with your creativity and can take this project to the next level.
Glassmorphism Product Card [Source Code]
To make this website (Glassmorphism Product Card), you need to create two files: an HTML file & a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
@import url('https://fonts.googleapis.com/css?family=Lato:400,700');
html {
display: grid;
min-height: 100%;
}
body {
display: grid;
font-family: 'Lato',sans-serif;
text-transform: uppercase;
background: #8cd3ff;
}
.container {
position: relative;
margin: auto;
overflow: hidden;
width: 520px;
height: 350px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 10px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.52);
}
p {
font-size: 0.6em;
color: #1663be;
letter-spacing: 1px;
}
h1 {
font-size: 1.2em;
color: #4E4E4E;
margin-top: -5px;
}
h2 {
color: #1663be;
margin-top: -5px;
}
img {
width: 290px;
margin-top: 47px;
border-radius: 10px;
}
.images{
margin: 10px;
width: 100px;
}
.slideshow-buttons {
top: 70%;
display: none;
}
.one, .two, .three, .four {
position: absolute;
width: 7px;
height: 7px;
border-radius: 50%;
background: #E0C9CB;
}
.one {
left: 22%;
}
.two {
left: 27%;
}
.three {
left: 32%;
}
.four {
left: 37%;
}
.product {
position: absolute;
width: 40%;
height: 100%;
top: 10%;
left: 60%;
}
.desc {
text-transform: none;
letter-spacing: 0;
margin-bottom: 17px;
color: #4E4E4E;
font-size: .7em;
line-height: 1.6em;
margin-right: 25px;
text-align: justify;
}
button {
background: #072f5f;
display: inline-block;
outline: 0;
border: 0;
margin: -1px;
border-radius: 2px;
text-transform: uppercase;
letter-spacing: 1px;
color: #F5F5F5;
cursor: pointer;
}
button:hover {
background: #1663be;
transition: all .4s ease-in-out;
}
.add {
width: 67%;
padding: 10px;
}
.like {
width: 22%;
padding: 9px;
}
.sizes {
display: grid;
color: #072f5f;
grid-template-columns: repeat(auto-fill, 30px);
width: 60%;
grid-gap: 4px;
margin-left: 20px;
margin-top: 5px;
}
.sizes:hover {
cursor: pointer;
}
.pick {
margin-top: 11px;
margin-bottom:0;
margin-left: 20px;
}
.size {
padding: 9px;
border: 1px solid #1b7ced;
font-size: 0.7em;
text-align: center;
}
.size:hover{
background: #1663be;
color: #F5F5F5;
transition: all .4s ease-in-out;
}
.credit{
text-align: center;
color: #000;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.credit a{
text-decoration: none;
color:#072f5f;
font-weight: bold;
}
Thank you for reading our blog. If you face any problem in creating this Glassmorphism Product Card using HTML & CSS, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team