Neumorphism is the recent design trend, which uses cool shadow techniques to create a beautiful, subtle, and smooth design.
Today, in this post we’ll create a beautiful Responsive Neumorphic Post Card using Bootstrap 5. You can use this card in any project that you wish.
This is what we’ll create,
Looks Dope with Elon Baba, right?
Ok, now let’s get started.
Neumorphic Card using Bootstrap 5 –
Get complete source code at my Code Pen
Let’s Setup our Head –
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,800;1,600&display=swap" rel="stylesheet" />
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous" />
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- custom styles -->
<link rel="stylesheet" href="styles.css" />
<title>Neumorphic Card</title>
</head>Here, we are using Bootstrap 5, Font Awesome Icons, and our custom external stylesheet. Also, using Nunito Sans font is preferred for Neumorphism Designs.
Let’s Setup our Body –
<body>
<div class="post-section">
<div class="card mb-3">
<img src="#image-link" class="card-img-top img-fluid" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="muted-text">Last updated 3 mins ago</small></p>
<div class="card-buttons">
<button id="like-btn" class="card-btn" role="button">
<span id="icon"><i class="fa fa-thumbs-o-up aria-hidden=" true"></i>
</span>
</button>
<button class=" card-btn">
<span id="cmt-icon"><i class="fa fa-comment-o" aria-hidden="true"></i></span>
</button>
<button class="card-btn" href="#">
<span id="share-btn">Share <i class="fa fa-share" aria-hidden="true"></i></span>
</button>
</div>
</div>
</div>
</div>
</body>Nothing fancy here, just using Bootstrap 5 Card template, we have here Image, Title, Text, and Buttons with Icons. Make sure classes are the same as above or it won’t give you desired results.
Let’s Setup Our CSS –
* {
margin: 0;
padding: 0;
}
body {
background-color: #ed642b !important;
font-family: "Nunito Sans", sans-serif;
user-select: none;
}
.post-section {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.card-img-top {
border-radius: 12px !important;
}
.card {
width: 22rem;
background-color: #ed642b !important;
margin-top: 5%;
color: #fff;
border-radius: 12px !important;
text-align: left;
padding: 20px;
box-shadow: inset -4px -4px 10px #ffffff70, inset 4px 4px 10px #00000070;
}
.card-title {
font-weight: bolder;
}
.card-text {
color: white;
}
.muted-text{
color: #000;
}
.card button {
padding: 8px 12px;
background-color: #ed642b;
margin-right: 2%;
border: none;
border-radius: 6px;
box-shadow: -2px -2px 3px #ffffff70, 2px 2px 3px #00000070;
}
.card button:hover {
background-color: #ed642b;
box-shadow: inset -2px -2px 3px #ffffff70, inset 2px 2px 3px #00000070;
}
.card button:focus, .card button:active {
outline: none;
border: none;
}
.card-buttons button:last-child {
float: right;
margin-right: 0%;
}Here, what you need to pay the most attention to is the Shadow and Color. There’s a rule for Neumorphism Design.
You need to choose three colors,
- Mid color (which will be applied to both background and the card background)
- Light color (which will act as a light shadow)
- A dark color (which will act as a dark shadow)
Also, the inset property,
we’ve applied the inset property to the button elements inside the Card. This property just inverts the flow of shadows. You can try using this inset property on your Card too.
So, this was it, I hope it was helpful, if it was share it with your friends. And make sure to follow our Coding Master’s Newsletter for more interesting Web Dev related content.
- Frontegg: Best Auth System for your Frontend - September 27, 2022
- NextJS vs ReactJS: Which is the best for your project? - September 26, 2022
- 5 Amazing React libraries to make your App Stand Out! - July 28, 2022
0 Comments