Some time ago in a project to use the “Gaussian blur” filter effect, the process of trying a variety of schemes, here summarizes a way, I hope to help the need of tao friends ~

UI sister must let me in the Android system to support the implementation of custom Webview we commonly known as the “ground glass” effect, said it must be achieved, do not achieve this effect will lose the soul of the design, but I have to explain, she will, will, to!

No way, research at a draught!

Gorgeous backdrop backdrop backdrop backdrop backdrop backdrop backdrop backdrop backdrop backdrop backdrop backdrop backdrop backdrop backdrop backdrop backdrop backdrop backdrop.

Frosted glass is a common feature on iOS, such as notifications and assistant cards, so check out apple’s official website!

Sure enough, the navigation bar uses the frosted glass effect of “family design”

Open the console and copy the operation:

As a result, it can be easily used as backdrop backdrop filter CSS3.

The main card CSS code is as follows:

.card-backdrop-filter {
    position: relative;
    z-index: 1;
    width: 600px;
    height: 300px;
    border-radius: 6px;
    padding: 10px;
    color: #fff;
    font-size: 16px;
    overflow: hidden;
    margin: 100px auto;
    backdrop-filter: blur(10px);
    background-color: rgba(255.255.255.0.72);
  }
Copy the code

In Chrome it looks ok:

Then go to some old Version of Android mobile terminal to check, the result is not good!!

Gorgeous backdrop backdrop — caiuse

Emmm ~, and consider our own magic change Webview kernel situation…

We need to find another way. Filter can be understood as a filter, and backdrop filter means setting a filter effect for the background. CSS currently supports the following filter effects

Blur (): Blur (): Blur (): Brightness (): contrast(): drop-shadow(): shadow Grayscale (): hue-rotate(): invert(): Opacity saturate sepia is brownCopy the code

If compatibility is not taken into account, the Backdrop filter will display the background color on unsupported browsers, thus losing the desired effect (” experience degradation “).

If UI sister and PM brother can agree, it is also very recommended to use, after all, who does not want to work early to study?

Two, filter try?

Another CSS property that sets the ambiguity is filter, so another idea is to use filter to simulate the effect of the sinus-filter property.

Filter has better compatibility: filter — caiuse

Let’s take a look at the difference between filter and sinda-filter:

/* Specifies the name of the bridge. /* Specifies the name of the bridge. /* Specifies the name of the bridge
.card-filter {
  position: relative;
  z-index: 1;
  width: 600px;
  height: 300px;
  border-radius: 6px;
  padding: 10px;
  color: #fff;
  font-size: 16px;
  overflow: hidden; /* Hide content outside the element area */
  margin: 100px auto;
  filter: blur(10px);
  background-color: rgba(255.255.255.0.72);
}
Copy the code

This effect is very different from the actual design requirements, so it needs to be changed!

Third, the combination of filter

Because the filter sets the ambiguity of the entire element, rather than acting as a background container for the element, a card-sized placeholder element is required to set the ambiguity separately and act as the background element.

3.1 ::before + Fixed double background diagram

Use the false element ::before. For compatibility purposes, it is recommended to use the div block-level element as placeholder

.card-filter::before {
  content: ' ';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1; /* To the bottom of the current card-filter element */
  filter: blur(10px); /* Ambiguity */
  background: url(http://p2.qhimg.com/bdr/__85/t01781bd4b1218329e1.jpg) no-repeat center fixed;
  background-size: cover;
}
Copy the code

Note here that the card adopts the same attribute as the background image of the entire container. The background image is fixed by fixed mode, so that when the element is rolled in any direction, the background image will not move, so that the background effect is consistent

3.2 Use the negative value of margin attribute to enlarge the container

The blur effect is still different as shown in the figure below, because filter is a filter aggregated inward from the outer frame of the container, resulting in a white circle on the outer frame of the filter

You just need to enlarge the container size of the ::before element, where you can directly enlarge the container with the negative value of the margin attribute

.card-filter::before {
  ...
+ margin: -20px;
}
Copy the code

At this time the effect is a bit “that meaning”, it seems that fast can cross

3.3 :: After Fills the vanishing background color

Background-color: rgba(255, 255, 255, 0.72); It didn’t work!

Because ::before pseudo-class acts on. Card-filter element and is its child, and because background attribute of ::before sets the background image and covers the background color of parent element. Card-filter.

Knowing why, we can add a child element (pseudo-class) to the.card-filter element to set the background color!

Use the ::after pseudo-class instead of modifying the DOM structure.

.card-filter::after {
  content: ' ';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background-color: rgba(255.255.255.0.72);
}
Copy the code

In this case, the effect is the same as that of the bath-filter:

You can also see the effect in the Webview kernel.

Four,

Generally speaking, if we can convince the product manager and UI sister, we can use baal-filter, if not, we can use filter combination simulation.

Also, there is a performance problem with the enable-filter attribute, which means that it is 2022, please upgrade your device. Compatibility makes front-end engineers bald!

If the “ground glass” and the background does not have the relative movement of the text, directly let the UI sister cut a picture, directly solve all compatibility & performance problems!

In the research process, the author also tried the feGaussianBlur tag of SVG. The effect is the same as filter, which is slightly more complicated, but it is also a feasible scheme. You can try it by yourself

Welcome to follow the author’s wechat public account: DYBOY, communicate and play together!