Author: | cryptodescriptor |
---|---|
Views Total: | 405 views |
Official Page: | Go to website |
Last Update: | June 7, 2021 |
License: | MIT |
Preview:

Description:
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
<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:
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