NeumorphismUI Form
Last Updated :
09 Jul, 2021
NeumorphismUI is a modern soft UI used in designing web elements, frames, and screens and is also a relatively new design trend that achieved great popularity these days. Its aesthetic is marked by minimal and real-looking UI that’s sort of a re-advancement of the old SkeuomorphismUI design trend.
What are we going to build?
HTML Code:
HTML
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width" >
< link rel = "stylesheet" href = "index.css" >
</ head >
< body >
< div class = "container" >
< div class = "logo" >
< img src =
</ div >
< div class = "title" >GeeksForGeeks</ div >
< form class = "form" >
< label >EMAIL</ label >
< input type = "email"
placeholder = "example@test.com" />
< label >PASSWORD</ label >
< input type = "password"
placeholder = "Min 6 characters long" />
< button class = "btn" type = "submit" >
LOGIN
</ button >
</ form >
</ div >
</ body >
</ html >
|
The following is the CSS file for styling our form which is used in the above HTML code.
Filename: index.css
CSS
body {
background : #ecf0f3 ;
text-align : center ;
}
.container {
position : relative ;
width : 350px ;
height : 500px ;
border-radius: 20px ;
padding : 40px ;
box-sizing: border-box;
box-shadow: 14px 14px 20px #cbced1 ,
-14px -14px 20px #fff ;
}
.logo {
height : 100px ;
width : 100px ;
margin : auto ;
border-radius: 50% ;
box-sizing: border-box;
box-shadow: 7px 7px 10px #cbced1 ,
-7px -7px 10px white ;
padding : 10px
}
.logo img {
height : 100% ;
width : 100% ;
}
.title {
margin-top : 10px ;
font-weight : 900 ;
font-size : 1.8 rem;
color : #2f8d46 ;
letter-spacing : 1px ;
}
.form label {
float : left ;
margin : 14px 0 ;
}
.form input {
width : 90% ;
height : 3 rem;
border : none ;
border-radius: 1 rem;
font-size : 1.1 rem;
padding-left : 1.4 rem;
box-shadow: inset . 2 rem . 2 rem . 5 rem #c8d0e7 ,
inset -. 2 rem -. 2 rem . 5 rem #fff ;
background : none ;
font-family : inherit;
}
.form input::placeholder {
color : rgba( 0 , 0 , 0 , 0.6 );
}
.form input:focus {
outline : none ;
box-shadow: . 3 rem . 3 rem . 6 rem #c8d0e7 ,
-. 2 rem -. 2 rem . 5 rem #fff ;
}
.btn {
width : 100% ;
height : 2.4 rem;
border-radius: 1 rem;
cursor : pointer ;
font-size : 1.1 rem;
margin : 20px 0 ;
border : none ;
box-shadow: . 3 rem . 3 rem . 6 rem #c8d0e7 ,
-. 2 rem -. 2 rem . 5 rem #fff ;
background-color : #2f8d46 ;
color : #fff ;
}
|
Supported Browsers:
- Google Chrome
- Edge
- Mozilla Firefox
- Opera
- Safari
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...