CSS Product Card UI Design.Today in this blog , we gonna learn about CSS Product Card UI Design.
CSS Product Card UI Design
Hi Friends!
Today in this blog, we gonna learn about CSS Product Card UI Design. if you're creating an e-commerce website? the answer is yes, So you want to learn this product card design. this is my first product card UI design.
This Product Card UI Design is nice to see on e-commerce websites. In the previous blog, we will learn about CSS Creative Loader Effect if you're a beginner I will recommend learning that loader effect first. If you learn that and this blog will help you to learn about Product Card UI Design. In this blog, I will give my video tutorial and source codes to download. if you have any doubts ask me in the comment section.
HTML file
[
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css product card UI design</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="card">
<img src="shoe.png" height="200px" width="300px">
<div class="content">
<h2>Sport Shoe</h2>
<span>$80.<small>99</small></span>
</div>
<a href="#">Buy now</a>
</div>
</body>
</html>
]
You can copy this HTML file. and paste it into your HTML file. Now you will learn it clearly. and don't forget to save the file with an extension. HTML. This extension is more important for creating a website page.
CSS file
[
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
background-color: #262626FF;
}
.card{
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
position: relative;
height: 400px;
width: 300px;
font-size: 20px;
font-family: sans-serif;
font-weight: bold;
color: white;
box-shadow: 1px 1px 60px black;
cursor: pointer;
overflow: hidden;
}
.content{
position: relative;
bottom: 10%;
text-align: center;
}
a{
display: block;
position: absolute;
bottom: 3%;
right: 3%;
padding: 5px 10px;
text-decoration: none;
color: white;
border: 2px solid white;
}
.card::before{
content: 'New';
display: flex;
justify-content: flex-start;
align-items: flex-end;
position: absolute;
top: 0;
height: 100%;
width: 100%;
padding-left: 20px;
background-color: rgba(0, 0, 0, 0.5);
font-size: 25px;
font-family: cursive;
font-weight: bold;
color: lime;
text-shadow: 1px 1px 60px lime;
transition: 0.5s;
z-index: -1;
}
.card::after{
content: '';
display: block;
position: absolute;
top: 100%;
background-color: rgba(0, 0, 0, 0.5);
transition: 0.5s;
height: 50px;
width: 100%;
z-index: -1;
}
div:hover::before{
transition: 0.5s;
top: -90%;
background-color: transparent;
}
div:hover::after{
transition: 0.5s;
top: 60%;
height: 40%;
}
a:hover{
background-color: white;
color: black;
}
]
Secondly, you can copy this CSS file. and paste it into your CSS file. and remember the file extension called. CSS. This will help you to design your webpage. If you want more clarity on this topic you can watch my video tutorial and If you have any doubts ask me in the comment section.
Video Tutorial
Watch this video fully and learn this Product Card UI Design effects carefully to develop your skills. Repeating the code for your practice will help you to learn this Product Card UI Design more effectively and This video is also helpful to learn faster. Product Card UI Design Effects are an important part of e-commerce websites. I hope this tutorial will be helpful for learning Product Card UI Design. I will give you Source Code and you can download it.
COMMENTS