The frosted glass effect is actually the blurring of the picture. We often have the background image blurring effect when we pull up the application in the mobile app. This is the frosted glass effect. This time we are going to share a background image frosted glass blur effect based on HTML5 and CSS3. We load a clear image on the page, and then generate a frosted glass blur effect within the specified image range, and make this frosted glass effect by adding border shadows More 3D stereo effect.
Advertisement
<div class="frosted-panel" panel-dimensions="80% 60%" breakpoint-type="min-width" breakpoints="600px 80% 80%, 1200px 60% 500px"> <svg> <filter id="blurMe" filterRes="1200" color-interpolation-filters="sRGB"> <feGaussianBlur in="SourceGraphic" stdDeviation="7" /> </filter> <image xlink:href="./img/bg1.jpg" x="0" y="0" width="2880" height="1620" filter="url(#blurMe)" /> </svg> <div class="content" content-margin="5px"> <div class="flex-container"> <span class="wh">80% 60%</span> <span class="wh">80% 80%</span> <span class="wh">Here is the text content</span> </div> </div> </div>
html { height: 100%; /* Need Flex to force Panel overflow */ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } body { padding: 0; margin: 0; height: 100%; background-position: center; background-repeat: no-repeat; background-attachment: local; background-size: cover; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; color:#fff; }
config : { 'breakpoints' : [] }, error : function(s) { console.log(s) }, valid_num : function(str) { return (!isNaN(str) && str != "" && str != null); }, validate_wh : function(val) { var val = val.toLowerCase(); var num; if (val === 'auto') { return true; } else if (!val.endsWith('px') && !val.endsWith('%')) { return false; } else if (val.endsWith('px')) { num = this.valid_num(val.replace('px', '')); } else if (val.endsWith('%')) { num = this.valid_num(val.replace('%', '')); } return (!num) ? false : true; }, ignoring_breakpoint_err : function(breakpoint) { this.error('Ignoring breakpoint: "' + breakpoint + '"'); }, invalid_breakpoint_err : function(breakpoint, val, i) { var joined = breakpoint.join(' '); this.error('Invalid value "' + val + '" at breakpoint: "' + joined + '", index: ' + i); this.ignoring_breakpoint_err(joined); },
Advertisement