Today we are going to learn how to make animated Neumorphic Cards by using CSS.
We would be using just CSS and HTML to animate the cards.
Final Outcome
CodePen
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="index.css">
<title>CSS Light Neumorphic Cards</title>
</head>
<body>
<div class="container">
<div class="card">
<div class="box">
<div class="content">
<h2>01</h2>
<h3>Card One</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Dolorum exercitationem explicabo, quae eaque
fuga quia adipisci quo? Corporis, in nihil.
</p>
<a href="#">Read More</a>
</div>
</div>
</div>
<div class="card">
<div class="box">
<div class="content">
<h2>02</h2>
<h3>Card Two</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Dolorum exercitationem explicabo, quae eaque
fuga quia adipisci quo? Corporis, in nihil.
</p>
<a href="#">Read More</a>
</div>
</div>
</div>
<div class="card">
<div class="box">
<div class="content">
<h2>03</h2>
<h3>Card Three</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Dolorum exercitationem explicabo, quae eaque
fuga quia adipisci quo? Corporis, in nihil.
</p>
<a href="#">Read More</a>
</div>
</div>
</div>
</div>
</body>
</html>
CSS Code
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #ebf5fc;
}
.container {
display: flex;
justify-content: center;
align-items: center;
max-width: 1200px;
flex-wrap: wrap;
padding: 40px 0;
}
.container .card {
position: relative;
width: 320px;
height: 440px;
box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.05),
inset -5px -5px 5px rgba(255, 255, 255, 0.5),
5px 5px 5px rgba(0, 0, 0, 0.05),
-5px -5px 5px rgba(255, 255, 255, 0.5);
border-radius: 15px;
margin: 30px;
cursor: pointer;
}
.container .card .box {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
background: #ebf5fc;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
border-radius: 15px;
transition: transform 500ms linear,
box-shadow 500ms linear,
background 500ms linear;
}
.container .card:hover .box {
transform: translateY(-50px);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
background: linear-gradient(45deg, #b95ce4, #4f29cd);
}
.container .card .box .content {
padding: 20px;
text-align: center;
}
.container .card .box .content h2 {
position: absolute;
top: -10px;
right: 30px;
font-size: 8em;
color: rgba(0, 0, 0, 0.02);
transition: color 500ms linear;
}
.container .card:hover .box .content h2 {
color: rgba(0, 0, 0, 0.05);
}
.container .card .box .content h3 {
font-size: 1.8em;
color: #777;
z-index: 1;
transition: color 500ms linear;
}
.container .card .box .content p {
font-size: 1em;
font-weight: 300;
color: #777;
z-index: 1;
transition: color 500ms linear;
}
.container .card:hover .box .content h3,
.container .card:hover .box .content p {
color: #fff;
}
.container .card .box .content a {
position: relative;
display: inline-block;
padding: 8px 20px;
background: #03a9f4;
margin-top: 15px;
border-radius: 20px;
color: #fff;
text-decoration: none;
font-weight: 400;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.container .card:hover .box .content a {
background: #ff568f;
}
@media only screen and (max-width: 1140px) {
.container {
flex-direction: column;
}
}
Top comments (0)