HTML Neumorphism 登录表单

本文将介绍HTML Neumorphism登录表单的制作方法，并提供详细的代码示例。

什么是Neumorphism设计风格

Neumorphism设计风格，是指一种采用浮雕效果和光影材质的UI设计风格。该风格的设计特点是，使用凹凸不平的效果来模拟物体表面的感觉，同时在物体的边缘添加光照阴影效果，以营造出一种现实感觉。

制作登录表单

HTML结构

我们需要先构建HTML结构来表示登录表单。我们需要用到输入框和按钮，以及表单标签，如下所示：

<form class="neumorphism-form">
  <h2>Login</h2>
  <div>
    <input type="text" id="username" name="username" placeholder="Username" required>
    <label for="username">Username</label>
  </div>
  <div>
    <input type="password" id="password" name="password" placeholder="Password" required>
    <label for="password">Password</label>
  </div>
  <div>
    <button type="submit">Login</button>
  </div>
</form>

我们设置了表单类名为“neumorphism-form”，以后方便我们样式调整； 在表单中，包含了一个标题，用于显示“Login”字样；接下来，是两个输入框，输入框中的提示信息是“Username”和“Password”，以及login按钮，在后续的样式设置中，将使用这些设置样子和动作。

CSS样式

为了实现Neumorphism效果，我们需要设置几个样式属性，如下所示：

.neumorphism-form{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  height: 350px;
  width: 400px;
  background-color: #F0F0F0;
  border-radius: 50px;
  padding: 30px;
  box-shadow: 20px 20px 60px #C4C4C4, 
              -20px -20px 60px #FFFFFF; 
}

.neumorphism-form h2{
  font-family: Arial, Helvetica, sans-serif;
  color: #787878;
  margin-bottom: 20px;
  text-shadow: 1px 1px 2px #FFFFFF;
}

.neumorphism-form div{
  display: flex;
  flex-direction: column;
}

.neumorphism-form input[type=text], 
.neumorphism-form input[type=password]{
  padding: 10px;
  margin: 10px 0px;
  border: none;
  outline: none;
  background-color: #F0F0F0;
  box-shadow: inset 5px 5px 5px #C4C4C4, 
              inset -5px -5px 5px #FFFFFF;
}

.neumorphism-form input[type=text]:focus, 
.neumorphism-form input[type=password]:focus{
  background-color: #E4E4E4;
}

.neumorphism-form label{
  font-family: Arial, Helvetica, sans-serif;
  color: #787878;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 5px;
  text-shadow: 1px 1px 2px #FFFFFF;
}

.neumorphism-form button[type=submit]{
  height: 40px;
  width: 200px;
  border: none;
  border-radius: 20px;
  font-size: 18px;
  font-weight: bold;
  color: #FFFFFF;
  background-color: #787878;
  box-shadow: 15px 15px 30px #C4C4C4, 
              -15px -15px 30px #FFFFFF;
}

.neumorphism-form button[type=submit]:hover{
  cursor: pointer;
  background-color: #686868;
}

结论

通过上述代码和样式设置，我们成功实现了一个带有Neumorphism效果的登录表单。这个表单可以适用于大多数网站，为用户提供了高质量的用户体验。