By rssfeeds-admin 
Frosted Panel is a JavaScript/CSS solution that applies a responsive, configurable, cross-browser frosted glass effect to any content.
How to use it:
Load the main JavaScript in the document.
<script src="./app.js"></script>
Create the HTML and config the frosted glasses effect using the following attributes:
- panel-dimensions: dimension(width, height)
- breakpoint-type: min-width or max-width
- breakpoints: breakpoints
- stdDeviation: blur Amount
- content-margin: add a margin to the panel content
class="brush:xml"><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="bg.jpg" x="0" y="0" width="2880" height="1620" filter="url(#blurMe)" /> </svg> <div class="content" content-margin="5px"> ALL PANEL CONTENT GOES HERE </div> </div>
Set the panel margin using the space-top-bot attribute:
<body space-top-bot="70px">
Changelog:
09/29/2025
- Bugfixes
06/07/2021
- More refactor
02/27/2021
- Fix IE bug.
10/17/2020
- JS updated
08/01/2020
- Cleanup load_config()
05/02/2020
- CSS updated
01/11/2020
- CSS updated
01/04/2020
- If breakpoint-type attribute is empty or null we should use ‘min-width’ as the default value for brType variable.
12/21/2019
- Update loading.css
12/14/2019
- CSS updated
The post Responsive Cross-browser Frosted Glass Effect – Frosted Panel appeared first on CSS Script.
Discover more from RSS Feeds Cloud
Subscribe to get the latest posts sent to your email.