Get into the habit of writing together! This is the second day of my participation in the "Nuggets Daily New Plan · April Update Challenge", click to view the details of the event .
Hello, Glass Mimic
Glass mimicry is a new style on the market today and is getting more and more popular.
Neumorphism imitates the extruded plastic material (bumpy texture, highlighting the sense of layering), this new visual style pays more attention to the use of the z-axis of vertical space. Its most typical features are:
- Transparency (uses a frosted glass effect with a blurred background);
- Objects float in space, expressing a sense of hierarchy through the contextual relationship;
- Vibrant colors accentuate blurry transparency;
- Subtle processing of the edges of translucent objects, with a delicate border to express the glass texture.
These typical features of focusing on a sense of space mean that this style helps users establish hierarchy and depth in the interface. Users can see the hierarchical relationship between objects, which layer is above which layer, just like real glass in physical space.
Because it looks like glass, I believe the best name is: Glassmorphism
The History of Glass Mimicry
The visual representation of blurred backgrounds was first widely introduced in iOS 7 in 2013.
This was a very significant change, but since the quasi-physical state was rapidly switching to flat at the time, all the controversy revolved around the change of sans-serif fonts and flat icons, the blurring of the background was not affected, but people seems to like it.
Trends continue to intensify
Apple has greatly reduced the blurry glass effect in their mobile operating systems over time, but recently added a transparent blurry texture to MacOS Big Sur.
Look at this window to see how the part of the background photo that is obscured by the window appears as a vaguely transparent glassy texture. I placed the window in the center of the desktop, highlighting where the background blur is most noticeable.
Of course, if you don't like this style, you can turn off this effect completely in the system settings.
Cases on Dribbble
As with any other UI trend, once it catches on, there will be plenty of related work on Dribbble. Glass mimicry is only slowly starting now, and there are already some beautiful examples. Of course, these cases do look good, but they are not easy to apply to online products. On the actual mobile phone screen, it is difficult for them to cover the background like this, because the applications on the mobile phone are full screen.
Front-end production of glass mimicry
Set the correct background transparency
.card {
color: rgba(255, 255, 255, 0.8);
position: absolute;
right: 100px;
bottom: 100px;
z-index: 10;
font-family: sans-serif;
text-align: center;
width: 300px;
height: 500px;
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
border-left: 1px solid rgba(255, 255, 255, 0.4);
background: linear-gradient(
to top right,
rgba(90, 149, 207, 0.5),
rgba(58, 76, 99, 0.8)
);
box-shadow: 10px -10px 20px rgba(0, 0, 0, 0.2),
-10px 10px 20px rgba(255, 255, 255, 0.1);
backdrop-filter: blur(6px); /* 元素后面区域添加模糊效果 */
border-radius: 20px;
transform: rotate(-15deg);
}
复制代码The most important use is backdrop-filter: blur(6px);to add a blur to the area behind an element
Set a suitable background
body {
height: 100vh;
background: radial-gradient(
circle at 60% 90%,
rgba(46, 103, 161, 1),
transparent 60%
),
radial-gradient(
circle at 20px 20px,
rgba(46, 103, 161, 0.8),
transparent 25%
),
#182336;
}
复制代码detail adjustment
We can try adding a 1px border with transparency to the transparent layer.
reference
Glassmorphism in user interfaces
The above is the whole content of this article. I hope this article will be helpful to everyone. You can also refer to my previous articles or exchange your thoughts and experiences in the comment area. Welcome to explore the front end together.