Home > Developer > Web Develop
Sneak in and watch a lot of cool effects lately. jquery is now based on more plug-ins, but many plug-ins are not too good compatibility, so the original is the king. In daily life, frosted glass is not common, it is a long time of things. Connaught, here is the frosted glass:
Haha, do not gossip, next to the point, first look at the ultimate effect:
Well, well, let's start with our steps:
The first step: the basic construction of the page:
I set a large background image on the body, and then the middle part is a div,html code as follows:
<body><div > iphone 7 dramatically improves the most important aspects of the iphone experience. It introduces advanced new camera systems. The best performance and battery life ever on an iPhone. Immersive stereo speakers. The brightest, most colorful iPhone display. Splash and water resistance.1 and it looks every bit as powerful as it is. This is the IPhone 7.</div></body>
Text is more to open div to make its effect more obvious
The code for the CSS is as follows:
body { MIN-HEIGHT:100VH; Box-sizing:border-box; margin:0; Padding-top:calc (50vh-6em); font:150%/1.6 serif; Background:url ("http://www.jackzxl.net/wp-content/MyFile/2016/09/iphone.jpg") fixed 0 center; background-size:cover; } div { margin:0 auto; Padding:1em; Max-width:30em; Border-radius:0.3em; box-shadow:0 0 0 1px hsla (0,0%,100%,.3) inset, 0.5em 1em rgba (0, 0, 0, 0.6); text-shadow:0 1px 1px hsla (0,0%,100%,.3); Background:hsla (0,0%,100%,.3); }Look at the above style code, body inside, VH for the viewport size, 100 for 100%,background set for the fixed position, spread the entire element, in the Div, the center set the background color and then set its box style; then it looks like this:
Bright's little transparent glass just came out, so let's start with our frosted glass processing.
Step two: Background blur of the frosted glass setting
In CSS, there is the same set of fuzziness, for
Filter:blur (20px);
The value of the following is the size of the blur, the larger the more fuzzy Ah, but currently only support PX, not support the percentage;
We directly to the Div add this style is not possible, because this will become blurred, this time we can use pseudo-elements, namely:: Before;
Before we use pseudo-elements, we need to add a relative positioning to the div, because the pseudo-elements will overflow the entire div box after the use of ambiguity, in order to beautiful beautiful atmosphere on the grade, we need to add overflow:hidden div;
Overflow:hidden; position:relative;
Pseudo-Elements of div:
div::before{ content: "; Position:absolute; top:0; right:0; bottom:0; left:0; Z-index:-1; Filter:blur (20px); margin: -20px; Background:url ("http://www.jackzxl.net/wp-content/MyFile/2016/09/iphone.jpg") fixed 0 center; Background-size:cover; }In the above CSS code, we can see that the setting of the fuzziness, and the div is overlapping, the background is the same as the body, the final effect is as follows:
The effect of making frosted glass with CSS3
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
