What is frosted glass effect?

  • Frosted glass effect with blurred background
  • Space objects float on multiple levels
  • Bright colours accentuate blurred transparency
  • Translucent objects have a fine boundary of light

The whole page uses a gradient background color (directly using pictures here), important content is displayed in the center, and articles and other content are displayed in small words at the lower right corner; The site is dominated by dawn blue.

The react Ant Design framework was used for the whole project, so there was little need to write extra styles.

The specific framework structure is not covered in this article. The login interface code is as follows:

import { useState } from "react"; import * as React from "react"; import BlankLayout from '.. /.. /layout/BlankLayout/index'; import Logo from '.. /.. /components/Logo/index'; import { Form, Input, Button, Card, notification } from 'antd'; import { FrownOutlined } from '@ant-design/icons'; const layout = { labelCol: { span: 5 }, wrapperCol: { span: 18 }, }; const tailLayout = { wrapperCol: { offset: 5, span: 18 }, }; const LoginForm = () => { const [loading, setLoading] = useState(false); const onFinish = (values: any) => { setLoading(true); setTimeout(() => { setLoading(false) window.location.href = '/' }, 1000) console.log(values)} const onFinishFailed = () => {notification.open({message: 'login failed ', description:' Please complete the form! ', icon: <FrownOutlined style={{ color: '#ff4d4f' }} /> }); } return ( <Card style={{ background: 'rgba(255, 255, 255, .3)', backdropFilter: 'blur(10px)' }}> <Card.Grid style={{width: '100%'}}> <Logo /> <Form {... layout} onFinish={onFinish} onFinishFailed={onFinishFailed} style={{ width: '480px', padding: '40px 0 0 20px'}} > < form. Item label=" account "name="username" rules={[{required: true, message: 'please enter!'}]} > <Input /> </ form. Item> < form. Item label=" password" name="password" rules={[{required: true, message: 'please enter!}]} > < Input. "/ > < / Form Item > < Form. Item {... tailLayout}> <Button loading={loading} type="primary" htmlType="submit" style={{width: </Button> </ form.item > </Form> </ card.grid > </Card>)} export function Login() {return (<> <BlankLayout) contents={<LoginForm />} /> </> ) }Copy the code