CSS Gradient Card.Today in this blog, we gonna learn about CSS Gradient Card Effect for Beginners.
CSS Gradient Card Effect
Hi Friends!
Today in this blog, we gonna learn about CSS Gradient Card Effect for Beginners. Card effects are one of the best effects to learn. This is my first Card Effect. I Give my best in this Effect.
This Gradient Card Effect is nice to see on our websites. these card effects can attract viewers. In the previous blog, we will learn about CSS Animated Loader For Beginners if you're a beginner I will recommend learning the loader effect first. If you learn that and this blog will help you to learn about Gradient Card Effect. 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 gradient cards</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="card1">
<h1>Card 01</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing, elit. Delectus corporis aperiam quisquam voluptatibus ratione blanditiis tempora accusamus magnam non ducimus laborum ullam corrupti, quam amet, ex, quaerat repellat! Illum, commodi.
</p>
</div>
<div class="card2">
<h1>Card 02</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing, elit. Delectus corporis aperiam quisquam voluptatibus ratione blanditiis tempora accusamus magnam non ducimus laborum ullam corrupti, quam amet, ex, quaerat repellat! Illum, commodi.
</p>
</div>
<div class="card3">
<h1>Card 03</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing, elit. Delectus corporis aperiam quisquam voluptatibus ratione blanditiis tempora accusamus magnam non ducimus laborum ullam corrupti, quam amet, ex, quaerat repellat! Illum, commodi.
</p>
</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;
}
div{
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
position: relative;
height: 350px;
width: 250px;
margin: 50px;
border-radius: 20px;
box-shadow: 1px 1px 60px black;
cursor: pointer;
overflow: hidden;
}
h1{
color: white;
font-size: 40px;
}
p{
font-size: 18px;
font-family: sans-serif;
color: white;
padding: 10px 15px;
}
div::before{
content: '';
display: block;
position: absolute;
height: 100px;
width: 100px;
bottom: 80%;
left: 80%;
border-radius: 50%;
z-index: -1;
}
.card1::before{
background-color: deeppink;
}
.card1:hover::before{
animation: slide1 0.5s linear forwards;
}
.card1:hover{
transition-property: all;
transition-delay: 0.5s;
box-shadow: 1px 1px 60px purple,
1px 1px 60px purple;
}
@keyframes slide1{
100%{
height: 350px;
width: 250px;
bottom: 0;
left: 0;
border-radius: 20px;
background: linear-gradient(45deg,deeppink,purple);
}
}
.card2::before{
background-color: lime;
}
.card2:hover::before{
animation: slide2 0.5s linear forwards;
}
.card2:hover{
transition-property: all;
transition-delay: 0.5s;
box-shadow: 1px 1px 60px green,
1px 1px 60px green;
}
@keyframes slide2{
100%{
height: 350px;
width: 250px;
bottom: 0;
left: 0;
border-radius: 20px;
background: linear-gradient(45deg,lime,green);
}
}.card3::before{
background-color: dodgerblue;
}
.card3:hover::before{
animation: slide3 0.5s linear forwards;
}
.card3:hover{
transition-property: all;
transition-delay: 0.5s;
box-shadow: 1px 1px 60px royalblue,
1px 1px 60px royalblue;
}
@keyframes slide3{
100%{
height: 350px;
width: 250px;
bottom: 0;
left: 0;
border-radius: 20px;
background: linear-gradient(45deg,dodgerblue,royalblue);
}
}
]
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 the all Card effects to develop your CSS skills. I recommend, repeating the code for your practice this will help you to learn this Gradient Card Effect more effectively. and This video is also helpful to learn faster. colourful Gradient Card Effects are an important part of websites. I hope this tutorial will be helpful for learning card effects for beginners. I will give you Source Code and you can download it.
COMMENTS