Neumorphism | the best neumorphism css card design using html css
.png "Neumorphism | the best neumorphism css card design using html css")
Neumorphism | the best neumorphism css card design using html css
Hello… Welcome to codewithrandom Today I am showing how to create NEUMORPHISM CSS CARD DESIGN USING HTML CSS.first you should know that what is Neumorphism. Neumorphism is a modern way to styling a webpage and it have 3D effect.If you want to create this page then you should do step by step.
Code:-
HTML CODE:-
Here we are adding div classic card and header and we are adding image in card.
<div class="card">
<div class="header">
<img src="person1.jpg" alt="" />
</div> The div class is body and in body the heading will be <h2> and <p>
<div class="body">
<h2>
Joy
</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem
odio tenetur earum voluptas corporis deleniti quasi repellendus
maxime, quae amet ipsam voluptatibus vero, reiciendis nam provident
dolore iste tempore eos.
</p> </div> The div class is footer and button is read more in footer and we want to finish first card.
<div class="footer">
<button>Read More</button>
</div>
</div> For second and third card we want to follow the same process like first card.
<div class="card">
<div class="header">
<img src="person2.jpg" alt="" />
</div>
<div class="body">
<h2>
Evelyn
</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem
odio tenetur earum voluptas corporis deleniti quasi repellendus
maxime, quae amet ipsam voluptatibus vero, reiciendis nam provident
dolore iste tempore eos.
</p>
</div>
<div class="footer">
<button>Read More</button>
</div>
</div>
<div class="card">
<div class="header">
<img src="person3.jpg" alt="" />
</div>
<div class="body">
<h2>
Mark
</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem
odio tenetur earum voluptas corporis deleniti quasi repellendus
maxime, quae amet ipsam voluptatibus vero, reiciendis nam provident
dolore iste tempore eos.
</p>
</div>
<div class="footer">
<button>Read More</button>
</div>
</div>
HTML OUTPUT:-
.png "Neumorphism | the best neumorphism css card design using html css")
CSS CODE:-
In css they are making html code more acttractive and responsive. they added box size,font,background etc as given in code.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: "Roboto", sans-serif;
display: flex;
min-height: 100vh;
align-items: center;
justify-content: center;
background: #b19cd9;
}
.card {
position: relative;
background: #b19cd9;
margin: 30px;
height: 350px;
width: 220px;
border-radius: 20px;
transition: 0.2s linear;
box-shadow: -6px -6px 25px 0 rgba(205, 177, 255, 0.8),
6px 6px 25px 0 rgba(0, 0, 0, 0.2);
}
.card:hover {
transform: scale(0.99);
box-shadow: inset -6px -6px 25px 0 rgba(205, 177, 255, 0.9),
inset 6px 6px 25px 0 rgba(0, 0, 0, 0.1);
}
.header {
position: absolute;
height: 70px;
width: 70px;
left: 50%;
top: 15px;
transform: translateX(-50%);
border-radius: 50%;
box-shadow: inset -6px -6px 10px 0 rgba(205, 177, 255, 0.8),
inset 10px 10px 10px 0 rgba(0, 0, 0, 0.2);
transition: 0.4s linear;
}
.header:hover {
box-shadow: -6px -6px 10px 0 rgba(205, 177, 255, 0.8),
10px 10px 10px 0 rgba(0, 0, 0, 0.08);
transform: translateX(-50%) scale(1.1);
}
.header img {
position: absolute;
height: 90%;
width: 90%;
border-radius: 50%;
object-fit: cover;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.body {
position: absolute;
top: 100px;
padding: 15px;
color: white;
}
.body h2 {
font-size: 20px;
text-transform: uppercase;
margin-bottom: 10px;
}
.body p {
font-size: 10px;
line-height: 20px;
}
.footer {
position: absolute;
bottom: 10px;
width: 100%;
height: 60px;
}
.footer button {
position: absolute;
border: none;
background: #b19cd9;
color: white;
padding: 8px 25px;
border-radius: 10px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: inset -6px -6px 10px 0 rgba(205, 177, 255, 0.8),
inset 6px 6px 10px 0 rgba(0, 0, 0, 0.1);
transition: 0.4s linear;
}
.footer:hover button {
transform: translate(-50%, -50%) scale(1.2);
box-shadow: -6px -6px 10px 0 rgba(205, 177, 255, 0.7),
6px 6px 10px 0 rgba(0, 0, 0, 0.1);
}
CSS OUTPUT:-
Finally,Your Neumorphism Css card design is ready. Hope you may understand the article and it useful to you.
If any doubt comment below………
Written by:- Sayali Kharat.
