Чистый дизайн - целевая страница с эффектом матового стекла

внешний интерфейс визуальный дизайн

Давайте сначала посмотрим на достигнутый эффект:

banner.png

Первоначальный замысел дизайна:

1. Простой и освежающий

2. Фокус

На всей странице используется градиентный цвет фона (здесь непосредственно используется картинка), важный контент отображается в центре, а термины и прочий контент выводятся небольшими словами в правом нижнем углу, на всем сайте преобладает рассвет синий.

Весь проект, потому что использованиеreact ant designЭто зрелый фреймворк, поэтому почти не нужно писать много лишних стилей.

Конкретная структура фрейма в этой статье не рассматривается. Код для интерфейса входа выглядит следующим образом:

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: '登陆失败',
      description: '请您完善表单！',
      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="账号"
              name="username"
              rules={[{ required: true, message: '请输入!' }]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="密码"
              name="password"
              rules={[{ required: true, message: '请输入!' }]}
            >
              <Input.Password />
            </Form.Item>

            <Form.Item {...tailLayout}>
              <Button loading={loading} type="primary" htmlType="submit" style={{width: '100%'}}>
                登陆
              </Button>
            </Form.Item>
        </Form>
      </Card.Grid>
    </Card>
  )
}

export function Login() {

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

эффект матового стекла

Что такое эффект матового стекла?

  • Эффект матового стекла с размытым фоном

  • Космические объекты, плавающие на нескольких уровнях

  • Яркие цвета подчеркивают размытую прозрачность

  • Полупрозрачные объекты имеют тонкую границу света

Ждать. Изображение ниже может лучше проиллюстрировать этот эффект:

demo.png

Эти замечательные функции позволяют пользователям лучше определять глубину и многоуровневость интерфейса. Из-за своего стеклянного вида он известен в промышленности как стекломорфизм.

Конкретный код реализации см. в следующей демонстрации:

.target {
  background: rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

Совместимость с браузером

support.png

Как показано на рисунке, согласноcaniuseданные сайта, более88.3%браузеры поддерживают эту функцию. еслиFirefoxБыло решено включить это свойство по умолчанию, и по мере сокращения использования устаревших браузеров (например, IE 11) эффект матового стекла будет более широко использоваться в ближайшие несколько лет.

позже

Категории