如何在ReactJs应用程序中设置Glassmorphism效果

DebugUsery
136 阅读6分钟

在ReactJs应用程序中设置Glassmorphism效果

Glassmorphism是一个基于界面的概念，适用于Web应用、网站、移动应用等。它通常用于基于卡片的界面。

Glassmorphism可以创建漂浮在设定的背景空间中的玻璃状面板。这创造了一个透明的背景模糊，具有类似磨砂玻璃的效果。

在本指南中，我们将建立一个基本的登录表卡。然后我们将使用React.js为卡片组件实现玻璃形态效果。

前提条件

要完全理解本文，最好具备以下条件。

  • 使用React.js的基本知识和对使用Material UI的一些基本理解。
  • 在你的电脑上安装[Node.js]运行时。

使用Create React App(CRA)设置一个React应用程序

Create React App是一个由React.js团队提供的工具，用于在React中引导一个单页应用程序。这为你提供了一个基本的React App模板，你可以用它来扩展你的应用程序。

要使用Create React App创建一个基本的React应用，导航到你想要的项目目录，运行以下命令，使用Typescript初始化React.js应用。

npx create-react-app react-glassmorphism-app --template typescript

然后运行下面的命令来访问新创建的目录。

cd react-glassmorphism-app

为了测试这个，使用下面的NPM命令启动开发服务器。

npm run start

默认的React页面将被加载到你的默认浏览器上。这表明一切都很好，我们可以开始构建我们的React应用逻辑。

实现一个简单的表单

我们将从创建一个简单的表单开始，并为其添加一些CSS样式。导航到你的src/App.tsx 文件，添加以下修改。

  • 在顶部导入App.css 。
import './App.css';
  • 编辑渲染函数，添加一个带有name,email, 和password 字段的表单，如下所示。
<div className="form-container">
    <form className="form">
        <div className="form-group">
            <label htmlFor="name">Name</label>
            <input type="text" className="form-control" id="name" placeholder="Enter name" />
        </div>
        <div className="form-group">
            <label htmlFor="email">Email</label>
            <input type="email" className="form-control" id="email" placeholder="Enter email" />
        </div>
        <div className="form-group">
            <label htmlFor="password">Password</label>
            <input type="password" className="form-control" id="password" placeholder="Enter password" />
        </div>
    </form>
</div>

这个基本的表单给了我们一个视图，我们需要设置一个玻璃状的面板。

下一步是现在对上述表单进行样式设计。在src/App.css ，我们将添加以下样式。

  • 到form-container 类。
.form-container{
    /* Entire page width */
    width:100%;
    /* Entire page height */
    height:100vh;
    /* Responsive layout */
    display:flex;
    /* Display vertically at the center */
    justify-content: center;
    /* Display horizontally at the center */ 
    align-items: center;
    /* Background image from unsplash */
    background-image:url('https://images.unsplash.com/photo-1446329813274-7c9036bd9a1f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80');
    /* To cover the entire screen */
    background-size:cover;
    /* Image position */
    background-position:center;
    /* To not repeat the image beyond its scale */
    background-repeat:no-repeat;
}

玻璃化对多层样式的效果很好。在这种情况下，我们设置一个以图片为背景的表单容器。然后我们将在这个form-container ，在上面布置一个表单卡。

  • 到form 类。
.form{
    /** Sizeable width for the form **/
    width:400px;
    /** Sizeable height for the form **/
    height:400px;
    /** Black color with opacity **/
    background-color:rgba(0,0,0,0.5);
    /** Responsive layout **/
    display:flex;
    /** One element on top of the other **/
    flex-direction:column;
    /** Vertically at the center **/
    justify-content: center;
    /** Smooth corners **/
    border-radius:10px;
    /** Top, bottom, right, and left spacing between form and its content **/
    padding:20px; 
}
  • 到form-group 类。
