仅使用 HTML 和 CSS 的玻璃态登录表单

2025-05-26

仅使用 HTML 和 CSS 的玻璃态登录表单

在本文中，我将向您展示如何使用 HTML 和 CSS 代码创建 Glassmorphism 登录表单。

您可以将任何简单的设计转换为玻璃态设计。为此，您需要更改一些代码。首先，使用半透明的 background-color，例如 rgba (255,255,255,0.13)。

其次，你需要使用backdrop-filter: blur (10px)一些虚化背景。最后，你需要使用边框来增强它的美感。

您可以观看现场演示来了解其工作原理。如果您想使用 HTML 和 CSS 代码创建 Glassmorphism 登录表单，请按照以下教程操作。

它的构建方式与上面演示中看到的普通登录表单类似。网页上创建了两个彩色圆圈。

步骤 1：设计网页

我使用下面的少量 CSS 代码设计了网页。这里我使用黑色作为网页的背景颜色。

*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    background-color: #080710;
}
Enter fullscreen mode Exit fullscreen mode

设计网页

第 2 步：在背景中创建两个彩色圆圈

我使用以下 HTML 和 CSS 代码在该页面上创建了两个彩色圆圈。虽然这两个圆圈并非设计的一部分，但我创建它们是为了设计背景。不过，在本例中，您可以使用任何其他图像。

这个圆的宽度和高度都是 200 像素，并且使用了 50% 的边框半径来使其完全圆形。位置：设为绝对位置，以便它保持在同一位置。

<div class="background">
   <div class="shape"></div>
   <div class="shape"></div>
</div>
Enter fullscreen mode Exit fullscreen mode 
.background{
    width: 430px;
    height: 520px;
    position: absolute;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
}
.background .shape{
    height: 200px;
    width: 200px;
    position: absolute;
    border-radius: 50%;
}
Enter fullscreen mode Exit fullscreen mode

我使用下面的 CSS 代码分别设计了两个圆，并使用了不同的颜色。第一个球体的背景使用了蓝色渐变。第二个圆则使用了红色渐变。

.shape:first-child{
    background: linear-gradient(
        #1845ad,
        #23a2f6
    );
    left: -80px;
    top: -80px;
}
.shape:last-child{
    background: linear-gradient(
        to right,
        #ff512f,
        #f09819
    );
    right: -30px;
    bottom: -80px;
}
Enter fullscreen mode Exit fullscreen mode

在背景中创建两个彩色圆圈

步骤3：创建Glassmorphism登录表单的基本结构

我们使用以下 HTML 和 CSS 代码创建了此登录表单的基本结构。此 GlassMorphism Effects 登录表单的宽度为 400px，并且height of 520px。

我在这里使用了半透明的背景颜色。Border-radius: 10px这样做是为了使四个元素看起来更圆润。如果你看过演示，就会发现这个登录表单的背景颜色有点模糊。为此我backdrop-filter: blur (10px)使用了半透明。

 <form>

 </form>
Enter fullscreen mode Exit fullscreen mode 
form{
    height: 520px;
    width: 400px;
    background-color: rgba(255,255,255,0.13);
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    border-radius: 10px;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255,255,255,0.1);
    box-shadow: 0 0 40px rgba(8,7,16,0.6);
    padding: 50px 35px;
}

form *{
    font-family: 'Poppins',sans-serif;
    color: #ffffff;
    letter-spacing: 0.5px;
    outline: none;
    border: none;
}
Enter fullscreen mode Exit fullscreen mode

创建 Glassmorphism 登录表单的基本结构

步骤 4：向表单添加标题

现在，使用这些代码，我在表单中创建了一个标题。我已使用font-size: 32pxtext-align: center 属性来增加标题的文本大小，并使文本保持在中间。

<h3>Login Here</h3>
Enter fullscreen mode Exit fullscreen mode 
form h3{
    font-size: 32px;
    font-weight: 500;
    line-height: 42px;
    text-align: center;
}
Enter fullscreen mode Exit fullscreen mode

向表单添加标题

步骤5：创建输入位置以输入

使用下面的代码，我创建了一个用于输入电子邮件 ID 和密码的地方。为此，我使用了 HTML 的输入功能。我使用了 50px 高度的输入空间，并使用了半透明的背景颜色。

 <label for="username">Username</label>
   <input type="text" placeholder="Email or Phone" id="username">

 <label for="password">Password</label>
   <input type="password" placeholder="Password" id="password">
Enter fullscreen mode Exit fullscreen mode 
label{
    display: block;
    margin-top: 30px;
    font-size: 16px;
    font-weight: 500;
}
input{
    display: block;
    height: 50px;
    width: 100%;
    background-color: rgba(255,255,255,0.07);
    border-radius: 3px;
    padding: 0 10px;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 300;
}
::placeholder{
    color: #e5e5e5;
}
Enter fullscreen mode Exit fullscreen mode

创建输入位置以输入

步骤 6：将登录按钮添加到 Glassmorphism 登录表单

现在我在Glassmorphism 登录表单中创建了一个登录按钮。此登录按钮没有特定的尺寸。

我使用了填充来设置这个尺寸。此按钮的背景颜色为纯白色，并font-size: 18px使用了。

<button>Log In</button>
Enter fullscreen mode Exit fullscreen mode 
button{
    margin-top: 50px;
    width: 100%;
    background-color: #ffffff;
    color: #080710;
    padding: 15px 0;
    font-size: 18px;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
}
Enter fullscreen mode Exit fullscreen mode

将登录按钮添加到 Glassmorphism 登录表单

步骤 7：创建两个社交按钮

最后，我创建了两个社交媒体按钮。这两个按钮的长度均为 150px，背景颜色为半透明。

这里我使用了通过 font-awesome 的 CDN 链接激活的图标。

 <div class="social">
   <div class="go"><i class="fab fa-google"></i>  Google</div>
   <div class="fb"><i class="fab fa-facebook"></i>  Facebook</div>
 </div>
Enter fullscreen mode Exit fullscreen mode 
.social{
  margin-top: 30px;
  display: flex;
}
.social div{
  width: 150px;
  border-radius: 3px;
  padding: 5px 10px 10px 5px;
  background-color: rgba(255,255,255,0.27);
  color: #eaf0fb;
  text-align: center;
}
.social div:hover{
  background-color: rgba(255,255,255,0.47);
}
.social .fb{
  margin-left: 25px;
}
.social i{
  margin-right: 4px;
}
Enter fullscreen mode Exit fullscreen mode

创建两个社交按钮
我希望您从本教程中了解到我是如何借助 HTML 和 CSS 创建此 Glassmorphism 登录表单设计的。

相关文章：

  1. 响应式页脚 HTML CSS
  2. 海得拉巴的IB学校
  3. 使用 JavaScript 的简单秒表
  4. 浦那的幼儿园
  5. javaScript 密码生成器
  6. 海得拉巴最好的国际学校
  7. 使用 HTML CSS 的侧边栏菜单

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

文章来源：https://dev.to/shantanu_jana/glassmorphism-login-form-using-only-html-css-mia
Devto 翻译
PREV
如何使用 HTML、CSS 和 JavaScript 创建图像滑块
NEXT
使用 JavaScript 创建一个简单的秒表