Frontend Forever

Neumorphic Login Form

About this Code

Hello reader, I am frontendforever. Nice to meet you again in this free code sharing website. In this post I am going to explain about Neumorphic Login Form. If you are new to this website, we recommend you to subscribe to our youtube channel and watch the videos. Ok lets dive into the code.

Neumorphism as a user interface

Neumorphism's distinctive characteristic is already known to be a fusion of minimalism and skeuomorphism. And it makes sense to look at it that way. Consider the hyper-realistic appearance of skeuomorphism with the austere aesthetic of Material Design. Alternately, consider Apple's design guidelines from 2007 to 2012 and contrast them with the interfaces it creates today.

The term "Neumorphism," sometimes known as "Neomorphism," has recently received a lot of attention as a relatively new design trend. Its minimalist and realistic-looking user interface is what gives it its distinctive aesthetic; hence, the moniker. Various design and development groups have been actively debating the trend since it was given its name in a UX Collective piece from December 2019, frequently with opposing viewpoints. On Twitter, Chris made fun of it. It has an online generator that was made by Adam Gibel. The usability, accessibility, and usefulness of this design trend are being discussed by developers, designers, and UX experts.

It's obvious that it's touched a nerve in the neighbourhood.Let's wade into the Neumorphism pool and demonstrate We also created the validation part by using Javascript and Html

HTML form validation

disabled

Specifies that the input element should be disabled

max

Specifies the maximum value of an input element

min

Specifies the minimum value of an input element

pattern

Specifies the value pattern of an input element

required

Specifies that the input field requires an element

type

Specifies the type of an input element

There is also some pseudo selectors will help us to validate forms

:disabled
:invalid
:optional
:required
:valid

Images

These are the output images of the code. You can click on the image to enlarge it. also you can click the try it button to see the output.

Youtube Tutorial Video

If you are a visual learner and want to learn how to use this code, you can watch the video below.
and also this video contains the clear step by step explanation and the output of the code.

Source Code

This is the source code of the code. You can copy and paste the code to your editor.

<!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">
    <title>Document</title>
</head>
<body>
    <div class="registration">
		<h2>LOGIN<br>  
        <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-people-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1H7zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-5.784 6A2.238 2.238 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.325 6.325 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1h4.216zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"/>
        </svg>
      </h2>
    <form>
        <div class="login">
            <label>Name</label><br>
            <input type="text" id="name"><br><br>
            <label>Password</label><br>
            <input type="Password" id="pass"><br><br>
            <button onclick="login()">Sign In</button>
        </div>
    </form>
    <div class="forget">
        <br><p>Forget password?<a href ="#">SignUp</a></p>
    </div>
  </div>
</body>
</html>

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body{
	background: #e5e5e5;
}
.registration{
	height:470px;
	width:330px;
	border-radius:50px;
	box-shadow:inset 6px 6px 10px gray,inset -8px -8px 10px  white,-8px -8px 10px white, 8px 8px 10px gray;
	background: #e5e5e5;
	margin:40px auto 0px auto;
}
.registration:hover{
	transition: 5s;
	border-radius: 0px;	
}
h2{
	text-align: center;
	padding-top: 20px;
	text-decoration: underline;
	color:rgb(250,0,200);
}
svg{
	width:80px;
	height:40px;
	color:rgb(0,80,250);
}
.login{
	padding:0px 30px;
}
label{
	font-size: 17px;
	font-family: Arial;
	line-height: 2;
}
input{
	width:260px;
	height:23px;
	outline:none;
	border:0px;
	box-shadow: inset 4px 4px 2px gray,inset -6px -6px 7px white;
	background:#e5e5e5;
	border-radius: 20px;
	text-indent: 10px;
	cursor:pointer;
}
button{
	width:160px;
	height:30px;
	margin:24px 0px 0px 55px ;
 	border-radius: 20px;
 	font-weight: bolder;
 	font-family: Arial;
 	color:rgb(180,0,255);
 	outline:none;
 	border:0px;
    box-shadow: 4px 4px 6px gray,-4px 4px 6px white;
}
button:hover{
	box-shadow: inset 4px 4px 6px gray,inset -4px -4px 6px white;
}
.forget{
	margin:2px 70px;
}
p{
	text-align: center;
	font-family: Arial;
	font-size: 14px;
}
a{
	text-decoration: none;
	color:red;
}

And also you can click the try it button to see the output of the code in our web Code Playground.
You can also download the code to the zip format by clicking the download button. The download process is little bit complex, you need ti await for 10 seconds. after that you can download the code by clicking the generated download link.

Download

Try It

Frontend Forever

Neumorphic Login Form

About this Code

Neumorphism as a user interface

HTML form validation

Images

Youtube Tutorial Video

Source Code

Leave a Comment

You need to login first to comment.

About Us

Frontend Forever