.form-group{
    /* Bottom space between one form-group and the other*/
    margin-bottom:20px;
    /* Responsive layout */
    display: flex;
    /* One element on top of the other */
    flex-direction: column;
}
  • 到label 。
.form-group label{
    /** Medium font size **/
    font-size:16px;
    /** Visible color **/
    color:white;
    /** Bottom space between it and the input form **/
    margin-bottom:5px; 
}
  • 到表单输入（文本、电子邮件、密码）。
.form-group input[type="text"],input[type="email"],input[type="password"]{
    /** Size-able width of the input **/
    width:90%; 
    /** Size-able height of the input **/
    height:40px;
    /** Smooth corners on all edges **/
    border-radius:5px;
    /** No line surrounding the input **/
    border:none;
    /** Top, right, bottom, right spacing to where content starts **/
    padding:10px; 
    /** Medium font **/
    font-size:16px;
    /** Visible color **/
    color:white;
    /** Dark background with some opacity **/
    background-color:rgba(0,0,0,0.5); 
}

表单和表单属性现在将漂浮在背景图片之上。这将帮助我们创建一个多彩的透明层，可以很容易地调整设置一个模糊的背景。

确保你的开发服务器正在运行。如果没有，从终端用以下命令启动它。

npm run start

然后在你的浏览器上，打开http://localhost:300 。你的页面应该类似于下面的页面。

styled-home-page

在表单上实现glassmorphism效果

我们已经准备好了一个风格化的表单。现在让我们来添加flossy glassmorphism的效果。为了给我们的表单添加玻璃形态的效果，我们将使用以下样式。前往src/App.css ，并在form 类中添加以下样式。

  • 一个线性梯度作为背景图片。
/* To start from bottom to right on a less dark color to a darker color */
background-image:linear-gradient(to bottom right, rgba(255,255,255,0.2), rgba(255,255,255,0));

一个linear-gradient() ，决定了梯度的颜色。它给梯度一个起点和一个终点。在这种情况下，起点将从底部开始，终点在顶部。起点定义了梯度的第一种颜色。颜色从不太深的颜色开始，随着梯度向右移动而逐渐变深。

  • 一个背景滤镜。
/* A blur effect behind the form */
backdrop-filter: "blur(10px)";

backdrop-filter 设置了一个彩色的透明层，设置了一个模糊的背景。模糊的物体诱发了一个具有3D透视布局的层。这创造了一个具有透明背景的类似模糊的效果。

  • 一个盒子的阴影。
/** Thick box shadow with a greyish background **/
box-shadow: 10px 10px 10px rgba(30,30,30,0.5);

box-shadow 设置一个你选择的背景。你可以调整阴影的颜色以适应你的喜好。

  • 一个左侧和顶部的边框。
/** Glass panel effect to the left **/
border-left:solid 1px rgba(255,255,255,0.8);
/** Glass panel effect to the top **/
border-top:solid 1px rgba(255,255,255,0.8);

一旦你添加了上述内容，请到你的浏览器http://localhost:300 ，检查一切是否按预期工作，表格现在应该有玻璃形态的效果，如下图所示。

form-with-glassmorphism-effect

结论

Glassmorphism可以在你选择的任何应用程序中实现。本指南帮助你在React.js中实现了玻璃形态的效果。这是一个令人难以置信的艺术作品，可以添加到你的应用程序中。然而，当过度使用时，它可能会被误用。在不适当的布局中使用时，glassmorphism会产生可读性问题，特别是对视力障碍者。

当它被用来突出你的应用程序的特定内容时，它的光芒最耀眼，例如卡片，就像我们上面创建的那个。在这种情况下，glassmorphism效果不应该在不同的应用程序组件中过度使用。它的目的是突出你的页面的特定区域，关注特定的内容。

添加glassmorphism效果的关键方面是为你的组件指定backdrop-filter 。其他属性，如边框、盒影和背景，可以调整以适应你选择的设计。

avatar
文章
阅读
粉丝