how to create a neomorphic login form
Creating a UI designed Responsive Neomorphic Login Form [ html css]
 |
| Neomorphic Login form |
step 1 : Wrting the basic html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
For creating neomorphic form firstly we have to create input methods in the form .so for that om going to create username ,gmail , password inputs using the <input> tag.
And I aslo created a submit button using the same <input> tag .
NOte that all the input methods will be embed in division or else you can also create a secton for that .
And remember that the division which is created for combining the input methods also to be embed in a main division just acts as a parent division or a section
for better understanding please follw the code given below .
In the below code im have created four input methods which were described above.
<div class="main">
<div class="form">
<img class="img" src="E:\☻DINESH IMP☻\html css/download.jpg" alt="" height="70px" width="70px">
<div class="input">
<input type="text " placeholder="username">
</div>
<div class="input">
<input type="email" placeholder="gmail" required>
</div>
<div class="input">
<input type="password" placeholder="password" required>
</div>
<div class="input">
<input class="button" type="submit" value="submit">
</div>
</div>
</div>
step 3 : writing basic needs of the web page.
Here im going to write the basic needs like padding and margin to the body and also giving background color to the body etc....
Here you can also write heading tags or some paragraphs ,but i have only written heading in the page and even i also edit the style of the heading..
step 4 : Designing the Neomorphism
* {
margin: 0;
padding: 0;
}
body {
background-color: #e3edf7;
}
.main {
position: relative;
display: flex;
justify-content: center;
text-align: center;
}
Check your output ones . its just clumsy because we have nt use css here. Now im going to design the login card using css ,for that first of all im consedreing the secondary division named " .form " and i have set the width and height and set the value of display as flex beacuse the display flex makes the form inputs to be in a standard mode.
Set the background color to #e3edf7 ,as it is the best color for neomorphic effect .Now its time to set the box shadow colors .
For that i have set the shadow to accord to this color codes given here 6px 6px 10px -1px rgba(0, 0, 0, 0.329), -6px -6px 10px -1px rgba(255, 255, 255, 0.836)Now give the border 1 px solid very light opacity of black with color code rgba(0, 0, 0, 0, ).
.form {
height: 400px;
width: 270px;
display: flex;
align-items: center;
justify-content: center;
display: block;
background: #e3edf7;
margin: 0 15px;
box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.329), -6px -6px 10px -1px rgba(255, 255, 255, 0.836);
border: 1px solid rgba(0, 0, 0, 0, );
transition: transform 0.3s;
margin-top: 20%;
padding: 10px;
border-radius: 10px;
}
NOW ITS TIME TO DESIGN THE INPUT AND IMG METHODS:
*Designing the input methods
For that i have considered the input method in css and have set the margin at top as20px, and background as neomorphic and i have used the text alignment properties to align the content at center.
Dont forget to set the box shadow and border as the same given at the top of the codes.
input {
margin-top: 20px;
background: #e3edf7;
box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.15), -6px -6px 10px -1px rgba(255, 255, 255, 0.7);
border: 1px solid rgba(160, 156, 156, 0);
height: 40px;
text-align: center;
justify-content: center;
color: dodgerblue;
cursor: pointer;
pointer-events: fill;
border-radius: 2px;
}
In the login form i have used img which is just appers as the users img. Now im going to design the img which wasgiven in the html .
.img {
border-radius: 50%;
margin-top: 30px;
position: relative;
background: #e3edf7;
box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.15), -6px -6px 10px -1px rgba(255, 255, 255, 0.7);
border: 1px solid rgba(160, 156, 156, 0);
transition: transform 0.3s;
}
Now we are going to create a hover effect on the input & card using the hover property.
*Hover effect for input
When the user hovers on the input its to be looks perfectly like a neomorphic effect .so for that im using minus box shadow property which just looks like the designned place will go deep .
input:hover {
box-shadow: inset 4px 4px 6px -1px rgba(0, 0, 0, 0.2), inset 4px 4px 6px -1px rgba(255, 255, 255, 0.7), -0.5px -0.5px 0px rgba(255, 255, 255, 1), 0.5px 0.5px 0px rgba(255, 255, 255, 0.15), 0px 12px 10px -10px rgba(255, 255, 255, 0.5);
border: 1px solid rgba(0, 0, 0, 0, 0.01);
transform: translateY(2px);
transition: transform 0.3s;
}
*Hover effect for form
I have used a smal line of code for making the card transforms little small when hovered.
OPTIONAL CODE FOR CREATING SEMI COLORED CIRCLES ON BODY
.form:hover {
transform: scale(0.9);
transition: 0.5s;
}
THIS EFECT WAS EXPLAINED IN THE BEFORE TUTORIAL . (GLASSMORPHISM)
The output will be looks like this:
body::before {
content: '';
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: linear-gradient( #86d2ee, #e71034);
clip-path: circle(20% at right 70%);
}
body::after {
content: '';
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: linear-gradient(#e71034, #63c5e9);
clip-path: circle(20% at left 30%);
}
The output will be looks like this:
Download the source Code here:
If you are interested in learning more about technology and coding and ethical hacking tips and tricks ,join in our official whatsapp group with this link provided below.
click here to join in our whatsapp group.
yours dinesh.
No comments: