Web design is like a playground of creativity, and there's a new trend making waves – it's called Newmorphism. It's a cool mix of two design buddies – Neumorphism and Skeuomorphism. In this easy-to-follow guide, we'll create a basic calculator using HTML and CSS, diving into the soft shadows, gradients, and rounded corners that make Newmorphism stand out.
Understanding Newmorphism
So, what's Newmorphism all about? It's a design style that combines Neumorphism's soft shadows (making things look touchable) with Skeuomorphism's realistic design elements. The result? An awesome, user-friendly interface that's easy on the eyes.
Let's Build a Newmorphism Calculator
HTML Setup
We'll kick things off by setting up the basic structure for our calculator. Copy and paste the following code into your HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="utils.css">
<title>Calculator</title>
</head>
<body>
<div class="container flex items-center">
<div class="content flex-col items-center">
<div class="items flex-col items-center">
<input type="text">
<!-- Buttons for numbers and operations -->
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS Styles
Now, let's add some style magic to our calculator. We've split the styles into two files – utils.css for utility classes and style.css for the main design. Copy and paste the following codes into their respective files.
utils.css:
.bg-red {
background: red;
}
.danger {
color: white;
background: rgba(255, 0, 0, 0.6);
}
.danger:hover {
box-shadow: 5px 5px 10px rgba(255, 111, 111, 0.5), -5px -5px 10px rgba(255, 111, 111, 0.5);
}
.success {
color: rgb(0, 0, 0);
background: rgba(0, 255, 47, 0.6);
}
.success:hover {
box-shadow: 5px 5px 10px rgba(125, 255, 111, 0.5), -5px -5px 10px rgba(125, 255, 111, 0.5);
}
.flex {
display: flex;
}
.flex-col {
display: flex;
flex-direction: column;
}
.items-center {
align-items: center;
justify-content: center;
}
style.css:
@import url('https://fonts.googleapis.com/css2?family=Roboto&family=Ubuntu&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
body {
background-color: #e0e5ed;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.container {
height: 100vh;
}
.content {
width: 330px;
height: 450px;
border-radius: 10px;
background-color: #e0e5ed;
box-shadow: 9px 9px 16px rgb(163, 177, 198, 0.6), -9px -9px 16px rgba(255, 255, 255, 0.5);
}
.btn {
width: 55px;
display: flex;
justify-content: center;
align-items: center;
padding: 15px 20px;
font-size: 1.3rem;
border-radius: 10px;
margin: 5px;
background-color: #e0e5ed;
box-shadow: 5px 5px 10px rgb(163, 177, 198, 0.6), -5px -5px 10px rgba(255, 255, 255, 0.5);
font-weight: 600;
cursor: pointer;
}
.btn:hover {
box-shadow: inset 5px 5px 10px rgb(163, 177, 198, 0.6), inset -5px -5px 10px rgba(255, 255, 255, 0.5);
}
.items input {
padding: 10px;
margin: 10px;
font-size: 1.5rem;
width: 240px;
border: none;
border-radius: 5px;
}
Preview
This image shows the final product we made in this blog
Conclusion
In this guide, we explored the world of Newmorphism – a trendy design style. By creating a simple calculator with HTML and CSS, we embraced the soft shadows, gradients, and rounded corners that define Newmorphism. As a beginner, experimenting with these design trends can make your projects look modern and delightful. Keep exploring, and most importantly, have fun with your designs!
Top comments (0)