前端布局小案例，如何创建漂亮的毛玻璃输入表单卡片效果

news2025/7/7 17:43:09

994fbb9ce0dfed9617882bb4aab1ac7e.jpeg

在当今互联网时代，用户体验是至关重要的。当我们在设计网站或应用程序时，一个漂亮、吸引人的界面往往是吸引用户并提高用户满意度的关键因素之一。而一个好看的表单则可以提高用户提交的意愿和效率。本文将介绍如何使用HTML和CSS创建一个漂亮的毛玻璃输入表单卡片效果，以提高用户的体验和满意度。让我们开始吧！

a51ba660262cea589858a79536812ff8.jpeg

HTML部分

首先，我们需要决定合适的字体。在我的例子中，我使用的是 Space Mono，你也可以使用 Roboto 或 Poppins。让我们将其导入到你的 HTML 中。

<link
      href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap"
      rel="stylesheet" />

现在是时候使用 HTML 创建结构了。

<body>
  <!-- 背景圆形容器 -->
  <div class="circles">
    <!-- 背景圆形1 -->
    <div class="circle circle-1"></div>
    <!-- 背景圆形2 -->
    <div class="circle circle-2"></div>
  </div>

  <!-- 输入容器 -->
  <div class="container">
    <!-- 标题 -->
    <h1>Enter Your Card Details</h1>

    <!-- 卡片容器 -->
    <div class="card">
      <!-- 卡片 logo -->
      <img class="logo" src="visa.png" />

      <!-- 卡片号码 -->
      <label>Card Number</label>
      <input class="card-number" placeholder="1234 1234 1234 1234" type="text" required maxlength="16" />

      <!-- 卡片详细信息容器 -->
      <div class="container2">
        <!-- 卡片持有人名字 -->
        <div class="name">
          <label>Card Holder</label>
          <input class="card-name" placeholder="ISRAEL ISRAELI" type="text" required />
        </div>

        <!-- 卡片过期日期 -->
        <div class="expiration-date">
          <label>Exp. Date</label>
          <input class="card-name" placeholder="10/25" type="text" maxlength="5" required />
        </div>

        <!-- 卡片 CCV 码 -->
        <div class="ccv">
          <label>CCV</label>
          <input class="card-name" placeholder="123" type="text" maxlength="3" required />
        </div>
      </div>
    </div>
  </div>
</body>

布局代码详细解释（如果你很熟悉了，请忽略）：

  • div 标签（class="card"）：这是一个用于显示卡片详细信息的容器，它包含一个 logo 图像和卡片详细信息的输入字段。

  • img 标签：这是一个用于显示卡片公司的 logo 图像。

  • label 标签：这是一个用于指示输入字段的标签，它包含在输入字段之前。

  • input 标签（class="card-number"）：这是一个用于输入卡片号码的文本框，它有一个占位符，指示用户输入正确的卡片号码，必填，最大长度为16。

  • div 标签（class="container2"）：这是一个包含卡片详细信息的容器，包含了卡片持有人、过期日期和 CCV 码。

  • div 标签（class="name"）：这是一个包含输入卡片持有人名字的容器，它包含一个标签和一个输入字段。

  • input 标签（class="card-name"）：这是一个用于输入卡片持有人名字的文本框，必填。

  • div 标签（class="expiration-date"）：这是一个包含输入卡片过期日期的容器，它包含一个标签和一个输入字段。

  • input 标签（class="card-name"）：这是一个用于输入卡片过期日期的文本框，必填，最大长度为5。

  • div 标签（class="ccv"）：这是一个包含输入卡片 CCV 码的容器，它包含一个标签和一个输入字段。

  • input 标签（class="card-name"）：这是一个用于输入卡片 CCV 码的文本框，必填，最大长度为3。

关键的CSS部分

现在让我们深入研究 CSS。

现在，首先是背景圆形。我们必须将 border-radius 设为 50%，以使其成为圆形。

