Responsive Cross-browser Frosted Glass Effect – Frosted Panel

Category: Javascript , Recommended | June 7, 2021
0 Comment
Demo Download
Author:cryptodescriptor
Views Total:405 views
Official Page:Go to website
Last Update:June 7, 2021
License:MIT

Preview:

Responsive Cross-browser Frosted Glass Effect – Frosted Panel

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

See Also:

You Might Be Interested In:

Leave a Reply