NeumorphismUI 是最近流行的一种设计趋势，它将拟物化与现代风格相结合。

当应用于表单时，NeumorphismUI 是一种值得考虑的设计风格。它可以使用户界面感觉更加有形和交互，最终提高表单的整体可用性。

在本文中，我们将探讨不同类型的 NeumorphismUI 表单，并为每种表单提供示例和最佳实践。

示例

在此示例中，我们创建了一个登录表单来增强增强的体验。首先，我们首先以非拟态风格设计外形，赋予其现代而优雅的外观。我们添加了微妙的阴影效果来创造深度和维度的错觉，使其从背景中脱颖而出。

用户可以在输入字段中输入用户名和密码，将鼠标悬停在每个输入字段上时，该字段将出现带有阴影效果的凸起。

在输出中，用户看到登录表单具有视觉吸引力、实用且用户友好。

索引.html

          @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css");       * {           box-sizing: border-box;          margin: 0;          padding: 0;       }       body {          font-family: 'Lato', sans-serif;          display: flex;          align-items: center;          justify-content: center;          flex-direction: column;         width: 100%;          height: 100vh;         background-color: #e6e6e6;       }        .container {          background-color: #e6e6e6;          border-radius: 20px;          box-shadow: -5px -5px 10px #ffffff, 5px 5px 10px #b7b7b7;          padding: 30px;       }       h1 {          text-align: center;          margin-bottom: 30px;          font-size 2rem;       }       h2{          margin-bottom: 2rem;          color: #333;       }       form {          display: flex;          flex-direction: column;        }        .input-container {          position: relative;          margin-bottom: 20px;       }        input {          width:100%;         background-color: #e6e6e6;          border: none;          border-radius: 10px;          box-shadow: inset -5px -5px 10px #ffffff, inset 5px 5px 10px #b7b7b7;          padding: 15px 20px;          font-size 1rem;          transition: box-shadow 0.2s ease;       }       input:focus {          outline: none;          box-shadow: inset -5px -5px 10px #b7b7b7, inset 5px 5px 10px #ffffff;       }       i {         position: absolute;          top: 50%;          transform: translateY(-50%);          right: 20px;          color: #b7b7b7;          transition: transform 0.2s ease, color 0.2s ease;       }        input:focus + i {          transform: translateY(-50%) translateX(10px);          color: #777777;        }       button {          background-color: #ff7f50;          border: none;           border-radius: 10px;          color: #ffffff;           font-size: 1.2rem;          padding: 15px;           margin-top: 20px;          cursor: pointer;           transition: box-shadow 0.2s ease;        }        button:hover {           box-shadow: -5px -5px 10px #ffffff, 5px 5px 10px #b7b7b7;       }    
Neumorphism UI - Form Animation 
    
       
Neumorphic Login Form
                 
                       
          
                       
           Sign in            
  

登录后复制

示例

在此示例中，我们创建了一个渐变 NeumorphismUI 表单。该表单包括用户电子邮件、消息的文本输入字段和提交按钮。 CSS 样式包括渐变背景、柔和的圆形形状以及微妙的阴影，以创建 NeumorphismUI 效果。

索引.html

         body {         font-family: 'Lato', sans-serif;         display: flex;         align-items: center;         justify-content: center;         flex-direction: column;         width: 100%;         height: 100vh;         background: linear-gradient(to bottom, #a6c0fe, #3f6bfe);      }      .neumorphism-form {         display: flex;         flex-direction: column;         align-items: center;         padding: 2rem;         border-radius: 1rem;      }      .gradient {         background: linear-gradient(to bottom, #a6c0fe, #3f6bfe);         box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.1);      }      .neumorphism-form h2 {         color: #fff;         font-size: 2rem;         margin-bottom: 1rem;      }      .neumorphism-form label {         font-size: 1.2rem;         margin-bottom: 0.5rem;      }      .message,      .neumorphism-form input {         padding: 0.5rem;         border: none;         border-radius: 0.5rem;         background-color: #f7f7f7;         box-shadow: inset 4px 4px 8px rgba(255, 255, 255, 0.5),         inset -4px -4px 8px rgba(0, 0, 0, 0.1);         margin-bottom: 1rem;         width: 100%;      }      .neumorphism-form button {         background-color: #3f6bfe;         color: #fff;         border: none;         border-radius: 0.5rem;         padding: 0.5rem 1rem;         font-size: 1.2rem;         box-shadow: 4px 4px 8px rgba(163, 177, 198, 0.5),         -4px -4px 8px rgba(255, 255, 255, 0.2);         cursor: pointer;      }      .neumorphism-form button:hover {         transform: translateY(-2px);         box-shadow: 2px 2px 4px rgba(163, 177, 198, 0.5),         -2px -2px 4px rgba(255, 255, 255, 0.2);      }   

登录后复制

示例

在此示例中，我们创建了一个深色模式 Neumorphism UI 表单，允许用户订阅新闻通讯。之后，我们为主体添加了线性渐变背景色，并为表单提供了带有负值和正值的框阴影以创建同态效果。

在输出中，用户可以观察到具有同态效果的暗模式表单，其中表单元素似乎从背景中略微凸起。

Index.html –

         body {         font-family: "Lato", sans-serif;            display: flex;         align-items: center;         justify-content: center;         flex-direction: column;         width: 100%;         height: 100vh;         background: linear-gradient(150deg, #333, #111);      }      .neumorphism-form {         display: flex;         flex-direction: column;         align-items: center;         padding: 2rem;         border-radius: 1rem;      }      .dark-mode {         box-shadow: -4px -4px 4px rgba(255, 255, 255, 0.08),         4px 4px 4px rgba(0, 0, 0, 0.56), 0 0 0 rgba(255, 255, 255, 0.08) inset,         0 0 0 rgba(0, 0, 0, 0.56) inset;         border: 1px solid rgba(0, 0, 0, 0.08);      }      .neumorphism-form h2 {         font-size: 1.5rem;         margin-bottom: 1.5rem;         color: #64dd178f;      }      .neumorphism-form input[type="email"] {         padding: 0.5rem;         background-color: transparent;         box-shadow: -2px -2px 2px rgba(255, 255, 255, 0.08),         2px 2px 2px rgba(0, 0, 0, 0.56),         -2px -2px 2px rgba(255, 255, 255, 0.08) inset,         2px 2px 2px rgba(0, 0, 0, 0.56) inset;         border: 1px solid rgba(0, 0, 0, 0.08);         margin-bottom: 1rem;         width: 100%;            color: #ffff;      }      .neumorphism-form button {            background-color: transparent;            color: #ff40408f;            border-radius: 0.5rem;         padding: 0.5rem 1rem;         font-size: 1.2rem;         box-shadow: -2px -2px 4px rgba(100, 221, 23, 0.12),         4px 4px 4px rgba(0, 0, 0, 0.56), 0 0 0 rgba(100, 221, 23, 0.12) inset,         0 0 0 rgba(0, 0, 0, 0.56) inset;         border: 1px solid rgba(0, 0, 0, 0.08);         cursor: pointer;      }      .neumorphism-form button:hover {         transform: translateY(-2px);         border: solid 1px #64dd178f;      }   

登录后复制

结论

用户已经学会了如何使用 neumorphismUI 创建具有视觉吸引力的表单，例如渐变表单、深色模式表单和简单表单。他们还学习了如何使用 CSS 来创建同态设计，为表单提供现代而真实的外观。

以上就是同态UI表单的详细内容，更多请关注【创想鸟】其它相关文章！