What's glass morbid? Why is it so popular?
Glass formulation is a design style based on “semi-transparent” and “background fissure”. It started to rise around 2020, and along with MacOS Big Sur from Apple and Fluent Design from Microsoft The system is a big one. The glass is not just beautiful, it can be complex UIs with permeable visual effects. The interface brings a sense of breathing and a sense of hierarchy.
1. Addressing the issue of a single sense of interface level
Traditional flattening design (Flat) Design) often relies on shadows when dealing with multiple layers of overlapping elements. And the glass formulation provides a new idea: through a semi-transparent “boil glass” effect, users can see the colour and contours of the bottom. This not only establishes a clear hierarchy, but also gives the interface a physical depth.
Core parameters:
The key to achieving this effect is CSS Properties
backdrop-filter: blur()
。 It does not blur the element itself, but the area covered by the element background.
How can “cheap perception” be avoided?
Glass formulations can easily appear to be messy or cheap if not properly used. To build a high-end sense of quality, the following details need to be noted:
- Fine border: Adds a very fine (1px) light colour border to the element with less transparency. This simulates the refraction of the edge of the glass, which makes the contours of the elements clearer.
- Soft contrast: Ensures that the text colour is sufficiently contrasted to the translucent background. Usually, plain white text is used in the dark background, with a slight text shadow.
- Dynamic background: The glass is most beautiful when the bottom background is rich in colour or dynamic. In a pure colour context, glass effects are often not sufficiently prominent.
3. Browser compatibility considerations
Although modern browsers are fully supported
backdrop-filter
However, it may not be effective in some very old versions.
Best practices:
It is always a colorful background as an alternative. For example:
background: rgba(255, 255, 255, 0.2);
Even if the futility fails, the element remains a semi-transparent container, which ensures basic availability.
4. Application scenario recommendations
- Sidebars and Navigator Bars: Add a sense of penetration without blocking the subject.
- Blast windows and model frames: Allowing users to remain aware of the background while operating the bullet window and reducing their sense of loss.
- Memoular components: Loading data charts in colourful settings to enhance visual accuracy.