.circle {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(120deg, #1d976c, #2c3e50);
}

接下来是输入框样式的设置：

  • 对于输入框，我们需要使用 Mono Space 字体和底部边框来获得白色下划线。

  • 占位符是提供输入格式细节的最佳方式。

input {
  font-family: "Space Mono", monospace;
  border: none;
  font-size: 16px;
  height: 26px;
  color: #ffffff;
  background: 0;
  padding: 0;
  width: 0;
  border-bottom: 1px solid white;
  color: white
}

接下来标签设置（label），主要是要设置字体大小和字体。

label {
  color: white;
  font-size: 12px;
  font-weight: normal;
  font-family: "Space Mono", monospace;
  pointer-events: none;
  display: block;
  padding-bottom: 2px;
}

最后我们设置 card 容器的外观和布局

现在是最主要、最有趣的部分，如何使卡片看起来像玻璃。为此，我们只需要三个属性：backdrop-filter: blur(35px)、border: 2px solid rgba(255, 255, 255, 0.1)、box-shadow: 0 0 80px rgba(0, 0, 0, 0.25)。

backdrop-filter 属性将使卡片后面的内容模糊不清。

然后是 border 属性，它将给它一个漂亮的边框和描边。

现在最后但并非最不重要的是，我们要设置 box-shadow 属性，这将产生一个漂亮而干净的阴影效果。

.card {
  display: flex;
  flex-direction: column;
  height: 280px;
  width: 420px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(35px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
  padding: 20px 30px 30px 30px;
  overflow: hidden;
}

最后贴出完整的CSS代码

* {
  margin: 0;
  padding: 0;
}

h1 {
  font-family: "Poppins", sans-serif;
  font-size: 30px;
  font-weight: 300;
  padding-left: 30px;
  padding-bottom: 20px;
  color: #ffffff;
  width: 420px;
  line-height: 1.5em;
  text-align: left;
}

textarea:focus,
input:focus {
  outline: none;
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  font-family: "Space Mono", monospace;
  background-color: rgb(240, 244, 247);
  background: linear-gradient(-70deg, #202020, #000000);

  margin: 0;
}

.circle {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(120deg, #1d976c, #2c3e50);
}
.circles {
  position: absolute;
  height: 270px;
  width: 450px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}
.circle-1 {
  height: 300px;
  width: 300px;
  top: 100px;
  left: -50px;
  opacity: 0.8;
}

.circle-2 {
  height: 240px;
  width: 240px;
  bottom: 40px;
  right: -100px;
  opacity: 0.8;
}

.card {
  display: flex;
  flex-direction: column;
  height: 280px;
  width: 420px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(35px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
  padding: 20px 30px 30px 30px;
  overflow: hidden;
}

.logo {
  height: 80px;
  width: 100px;
  margin-bottom: 20px;
}

.card-number {
  font-size: 30px;
  font-family: "Space Mono", monospace;
  width: 100%;
  height: 50px;
  margin-bottom: 40px;
}

.card-number::placeholder {
  color: #b5b5b5;
  font-size: 30px;
  font-family: "Space Mono", monospace;
}

input::placeholder {
  color: #b5b5b5;
  font-family: "Space Mono", monospace;
}

.name {
  font-family: "Space Mono", monospace;
  padding: 0px 80px 0px 0px;
  margin-right: 40px;
  width: 100px;
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.expiration-date {
  font-family: "Space Mono", monospace;
  padding: 0px 0px 0px 0px;
  margin-right: 60px;
  width: 80px;
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.ccv {
  font-family: "Space Mono", monospace;
  padding: 0px 0px 0px 0px;
  margin-right: 0px;
  width: 60px;
  position: relative;
  display: inline-block;
  overflow: hidden;
}

input {
  font-family: "Space Mono", monospace;
  border: none;
  font-size: 16px;
  height: 26px;
  color: #ffffff;
  background: 0;
  padding: 0;
  width: 0;
  border-bottom: 1px solid white;
  color: white;
}

label {
  color: white;
  font-size: 12px;
  font-weight: normal;
  font-family: "Space Mono", monospace;
  pointer-events: none;
  display: block;
  padding-bottom: 2px;
}

.card-name {
  color: white;
  font-size: 16px;
  height: 26px;
  width: 160px;
  border-bottom: 1px solid white;
  color: white;
}

.container2 {
  display: flex;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

结束

通过本文，我们学习了如何使用HTML和CSS创建漂亮的毛玻璃输入表单卡片效果。我们使用了Mono Space字体、bottom border和place-holder属性来为输入框添加样式，同时利用backdrop-filter、border和box-shadow属性为卡片添加了毛玻璃和阴影效果，使整个表单更加美观和有吸引力。

希望本文能够为大家提供一些灵感，同时也帮助大家了解如何使用CSS和HTML制作出吸引人的UI效果。到这里，本案例就介绍到这里，建议大家还是亲自实践下，才能印象深刻。感谢你的阅读。

文章创作不易，如果你喜欢我的分享，别忘了点赞转发，让更多有需要的人看到，最后别忘记关注「前端达人」，你的支持将是我分享最大的动力，后续我会持续输出更多内容，敬请期待。

案例地址：https://codepen.io/lalit0111/pen/GRGJYgo

来源：https://medium.com/@
algopoint.ltd/how-to-create-a-credit-card-input-using-html-css-glassmorphism-884a659e3f59

作者：AlgoPoint

非直接翻译，有自行改编和添加部分，翻译水平有限，难免有疏漏，欢迎指正

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/407007.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

vue3 响应式对象的 api 详解

vue3 响应式对象的 api 详解

文章目录Ⅰ. ref、reactive ( 递归监听 )Ⅱ. isRef、isReactive ( 判断 )Ⅲ. toRef 和 toRefs ( 解构 )Ⅳ. toRaw 、 markRaw ( 解除代理)Ⅴ. unref ( 拷贝 )Ⅵ. shallowRef 、shallowReactive&#xff08; 非递归监听 &#xff09;Ⅶ. triggerRef &#xff08;强制更新&#x…
阅读更多...
使用小程序制作一个老照片修复工具，让追忆时光触手可及

使用小程序制作一个老照片修复工具，让追忆时光触手可及

一、文章前言二、准备流程三、开发步骤四、完整代码一、文章前言 此文主要通过小程序来制作一个照片修复工具，实现黑白图片上色及图像效果增强等功能。 二、准备流程 2.1、注册百度开放平台及微信公众平台账号。 2.2、下载及安装微信Web开发者工具。 2.3、如需通过SDK调用及需…
阅读更多...
LVGL V8应用——通过按键切换页面

LVGL V8应用——通过按键切换页面

一、按键切换对象 程序 全局变量 static lv_obj_t *contanier1 NULL; static lv_obj_t *contanier2 NULL;按钮对应回调函数&#xff0c;实现容器的切换 static void win_btn_event_callback1(lv_event_t* e) {lv_event_code_t code lv_event_get_code(e);if (code LV_EVE…
阅读更多...
猿创征文｜前端到全栈，一名 IT 初学者的学习与成长之路

猿创征文｜前端到全栈，一名 IT 初学者的学习与成长之路

目录导读写在前面创作之路❤ 前端开发工程师知识体系❤ Vue&React 开发框架❤ 前端开发实战❤ Linux&云原生小马技术栈❤ 主打技术专栏❤ 其他专栏(实用干货)❤ 技术栈词云学习与成长总结写在前面 2021 年 7 月 18 日我在 CSDN 发布了第一篇技术文章&#xff0c;距现在…
阅读更多...
如何用html制作一个简单的网页

如何用html制作一个简单的网页

哈喽&#xff0c;大家好&#xff01;我是小张。大家在浏览网页的时候有没有好奇过这个网页是怎么制作&#xff0c;其实只是制作一个简单的网页是很简单的。今天我就教一下大家如何用HTML制作一个简单的网页。 了解html 1. 学习html之前先要知道html是什么 HTML的全称为超文本标…
阅读更多...
查看Chrome浏览器版本及下载对应的webdriver，并下载安装

查看Chrome浏览器版本及下载对应的webdriver，并下载安装

查看Chrome浏览器版本及下载对应的webdriver&#xff0c;并下载 文章目录查看Chrome浏览器版本及下载对应的webdriver&#xff0c;并下载一&#xff0c;查看自己电脑的Chrome的版本二&#xff0c;webdriver的对应版本三&#xff0c;安装一&#xff0c;查看自己电脑的Chrome的版…
阅读更多...
nvm介绍、安装、报错处理以及使用

nvm介绍、安装、报错处理以及使用

前言 工作中我们偶尔可能同时在进行多个项目开发&#xff0c;而多个不同的项目所使用的 node 版本又是不一样的&#xff0c;在这种情况下&#xff0c;对于维护多个版本的node 将会是一件非常麻烦的事情&#xff0c;因为需要操作做卸载安装操作&#xff0c;而nvm 就是为解决这个…
阅读更多...
关于Vue3的defineProps用法

关于Vue3的defineProps用法

之前只是单纯的会用&#xff0c;因为vue关于父子组件通讯差别有一点点大。 1.在父组件内传递变量的时候&#xff0c;需要加冒号:&#xff0c;否则你就只是单纯的传递了一个字符串而已。 2.在子组件里不需要引入defineProps就可调用该函数去接收父组件传来的属性。 我个人在这里…
阅读更多...
axios基本使用及跨域问题详解

axios基本使用及跨域问题详解

前端请求自然也发展迅速&#xff0c;从原生的XHR到jquery ajax&#xff0c;再到现在的axios和fetch。axios&#xff08; https://axios-http.com/zh/ &#xff09;是Vue推荐的http库&#xff0c;这个还是要了解一点的。 安装 $ npm install axios基本使用的例子 1、在main.j…
阅读更多...
Vue项目：学生管理系统

Vue项目：学生管理系统

&#x1f482; 个人主页: 陶然同学&#x1f91f; 版权: 本文由【陶然同学】原创、在CSDN首发、需要转载请联系博主&#x1f4ac; 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦&#x1f485; 想寻找共同成长的小伙伴&#xff0c;请点击【Java全栈开发社区】…
阅读更多...
Nginx的安装配置教程

Nginx的安装配置教程

一、Nginx的下载与安装 Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件&#xff08;IMAP/POP3&#xff09;代理服务器。其特点是占有内存少&#xff0c;并发能力强&#xff0c;事实上nginx的并发能力在同类型的网页服务器中表现较好 1.下载 在Nginx的官网的下载页面…
阅读更多...
JavaScript-匿名函数

JavaScript-匿名函数

什么是匿名函数 1、匿名函数,即没有名称的函数 2、如果单独只写一个匿名函数&#xff0c;此时是不符合语法要求的 会报错。需要给 匿名函数包裹一个括号&#xff0c;使之成为表达式。 3、被小括号包裹的内容会被js识别为一个函数表达式 如何执行和使用匿名函数&#xff1f; …
阅读更多...
前端直传阿里云OSS

前端直传阿里云OSS

阿里云对象存储服务&#xff08;Object Storage Service&#xff0c;简称OSS&#xff09;&#xff0c;是阿里云对外提供的海量、安全、低成本、高可靠的云存储服务。 目前通过Web端直传文件&#xff08;Object&#xff09;到OSS&#xff0c;有两种方案&#xff1a; 一、利用OSS…
阅读更多...
web渗透之文件上传漏洞

web渗透之文件上传漏洞

目录一、原理二、利用方式三、文件上传的风险处四、文件上传漏洞的危害五、文件上传漏洞常见的绕过方式1、前端绕过检测2、mime类型检测绕过3、黑名单绕过&#xff08;1&#xff09;、相似扩展名&#xff08;2&#xff09;、apache配置文件&#xff08;3&#xff09;、大小写绕…
阅读更多...
如何将html模板资源转为vuecli项目

如何将html模板资源转为vuecli项目

1.目标 将找到的html素材模板&#xff0c;转换为vue的文件。 这个网上照了一圈&#xff0c;没找到合适的方案&#xff0c;就自己尝试弄了一下 目标效果 2.具体步骤 1. 通过vueclie 创建项目 vue create 项目名称然后把默认的样式删除了 2. 将静态资源放到vue项目的 publi…
阅读更多...
【python】自动填写问卷星问卷及提交

【python】自动填写问卷星问卷及提交

前言&#xff1a;问卷是很好的网络调查方式之一&#xff0c;近年来&#xff0c;问卷星被广泛应用于各方面的调查。本文介绍了利用python代码自动填写问卷星基本题目&#xff0c;拥有自动填写、解决智能验证、批量提交问卷等功能。 目录 1.下载浏览器驱动 2. selenium基本配置…
阅读更多...
【Java 基础篇】Java 初识、编译运行机制及开发环境搭建

【Java 基础篇】Java 初识、编译运行机制及开发环境搭建

一、Java 语言初识二、Java 编译运行机制2.1 JVM、JRE、JDK 三大概念介绍2.2 Java 是如何运行的三、Java 开发环境搭建(文末附下载地址)四、第一个 Java 项目4.1 创建项目和 .Java 源文件4.2 输出 hello world一、Java 语言初识 Java 是由 Sun Microsystems 公司于 1995 年 5 …
阅读更多...
十大经典排序算法（下）

十大经典排序算法（下）

&#x1f353;个人主页&#xff1a;bit.. &#x1f352;系列专栏&#xff1a;Linux(Ubuntu)入门必看 C语言刷题 数据结构与算法 HTML和CSS3 目录 1.6 快速排序 1. 算法步骤 2. 动图演示 3.代码实现 1.7 堆排序 1. 算法步骤 2. 动图演示 3. 代码实现 1.8 计数排…
阅读更多...
JavaScript注册监听事件与清除监听事件

JavaScript注册监听事件与清除监听事件

JavaScript中有两种方法可以注册监听事件&#xff0c;一种是传统的注册方式&#xff0c;on事件名称的注册方法&#xff0c;如btn.onclick,还有方法监听事件注册方式&#xff0c; addEventListener()和ie8以下的attachEvent()。 注册监听事件 传统方式 语法格式&#xff1a;元…
阅读更多...
ES6笔记————let，箭头函数，剩余参数

ES6笔记————let，箭头函数，剩余参数

目录 一.let,var,const区别 let const 区别 二&#xff0c;解构 1 数组解构 2对象解构 三&#xff0c;箭头函数 1 基础语法 2 省略写法 3 对象方法里的this 4 apply/call调用时的this 5 箭头函数中this 8 箭头函数应用 四&#xff0c;剩余函数 一.let,var,con…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023