Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
NeumorphismUI Form
NeumorphismUI is a design trend that has gained popularity recently, combining skeuomorphism with a modern twist.
When applied to forms, NeumorphismUI is a design style worth considering. It can make the user interface feel more tangible and interactive, ultimately improving the overall usability of the form.
In this article, we'll explore the different types of NeumorphismUI forms and provide examples and best practices for each.
Example
In this example, we created a login form to enhance the enhanced experience. First, we started by designing the form with a neumorphic style, which gives it a modern and elegant look. We added subtle shadow effects to create the illusion of depth and dimension, making it stand out from the background.
Users can enter their username and password into the input fields, and upon hovering over each input field, the field will appear to be raised with a shadow effect.
In the output, users see that the login form is visually appealing, practical, and user-friendly.
Index.html
<html>
<head>
<title>Neumorphic Login Form</title>
<style>
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Lato', sans-serif;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
height: 100vh;
background-color: #e6e6e6;
}
.container {
background-color: #e6e6e6;
border-radius: 20px;
box-shadow: -5px -5px 10px #ffffff, 5px 5px 10px #b7b7b7;
padding: 30px;
}
h1 {
text-align: center;
margin-bottom: 30px;
font-size 2rem;
}
h2{
margin-bottom: 2rem;
color: #333;
}
form {
display: flex;
flex-direction: column;
}
.input-container {
position: relative;
margin-bottom: 20px;
}
input {
width:100%;
background-color: #e6e6e6;
border: none;
border-radius: 10px;
box-shadow: inset -5px -5px 10px #ffffff, inset 5px 5px 10px #b7b7b7;
padding: 15px 20px;
font-size 1rem;
transition: box-shadow 0.2s ease;
}
input:focus {
outline: none;
box-shadow: inset -5px -5px 10px #b7b7b7, inset 5px 5px 10px #ffffff;
}
i {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 20px;
color: #b7b7b7;
transition: transform 0.2s ease, color 0.2s ease;
}
input:focus + i {
transform: translateY(-50%) translateX(10px);
color: #777777;
}
button {
background-color: #ff7f50;
border: none;
border-radius: 10px;
color: #ffffff;
font-size: 1.2rem;
padding: 15px;
margin-top: 20px;
cursor: pointer;
transition: box-shadow 0.2s ease;
}
button:hover {
box-shadow: -5px -5px 10px #ffffff, 5px 5px 10px #b7b7b7;
}
</style>
</head>
<body>
<h2>Neumorphism UI - Form Animation </h2>
<div class="container">
<h1>Neumorphic Login Form</h1>
<form>
<div class = "input-container">
<input type = "text" placeholder = "Username" required>
<i class="fas fa-user"></i>
</div>
<div class = "input-container">
<input type = "password" placeholder = "Password" required>
<i class="fas fa-lock"></i>
</div>
<button type = "submit"> Sign in </button>
</form>
</div>
</body>
</html>
Example
In this example, we have created a Gradient NeumorphismUI Form. The form includes text input fields for the user's email, message,e and a submit button. The CSS styling includes a gradient background, soft and rounded shapes, and subtle drop shadows to create the NeumorphismUI effect.
Index.html
<html>
<head>
<title> Gradient Form</title>
<style>
body {
font-family: 'Lato', sans-serif;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
height: 100vh;
background: linear-gradient(to bottom, #a6c0fe, #3f6bfe);
}
.neumorphism-form {
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem;
border-radius: 1rem;
}
.gradient {
background: linear-gradient(to bottom, #a6c0fe, #3f6bfe);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.1);
}
.neumorphism-form h2 {
color: #fff;
font-size: 2rem;
margin-bottom: 1rem;
}
.neumorphism-form label {
font-size: 1.2rem;
margin-bottom: 0.5rem;
}
.message,
.neumorphism-form input {
padding: 0.5rem;
border: none;
border-radius: 0.5rem;
background-color: #f7f7f7;
box-shadow: inset 4px 4px 8px rgba(255, 255, 255, 0.5),
inset -4px -4px 8px rgba(0, 0, 0, 0.1);
margin-bottom: 1rem;
width: 100%;
}
.neumorphism-form button {
background-color: #3f6bfe;
color: #fff;
border: none;
border-radius: 0.5rem;
padding: 0.5rem 1rem;
font-size: 1.2rem;
box-shadow: 4px 4px 8px rgba(163, 177, 198, 0.5),
-4px -4px 8px rgba(255, 255, 255, 0.2);
cursor: pointer;
}
.neumorphism-form button:hover {
transform: translateY(-2px);
box-shadow: 2px 2px 4px rgba(163, 177, 198, 0.5),
-2px -2px 4px rgba(255, 255, 255, 0.2);
}
</style>
</head>
<body>
<form class = "neumorphism-form gradient">
<h2> Contact Us </h2>
<input type = "email" id = "email" name = "email" placeholder = "Email">
<textarea class = "message" id =" " cols = "30" rows = "10" placeholder = "Write Your Message..."> </textarea>
<button type = "submit"> Submit </button>
</form>
</body>
</html>
Example
In this example, we have created a dark mode Neumorphism UI form that allows users to subscribe to a newsletter. After that, we added a linear gradient background color to the body, we gave the form a box shadow with negative and positive values to create the neumorphism effect.
In the output, users can observe a dark mode form with a neumorphism effect, where the form elements appear to be slightly raised from the background.
Index.html −
<html>
<head>
<title> Dark Mode Form</title>
<style>
body {
font-family: "Lato", sans-serif;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
height: 100vh;
background: linear-gradient(150deg, #333, #111);
}
.neumorphism-form {
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem;
border-radius: 1rem;
}
.dark-mode {
box-shadow: -4px -4px 4px rgba(255, 255, 255, 0.08),
4px 4px 4px rgba(0, 0, 0, 0.56), 0 0 0 rgba(255, 255, 255, 0.08) inset,
0 0 0 rgba(0, 0, 0, 0.56) inset;
border: 1px solid rgba(0, 0, 0, 0.08);
}
.neumorphism-form h2 {
font-size: 1.5rem;
margin-bottom: 1.5rem;
color: #64dd178f;
}
.neumorphism-form input[type="email"] {
padding: 0.5rem;
background-color: transparent;
box-shadow: -2px -2px 2px rgba(255, 255, 255, 0.08),
2px 2px 2px rgba(0, 0, 0, 0.56),
-2px -2px 2px rgba(255, 255, 255, 0.08) inset,
2px 2px 2px rgba(0, 0, 0, 0.56) inset;
border: 1px solid rgba(0, 0, 0, 0.08);
margin-bottom: 1rem;
width: 100%;
color: #ffff;
}
.neumorphism-form button {
background-color: transparent;
color: #ff40408f;
border-radius: 0.5rem;
padding: 0.5rem 1rem;
font-size: 1.2rem;
box-shadow: -2px -2px 4px rgba(100, 221, 23, 0.12),
4px 4px 4px rgba(0, 0, 0, 0.56), 0 0 0 rgba(100, 221, 23, 0.12) inset,
0 0 0 rgba(0, 0, 0, 0.56) inset;
border: 1px solid rgba(0, 0, 0, 0.08);
cursor: pointer;
}
.neumorphism-form button:hover {
transform: translateY(-2px);
border: solid 1px #64dd178f;
}
</style>
</head>
<body>
<form class = "neumorphism-form dark-mode">
<h2> Subscribe to Newsletter </h2>
<input type = "email" id = "email" name = "email" placeholder = "Enter your email">
<button type = "submit"> Subscribe </button>
</form>
</body>
</html>
Conclusion
Users have learned how to create visually appealing forms such as gradient forms, dark mode forms, and simple forms using neumorphismUI. They have also learned how to use CSS to create neumorphism designs that provide a modern and realistic look to the forms.
95 Views
