使用 HTML 和 CSS 进行新拟态登录表单 UI 设计

2025-06-04

使用 HTML 和 CSS 进行新拟态登录表单 UI 设计

在本文中，我将向您展示如何创建新拟态设计的登录表单。我知道每个人都知道如何制作这种设计。但是，我认为有很多初学者不知道如何创建新拟态登录表单。希望本文能对他们有所帮助。

新拟态设计是一种目前非常流行的现代设计风格。它比一般的设计更加美观和吸引人。背景颜色和内容背景颜色完全相同。然而，在本例中，我们使用 CSS 代码创建了一些颜色效果来塑造登录表单。与普通的登录表单一样，它包含输入邮箱 ID 和密码、登录按钮以及个人资料图片等元素。

如果您想要现场演示，可以通过此链接观看。您也可以下载源代码。

如果您是初学者，请按照以下教程操作。下面我逐步演示了创建元素所需的代码。

步骤 1：基本 HTML 代码

首先添加基本的 html 代码来创建此登录表单。




<!--font-awesome icon CDN link-->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <div class="content">
 <!--Image & Title-->
      <form action="#">
        <!--Email & password input place-->

       <!--login & outer button-->
      </form>
  </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;
}
Enter fullscreen mode Exit fullscreen mode

第二步：基本新拟态结构

使用以下编程代码，我创建了这个新拟态设计的基本结构。



.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);
}
Enter fullscreen mode Exit fullscreen mode

替代文本

步骤 3：添加个人资料图片

我使用以下 HTML 和 CSS 编程在这个新拟态框中添加了个人资料图片。我将这张个人资料图片放置在登录表单上方稍远的位置，以便看起来更美观。



<img src="https://lh3.googleusercontent.com/a-/AOh14Gj99VObFyE8W_h8RrcwZO_aYiIHu5AAa_XpnOym=s600-k-no-rp-mo">
Enter fullscreen mode Exit fullscreen mode 


.content img{
  width: 90px;
  height: 90px;
  margin-top: -100px;
  border-radius: 50px;
  box-shadow: 

  0px 0px 2px #5f5f5f,
  0px 0px 0px 5px #ecf0f3,
  8px 8px 15px #a7aaaf,
  -8px -8px 15px #ffffff
  ;
}
Enter fullscreen mode Exit fullscreen mode

替代文本

步骤 5：添加标题

我使用了个人资料图片下方的标题。



<div class="text">Foolish Developer</div>
Enter fullscreen mode Exit fullscreen mode 


.content .text{
  font-size: 25px;
  font-weight: 600;
  margin-bottom: 35px;
  color: #000;
}
Enter fullscreen mode Exit fullscreen mode

替代文本

步骤 6：输入电子邮件 ID

登录表单中最重要的是输入邮箱地址和密码的地方。我使用了以下代码，为大家第一次输入邮箱地址留出了空间。在这种情况下，输入邮箱地址的位置稍微向内了一点。这个设计肯定是用 CSS 代码实现的。



<div class="field">
          <span class="fa fa-user"></span>
          <input type="text" required>
          <label>Email Id</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;
}

.field:nth-child(2){
  margin-top: 20px;
}

.field span{
  position: absolute;
  width: 50px;
  line-height: 50px;
  color: #595959;
}

.field label{
  position: absolute;
  top: 50%;
  left: 45px;
  pointer-events: none;
  color: #666666;
  transform: translateY(-50%);
}


.field input:focus ~ label{
  opacity: 0;
}
Enter fullscreen mode Exit fullscreen mode

替代文本

第七步：输入密码

这就是我创建密码导入页面的方法。我使用了占位符和图标来表示导入邮箱 ID 和密码的位置。



<div class="field">
          <span class="fa fa-lock"></span>
          <input type="password">
          <label>Password</label>
        </div>
Enter fullscreen mode Exit fullscreen mode

替代文本

步骤 8：创建登录按钮

我使用下面的编程代码在这个新拟态登录表单中创建了登录按钮。这个登录按钮略高于正常页面。我借助下面给出的 CSS 编程代码完成了这个设计。



 <button>Log in</button>
Enter fullscreen mode Exit fullscreen mode 



button{
  margin: 25px 0 0 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;
}
Enter fullscreen mode Exit fullscreen mode

替代文本

步骤 10：Facebook 和 Google 按钮

这种新拟态设计的最新元素是Facebook和Google的按钮，这两个按钮像登录按钮一样略微向上。



<div class="or">Or</div>
        <div class="icon-button"> 

          <span class="facebook"><i class="fa fa-facebook"></i>  Facebook</span>

          <span><i class="fa fa-google"></i>  Google</span>


        </div>
Enter fullscreen mode Exit fullscreen mode 


.content .or{
  color: black;
  margin-top: 9px;
}

.icon-button{
  margin-top: 15px;
}
.icon-button span{
  padding-left: 17px;
  padding-right: 17px;
  padding-top: 6px;
  padding-bottom: 6px;

 border-radius: 5px;
  line-height: 30px;

  background: #dde1e7;
  box-shadow: 2px 2px 5px #babecc,
              -5px -5px 10px #ffffff73;
}
.icon-button span.facebook{
  margin-right: 17px;

}
.icon-button span:hover{
  color: #3498db;
  box-shadow: inset 2px 2px 5px #babecc,
              inset -5px -5px 10px #ffffff73;
}
Enter fullscreen mode Exit fullscreen mode

替代文本

希望你喜欢这个设计，并且你已经学会了如何使用HTML 制作新拟态切换按钮，你可以按照这篇文章来操作。如果你愿意，可以观看这个设计的现场演示，并在必要时下载源代码。你还可以查看我制作的更多设计。

相关文章：

  1. 简单页脚 HTML CSS
  2. 使用 JavaScript 的秒表
  3. JavaScript 年龄计算器
  4. 班加罗尔的IB学校
  5. HTML CSS 中的自动图像滑块

相关文章：

  1. 简单页脚 HTML CSS
  2. 使用 JavaScript 的秒表
  3. CSS浮动操作按钮
  4. JavaScript 年龄计算器
  5. 科拉曼加拉最好的幼儿园
  6. HTML CSS 中的自动图像滑块

如果有任何困难，当然可以发表评论。

您可以访问我的博客获取更多类似教程。https
://groundtutorial.com/

文章来源：https://dev.to/code_mystery/neumorphism-login-form-ui-design-using-html-css-cp5
Devto 翻译
PREV
使用 HTML、CSS 和 JavaScript 的响应式个人作品集网站
NEXT
使用 JavaScript、Html 和 CSS 制作带日期的数字时钟