CSS and frosted glass masks

CSS and frosted glass masks
Previous

This article will introduce in detail the effects of CSS masks and frosted glass.

 

Normal mask

Generally, an additional tag is used to process the full screen mask.

<style>
.overlay{  position:fixed;  top: 0;right: 0;left: 0;bottom: 0;  background:rgba(0,0,0,0.8);}.lightbox{  position:absolute;  top: 0;right: 0;left: 0;bottom: 0;  margin:auto;  z-index:1;  width: 100px;  height: 100px;  background-color: white;}</style><div class="overlay"></div><div class="lightbox"></div>

The effect is as follows:

 

Shadow Mask

For simple application scenarios and product prototypes, we can use box-shadow to adjust the background.

box-shadow: 0 0 0 999px rgba(0,0,0,0.8);

One obvious problem with this preliminary solution is that it cannot work normally at a large screen resolution (such as> 2000px. Either increase the number to alleviate this problem, or replace the unit of the view to fix it once and for all. Only in this way can we ensure that the "Mask Layer" can always overwrite (to exceed) the view.

box-shadow: 0 0 0 50vmax rgba(0,0,0,0.8);

This technique is very simple and easy to use, but it has two very serious problems, thus restricting its use scenarios.

1. because the size of the mask layer is related to the screen, rather than the page, the edge of the mask layer is exposed when the page is rolled, unless the position: fixed style is added to it, or the page is not as long as it needs to be rolled

2. This effect cannot prevent the user's mouse from interacting with other parts of the page.

<style>.lightbox{  position:absolute;  top: 0;right: 0;left: 0;bottom: 0;  margin:auto;  z-index:1;  width: 100px;  height: 100px;  background-color: white;  box-shadow: 0 0 0 50vmax rgba(0,0,0,0.8);}</style><div class="lightbox"></div>

 

Fuzzy mask

Blur everything except the key element to match (or replace) the shadow effect. This effect is more realistic because it creates a "depth of field effect. When the line of sight is focused on a closer object, the background in the distance is virtualized.

filter:blur(5px);

The following is an example. When the mouse is removed from the pop-up box, the Blur disappears.

 

Glass Effect

Next we will gradually implement the glass Effect

 

Translucent color

One of the first use cases of translucent colors is as the background. Stacked on a photo or other fancy back layer to reduce the contrast and ensure text readability

Below is an instance

<Style>. outer {position: relative; height: 200px; width: 200px; background: hsl (20,40%, 90%); background-image: linear-gradient (90deg, # fb3 11px, transparent 0), linear-gradient (90deg, # ab4 23px, transparent 0), linear-gradient (90deg, #655 41px, transparent 0); background-size: 41px 100%, 61px 100%, 83px 100% ;}. inner {position: absolute; top: 0; right: 0; left: 0; bottom: 0; font: bold 20px/1.5 'body'; height: 160px; width: 180px; margin: auto; background: hsla (0, 0%, 100% ,. 3) ;}</style> <div class = "outer"> <div class = "inner"> it is easy to master the front-end, more javascript </div>

[Increase Opacity]

Set the opacity to 30%, making it difficult to see the text clearly. Of course, you can increase the text readability by raising the opacity, but the effect is not so vivid.

background:hsla(0,0%,100%,.6);

 

Fuzzy Processing

In traditional graphic design, the image area covered by the text layer is usually blurred. The Blurred background looks less fancy, so the text above it is relatively easy to read. In the past, the performance consumption of Fuzzy Operations was so huge that this technique was rarely used in web design. However, with the evolution of GPU and the increasing popularity of hardware acceleration, this technique has become increasingly popular.

[Fuzzy parent element]

If the parent element is set to fuzzy, the text is also blurred.

<Style>. outer {position: relative; height: 200px; width: 200px; background: hsl (20,40%, 90%); background-image: linear-gradient (90deg, # fb3 11px, transparent 0), linear-gradient (90deg, # ab4 23px, transparent 0), linear-gradient (90deg, #655 41px, transparent 0); background-size: 41px 100%, 61px 100%, 83px 100%; filter: blur (5px );}. inner {position: absolute; top: 0; right: 0; left: 0; bottom: 0; font: 20px/1.5 'body'; height: 160px; width: 180px; margin: auto; background: hsla (0, 0%, 100% ,. 6) ;}</style> <div class = "outer"> <div class = "inner"> it is easy to master the front-end, more javascript </div>

[Pseudo-element fuzzy]

Therefore, a pseudo element is processed, and then positioned to the lower layer of the element.

<Style>. outer {position: relative; height: 200px; width: 200px; z-index: 1; background: hsl (20,40%, 90%); background-image: linear-gradient (90deg, # fb3 11px, transparent 0), linear-gradient (90deg, # ab4 23px, transparent 0), linear-gradient (90deg, #655 41px, transparent 0); background-size: 41px 100%, 61px 100%, 83px 100% ;}. inner: before {content: ''; position: absolute; top: 0; right: 0; left: 0; bottom: 0; filter: blur (5px); background: rgba (0.5, 0, 0,); z-index:-1 ;}. inner {position: absolute; top: 0; right: 0; left: 0; bottom: 0; font: 20px/1.5 'body'; height: 160px; width: 180px; margin: auto; background: hsla (0, 0%, 100% ,. 3) ;}</style> <div class = "outer"> <div class = "inner"> it is easy to master the front-end, more javascript </div>

 

Background Replication

Next, copy the background of the parent element to replace the translucent red color. What if the background under the frosted glass exactly matches the pattern of the parent background? You can use fixed to set the background of the parent element and the pseudo element to the same, and set the background relative to the viewport to achieve the target.

<Style>. outer {position: relative; height: 200px; width: 200px; z-index: 1; background: hsl (90%,) fixed; background-image: linear-gradient (90deg, # fb3 11px, transparent 0), linear-gradient (90deg, # ab4 23px, transparent 0), linear-gradient (90deg, #655 41px, transparent 0); background-size: 41px 100%, 61px 100%, 83px 100% ;}. inner: before {content: ''; position: absolute; top: 0; right: 0; left: 0; bottom: 0; filter: blur (5px); background: hsl (20, 40%, 90%) fixed; background-image: linear-gradient (90deg, # fb3 11px, transparent 0), linear-gradient (90deg, # ab4 23px, transparent 0 ), linear-gradient (90deg, #655 41px, transparent 0); background-size: 41px 100%, 61px 100%, 83px 100%; z-index:-1 ;}. inner {position: absolute; top: 0; right: 0; left: 0; bottom: 0; font: 20px/1.5 'body'; height: 160px; width: 180px; margin: auto; background: hsla (0, 0%, 100% ,. 3) ;}</style> <div class = "outer"> <div class = "inner"> it is easy to master the front-end, more javascript </div>

The effect is as follows: