Introduction: In the realm of web design, neumorphism has emerged as a popular design trend, characterized by soft shadows and subtle highlights to create a realistic and tactile interface. In this tutorial, we’ll explore the creation of a neumorphism form using HTML and CSS, integrating elements such as input fields, radio buttons, and a submit button.
HTML Structure: The foundation of our neumorphism form begins with the HTML structure. We define elements such as input fields for username, email, and password, along with radio buttons to select the user’s role as a developer or designer. Each input field is encapsulated within appropriate container elements, fostering a structured layout conducive to styling.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Neumorphism Form</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<form>
<h6>Username</h6>
<input type="text" placeholder="For ex. viralcoder">
<h6>Who Are You?</h6>
<input type="radio" name="job" id="developer">
<input type="radio" name="job" id="designer">
<h6>Email</h6>
<input type="email" placeholder="viralcoder@abc.com">
<h6>Password</h6>
<input type="password" placeholder="Minimum 6 characters">
<a href="#" class="submit">SUBMIT</a>
</form>
</body>
</html>CSS Styling: CSS serves as the artistic brushstroke that brings our neumorphism form to life. Through meticulous styling, we meticulously craft the appearance, layout, and visual effects of our form. We apply soft shadows, subtle highlights, and rounded borders to achieve the neumorphic aesthetic, ensuring a visually pleasing and intuitive user experience.
*,
*:before,
*:after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background-color: #ececec;
font-family: 'Poppins',sans-serif;
font-size: 14px;
font-weight: 600;
color: #202035;
letter-spacing: 1.2px;
}
form{
width: 350px;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
box-shadow: -10px -10px 15px rgba(255,255,255,0.55),
10px 10px 15px rgba(70,70,70,0.12);
padding: 40px 20px;
border-radius: 10px;
}
h6{
margin-bottom: 10px;
font: inherit;
text-transform: uppercase;
}
a.submit{
display: block;
width: 80%;
margin-left: 10%;
text-align: center;
font: inherit;
color: inherit;
text-decoration: none;
border-radius: 30px;
padding: 10px;
box-shadow: -10px -10px 15px rgba(255,255,255,0.55),
10px 10px 15px rgba(70,70,70,0.12);
}
input[type="text"],
input[type="password"],
input[type="email"]{
margin-bottom: 25px;
border: none;
background-color: transparent;
box-shadow: inset -10px -10px 15px rgba(255,255,255,0.55),
inset 10px 10px 15px rgba(70,70,70,0.12);
padding: 10px;
width: 90%;
border-radius: 7px;
outline: none;
}
::placeholder{
font-size: 12px;
font-weight: 500;
color: #ababab;
letter-spacing: 1.3px;
}
input[type="radio"]{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
height: 40px;
width: 120px;
box-shadow: -10px -10px 15px rgba(255,255,255,0.55),
10px 10px 15px rgba(70,70,70,0.12);
border: 5px solid #ececec;
margin-right: 30px;
border-radius: 30px;
font: inherit;
outline: none;
cursor: pointer;
}
input[type="radio"]:after{
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
color: #606060;
letter-spacing: 0.5px;
}
#developer:after{
content: "Developer";
}
#designer:after{
content: "Designer";
}
input[type="radio"]:checked,
a:active{
box-shadow: -10px -10px 15px rgba(255,255,255,0.55),
10px 10px 15px rgba(70,70,70,0.12),
inset -10px -10px 15px rgba(255,255,255,0.55),
inset 10px 10px 15px rgba(70,70,70,0.12);
}
input[type="radio"]:checked:after{
color: #15e38a;
}Customization and Interaction: The form elements are carefully customized to align with the neumorphic design language. Input fields feature placeholder text and subtle animations to enhance usability, while radio buttons dynamically change appearance upon selection, providing clear feedback to the user. The submit button maintains consistency with the neumorphic style, inviting users to interact with confidence.
Integration of Google Fonts: To enhance typography within our neumorphism form, we integrate the Google Fonts library, specifically selecting the ‘Poppins’ font with varying weights to achieve a harmonious and modern aesthetic. The chosen font adds visual appeal and readability to the form, elevating the overall design.
Conclusion: In this tutorial, we’ve embarked on a journey to create a neumorphism form using HTML and CSS. By leveraging soft shadows, subtle highlights, and meticulous attention to detail, we’ve crafted a visually stunning and user-friendly interface that embodies the essence of neumorphic design. As you delve deeper into web design, may this tutorial serve as a valuable resource in mastering the art of crafting immersive and engaging user experiences.
Happy Coding!
