Let’s look at the implementation first:

Original intention of the design:

1. Keep it simple

2. Focus

The whole page uses a gradient background color (the image is directly used here), important content is displayed in the center, terms and other content is displayed in small print in the lower right corner; The site is dominated by dawn blue tones.

The whole project uses a mature framework like React Ant Design, so there is almost no need to write a lot of extra styles.

The specific frame structure is not covered in this article. The code of the login interface 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.Password />
            </Form.Item>

            <Form.Item {. tailLayout} >
              <Button loading={loading} type="primary" htmlType="submit" style={{width: '100'}} % >landing</Button>
            </Form.Item>
        </Form>
      </Card.Grid>
    </Card>)}export function Login() {

  return (
    <>
      <BlankLayout 
        contents={<LoginForm />} / ></>)}Copy the code

Ground glass effect

What is frosted glass effect?

  • Background blurred frosted glass effect

  • Space objects float at multiple levels

  • Bright colors highlight blurred transparency

  • A translucent object has a fine boundary of light

And so on. The image below shows the effect better:

These salient features allow users to create depth and hierarchy in the interface. Because of its glassy appearance, it is known in the industry as the ground-glass effect.

Concrete implementation code, see the following demo:

.target {
  background: rgba(255.255.255.7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
Copy the code

Browser compatibility

According to Caniuse, more than 88.3% of browsers worldwide support this feature. If Firefox decides to enable this property by default, the ground-glass effect could become more widespread in the coming years as usage of older browsers such as IE 11 declines.

The latter

  • For more: github.com/reng99/blog…