CSS Tips Collection--frosted glass effect

First on the demo and source code

In fact, the fuzzy effect of frosted glass is relatively simple, but it uses the Blur property in the CSS filter. But to make a good frosted glass effect, you need to pay attention to a lot of details.

For example, we need to change the middle of the text area of the page into a frosted glass effect, the first thought is to set a transparency, and add a blur filter:

. Content {    Background-color:rgba (0,0,0,0.3);    -webkit-filter:blur (2px);    -moz-filter:blur (2px);    -ms-filter:blur (2px);    -o-filter:blur (2px);    Filter:blur (2px);    }

But the resulting effect is the following:

From this failed example we get two conclusions:

1. Direct use of the element of the Blur will blur its contents, in order to ensure that the text will not blur the need for more than one layer to apply the blur effect alone.

2. The blur effect does not apply to the elements behind it, so you need to use the content area with the same background as the background and blur it.

Solve the first problem first:

A multiple-level approach does not pass through the addition of elements, but through pseudo-elements.

. content {    z-index:1;}. Content:after {    content: ';    Position:absolute;    top:0;    left:0;    right:0;    bottom:0;    Background-color:rgba (255,255,255,0.8);    Z-index:-1;}

There are two points to note that because pseudo-elements cannot inherit the size of the host element through width:100% and height:100%, the size of the content is inherited in the above way, so that the pseudo-element is set here under Content z-index:- 1, in order not to hide behind the background map, here to set the content z-index:1.

Effect:

Next, set the same background map for Content::after.

For example, even if we set the same background-postion and background-size, the middle part of the diagram and the big background is still not stitched successfully.

The solution to this problem is simple, just add the Background-attachment:fixed property and then obfuscate it.

. content {    Background-position:center top;    Background-size:cover;}. Content::after {    background-image:url (xxx.jpg);    Background-position:center top;    Background-size:cover;    background-attachment:fixed;    -webkit-filter:blur (20px);    -moz-filter:blur (20px);    -ms-filter:blur (20px);    -o-filter:blur (20px);    Filter:blur (20px);}

We can see that basically we want the effect, in the ointment is the edge of the element blurred effect weakened. To solve this problem, we will expand the scope of the pseudo-elements, and set the Overflow:hidden property for the effect not exceeding the content range.

. content {Overflow:hidden;}. Content::after {margin: -30px;}

This is the perfect glass finish, no matter how you change the size of the browser window, the content of the background map can be very good and background stitching, thanks to the Background-attachment property.

CSS Tips Collection--frosted glass effect