Hello developers, today in this blog you'll learn how to create a Neumorphism Card Design using HTML & CSS.
The Neumorphism effect is a new, minimal way to design with a soft, extruded plastic look. The parts have a dark box shadow on the bottom and, a light box shadow on top, the combination of both creates the effect of the elements pushing themselves through your display. The Neumorphism Card Design is created using only HTML & CSS.
In this blog (Neumorphism Card Design) on the webpage, there are three cards at the center of the page, with an image, a title, a paragraph and, a button. On hovering the card and/or the button, the neomorphic effect can be seen.
The source code of this Neumorphism Card Design is given below, and you can copy the source code of this program. You can use this code of Neumorphism Card Design with your creativity and can take this card to the subsequent level.
Neumorphism Card Design [Source Code]
To make this website (Neumorphism Card Design), you need to create two files: an HTML file & a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900&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 {
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
width: 1100px;
}
.container .card {
width: 320px;
margin: 20px;
padding: 40px 30px;
background: #ebf5fc;
border-radius: 40px;
box-shadow: -6px -6px 20px rgba(255,255,255,1),6px 6px 20px rgba(0,0,0,0.1);
}
.container .card:hover {
box-shadow: inset -6px -6px 20px rgba(255,255,255,0.5),inset 6px 6px 20px rgba(0,0,0,0.05);
}
.container .card .imgBx {
position: relative;
text-align: center;
}
.container .card .imgBx img {
max-width: 120px;
}
.container .card .contentBx {
position: relative;
margin-top: 20px;
text-align: center;
}
.container .card .contentBx h2 {
color: #0575E6;
font-weight: 700;
font-size: 1.4em;
letter-spacing: 2px;
}
.container .card .contentBx p {
color: #3a9bdc;
}
.container .card .contentBx a {
display: inline-block;
padding: 10px 20px;
margin-top: 15px;
border-radius: 40px;
color: #3a9bdc;
font-size: 16px;
text-decoration: none;
box-shadow: -4px -4px 15px rgba(255,255,255,1),4px 4px 15px rgba(0,0,0,0.1);
}
.container .card .contentBx a:hover {
box-shadow: inset -4px -4px 10px rgba(255,255,255,0.5),inset 4px 4px 10px rgba(0,0,0,0.1);
}
.container .card a:hover span {
display: block;
transform: scale(0.98);
}
.container .card:hover .imgBx,.container .card:hover .contentBx {
transform: scale(0.98);
}
.credit a {
text-decoration: none;
color: #00acee;
font-weight: 800;
}
.credit {
text-align: center;
font-family: Verdana,Geneva,Tahoma,sans-serif;
}
Thank you for reading our blog. If you face any problem in creating this Neumorphism Card Design using HTML & CSS, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team