Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
November 19, 2020 06:10 pm GMT

Neumorphism Login Form UI Design using HTML & CSS

In this article, I will tell you how to easily create a Neumorphism login form using HTML and CSS programming code. Earlier I have shown the design of many types of login forms such as animated, pop-up, responsive, transparent, etc. But it is a modern and UI Design login form that everyone is currently liking. This type of form is basically designed by CSS code. It has two themes, the first is the dark theme, the second is the light theme. Here basically I showed the Light Neumorphism login form design. In this case, a shadow has been created on a white page using CSS code. That shadow is arranged in the form of a login form. Here the color of the shadow has been blackened so that it can be clearly seen on a white background. Like the general form, there are all sorts of options like email id and password input, below there is a login button to log in.

Alt Text

Demo: Click Here


Download Code: Click Here

Some Information about this Neumorphism login form

  • It is built using only HTML and CSS programming code. While trying to make it, I tried to write the code as simple as possible.
  • It is basically a Neumorphism login form that combines all the features of a normal login form.
  • Here you will find a place to input email and password to log in. Below is the login button.
  • There is also the location of the forgotten password to forget the password.
  • Every effort has been made to make it responsive and professional. As a result, it works properly on any device.

All in all, it is a professional and responsive login form. Hope you like it.
I have given above the HTML and CSS code required to make it. You can copy those codes and add them to your project or add them to your own website.

How To Make This Neumorphism Login Form

Before creating this Neumorphism form you need to create an HTML file. Then copy the structure given below and add it to the HTML file.

<html><head>     <style>        Add CSS Code     </style></head><body>       Add Html Code</body></html>
Enter fullscreen mode Exit fullscreen mode

In that structure, I have given complete information on how you can add HTML and CSS code to your file.
Copy or download the following HTML codes from the place where the add HTML code is written above. Add the following CSS code in the place where add CSS code is written. Below I have basically shown step by step which code I have used for which work.

Make Neumorphism Body

The following codes have basically helped to form the body of this login form. Own code is CSS programming code. With which this Neumorphism form has been designed.

<div class="content">      <div class="text">Login Form</div></div></div>
Enter fullscreen mode Exit fullscreen mode 
*{  margin:0;  padding: 0;  box-sizing: border-box;  font-family: 'Poppins', sans-serif;}html,body{  height: 100%;}body{  display: grid;  place-items: center;  text-align: center;  background: #dde1e7;}.content{  width: 330px;  background: #dde1e7;  border-radius: 10px;  padding: 40px 30px;  box-shadow: -3px -3px 7px #ffffff73,              2px 2px 5px rgba(94, 104, 121, 0.288);}.content .text{  font-size: 33px;  font-weight: 600;  margin-bottom: 35px;  color: #000;}
Enter fullscreen mode Exit fullscreen mode

Alt Text

Add Email Holder

I have used the following HTML and CSS code to create the option to add the email id in the form shown in the demo.

<div class="field">          <span class="fas fa-user"></span>          <input type="text" required>          <label>Email or Phone</label>        </div>
Enter fullscreen mode Exit fullscreen mode 
.content .field{  height: 50px;  width: 100%;  display: flex;  position: relative;}.field input{  height: 100%;  width: 100%;  padding-left: 45px;  font-size: 18px;  outline: none;  border: none;  color: #595959;  background: #dde1e7;  border-radius: 25px;  box-shadow: inset 2px 2px 5px #babecc,              inset -5px -5px 10px #ffffff73;}.field input:focus ~ label{  box-shadow: inset 2px 2px 5px #babecc,              inset -1px -1px 2px #ffffff73;}
Enter fullscreen mode Exit fullscreen mode

Alt Text

Add Password Holder

I have used the following code to make a place to input the password shown in the demo. Those have been used in all the work of adding and designing passwords.

<div class="field">          <span class="fas fa-lock"></span>          <input type="password">          <label>Password</label>        </div>
Enter fullscreen mode Exit fullscreen mode 
.forgot-pass{  text-align: left;  margin: 10px 0 10px 5px;}.forgot-pass a{  font-size: 16px;  color: #3498db;  text-decoration: none;}.forgot-pass:hover a{  text-decoration: underline;}
Enter fullscreen mode Exit fullscreen mode

Alt Text

Add Login Button

The following programming codes have helped to create the buttons and forget password options in the form shown above.

<div class="forgot-pass"><a href="#">Forgot Password?</a></div>        <button>Sign in</button>        <div class="signup">Not a member?          <a href="#">signup now</a>        </div>
Enter fullscreen mode Exit fullscreen mode 
button{  margin: 15px 0;  width: 100%;  height: 50px;  color: #000;  font-size: 18px;  font-weight: 600;  background: #dde1e7;  border: none;  outline: none;  cursor: pointer;  border-radius: 25px;  box-shadow: 2px 2px 5px #babecc,              -5px -5px 10px #ffffff73;}button:focus{  color: #3498db;  box-shadow: inset 2px 2px 5px #babecc,              inset -5px -5px 10px #ffffff73;}.signup{  font-size: 16px;  color: #595959;  margin: 10px 0;}.signup a{  color: #000;  text-decoration: none;}.signup a:hover{  text-decoration: underline;}
Enter fullscreen mode Exit fullscreen mode

Alt Text

With these four methods, I have designed this Neumorphism login form. Hope you learned the making of this UI Design form from this article. Click the demo button above to get more guidelines. There I have shared tutorials on creating all kinds of login forms. You can download the code required to make it from above. Hope you like this form and have learned it.

                If you like it, you must like it
Enter fullscreen mode Exit fullscreen mode

Original Link: https://dev.to/backlinkn/neumorphism-login-form-ui-design-using-html-css-3mj0

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To