4 ms·

Frosted Glass/Panel Effect, Cross Browser Solution, Vanilla JavaScript and CSS

48 points by frosted-panel 7y ago

frosted-panel 7y ago
Frosted Panel is a cross-browser compatible library written in pure Javascript to achieve a responsive "Frosted Glass" effect.
- jsf01 7y ago
  This is a cool effect. One thing about your marketing though... “Cross-browser” should include mobile browsers. At least on iOS Safari it’s not working. If you haven’t handled testing the major browsers yet, you should refrain from using that as a key selling point.
  - colejohnson66 7y ago
    What version of iOS are you using? It works for me on iOS 12.3.1
    - deleted 7y ago
      [deleted]
    - frosted-panel 7y ago
      Safari should now be working in all versions that support flexbox and svg images with filters! Please read the new reply I made to this thread for more information.
  - owens99 7y ago
    Same for me. Also doesn’t work on Firefox Focus on mobile.
    - frosted-panel 7y ago
      Confirmed to be working in Firefox Focus. The panel was located in a bad place for demonstrating the blur effect on smaller screens because there was just blue sky with nothing else going on, therefore I have changed the height dimension to 80% so it covers the snowboard and better demonstrates the effect.
continuational 7y ago
Nice - though the effect doesn't seem to work on iOS Safari (iPhone XS).
- frosted-panel 7y ago
  Updated, please try the demo now: https://cryptodescriptor.github.io/frosted-panel https://cryptodescriptor.github.io/frosted-panel
andrethegiant 7y ago
Safari can do this with one CSS rule: https://webkit.org/blog/3632/introducing-backdrop-filters/ https://webkit.org/blog/3632/introducing-backdrop-filters/
- progers7 7y ago
  This was recently implemented in Chromium-based browsers (M76) too. https://web.dev/backdrop-filter https://web.dev/backdrop-filter has some more information about the CSS, and https://www.chromestatus.com/feature/5679432723333120 https://www.chromestatus.com/feature/5679432723333120 has more information about the implementation.
  - heycam 7y ago
    And this is landing very soon in Firefox, behind a pref. https://twitter.com/svoisen/status/1159322370122768384 https://twitter.com/svoisen/status/1159322370122768384
    - frosted-panel 7y ago
      As of yet, the browser support for this is very shoddy. Not to mention outdated/legacy browsers like IE.
anewguy9000 7y ago
there are a few of these libraries but as far as i can tell they are just hacks that only work with a background image, and are thus not a drop in replacement for backdrop-filter. a replacement for blur maybe.
- frosted-panel 7y ago
  All of the libraries I have seen seem to just be jquery libraries that apply a blur CSS effect to DOM elements. This is NOT supported very well accross different browsers. Frosted Panel is a cross browser solution which allows you to have a full scale, centered, background-image with a responsive, blurry panel overlapping it, of which you can put whatever content you would like inside. It works by taking advantage of SVG filters, which are supported in most (if not all) browsers, while panning and zooming a duplicate SVG image of the original background-image in order to mimic the actual background-image of the body tag.
  - anewguy9000 7y ago
    nice, thanks for the details
Theodores 7y ago
Why support Internet Explorer? Also the extra element attributes are not 'data-' attributes and will not validate as HTML5. Webkit/Blink/Firefox on mobile/desktop is all there in the referred to article. Edge is soon to be Webkit so for me the target browser list is not as extensive as for some. IE is depreciated and was never HTML5. Can we just have this smaller list of browsers, CSS only and HTML5 valid with no warnings? Apart from that, great work!
- frosted-panel 7y ago
  I should probably follow the spec, but I think having "data-" prepended to every custom attribute on the frosted-panel div will take up unnecessary space. Why support IE you ask? Why not? Some clients force their devs to support legacy browsers such as Internet Explorer.
the8472 7y ago
Wouldn't this also be possible without javascript by nesting HTML inside SVG?
- frosted-panel 7y ago
  Only if you wanted the whole page blurred, in this instance we want only a small part of the background image blurred, so we have to do all sorts of fancy panning and zooming to the SVG image so we can mimic the movement of the actual background-image.
toastal 7y ago
That's one of the worst images you could choose to demo this. You can barely see anything blurred because the cloudless sky is just a gradient.
- frosted-panel 7y ago
  For the most part it is fine, apart from the "auto auto" breakpoint. edit: Demo is changed slightly on smaller screens to better demonstrate the blur.
frosted-panel 7y ago
As of BETA_v1.6 is should be working in most Safari versions, excluding the very old one's that don't support SVG or flexbox! I do not know about Firefox focus, but I have changed a few things that I think could have made it work in that browser too. Things changed: - Reverted back to using xlink:href rather than href attribute within the image element (the newer href attr was not supported in Safari) - Added two new attributes inside the filter element: 1) filterRes (needed for Safari to display the blur on page load without being prompted by a resize) 2) color-interpolation-filters (some older versions of Safari were using a different variation of this filter and the blur effect would't look right) - Autoprefixed main.css for older browser compatibility

48 points by frosted-panel 7y ago

Frosted Panel is a cross-browser compatible library written in pure Javascript to achieve a responsive "Frosted Glass" effect.

jsf01 7y ago
This is a cool effect. One thing about your marketing though... “Cross-browser” should include mobile browsers. At least on iOS Safari it’s not working. If you haven’t handled testing the major browsers yet, you should refrain from using that as a key selling point.
- colejohnson66 7y ago
  What version of iOS are you using? It works for me on iOS 12.3.1
  - deleted 7y ago
    [deleted]
  - frosted-panel 7y ago
    Safari should now be working in all versions that support flexbox and svg images with filters! Please read the new reply I made to this thread for more information.
- owens99 7y ago
  Same for me. Also doesn’t work on Firefox Focus on mobile.
  - frosted-panel 7y ago
    Confirmed to be working in Firefox Focus. The panel was located in a bad place for demonstrating the blur effect on smaller screens because there was just blue sky with nothing else going on, therefore I have changed the height dimension to 80% so it covers the snowboard and better demonstrates the effect.

continuational 7y ago

Nice - though the effect doesn't seem to work on iOS Safari (iPhone XS).

frosted-panel 7y ago
Updated, please try the demo now: https://cryptodescriptor.github.io/frosted-panel https://cryptodescriptor.github.io/frosted-panel

andrethegiant 7y ago

Safari can do this with one CSS rule: https://webkit.org/blog/3632/introducing-backdrop-filters/ https://webkit.org/blog/3632/introducing-backdrop-filters/

progers7 7y ago
This was recently implemented in Chromium-based browsers (M76) too. https://web.dev/backdrop-filter https://web.dev/backdrop-filter has some more information about the CSS, and https://www.chromestatus.com/feature/5679432723333120 https://www.chromestatus.com/feature/5679432723333120 has more information about the implementation.
- heycam 7y ago
  And this is landing very soon in Firefox, behind a pref. https://twitter.com/svoisen/status/1159322370122768384 https://twitter.com/svoisen/status/1159322370122768384
  - frosted-panel 7y ago
    As of yet, the browser support for this is very shoddy. Not to mention outdated/legacy browsers like IE.

anewguy9000 7y ago

there are a few of these libraries but as far as i can tell they are just hacks that only work with a background image, and are thus not a drop in replacement for backdrop-filter. a replacement for blur maybe.

frosted-panel 7y ago
All of the libraries I have seen seem to just be jquery libraries that apply a blur CSS effect to DOM elements. This is NOT supported very well accross different browsers. Frosted Panel is a cross browser solution which allows you to have a full scale, centered, background-image with a responsive, blurry panel overlapping it, of which you can put whatever content you would like inside. It works by taking advantage of SVG filters, which are supported in most (if not all) browsers, while panning and zooming a duplicate SVG image of the original background-image in order to mimic the actual background-image of the body tag.
- anewguy9000 7y ago
  nice, thanks for the details

Theodores 7y ago

Why support Internet Explorer? Also the extra element attributes are not 'data-' attributes and will not validate as HTML5. Webkit/Blink/Firefox on mobile/desktop is all there in the referred to article. Edge is soon to be Webkit so for me the target browser list is not as extensive as for some. IE is depreciated and was never HTML5. Can we just have this smaller list of browsers, CSS only and HTML5 valid with no warnings? Apart from that, great work!

frosted-panel 7y ago
I should probably follow the spec, but I think having "data-" prepended to every custom attribute on the frosted-panel div will take up unnecessary space. Why support IE you ask? Why not? Some clients force their devs to support legacy browsers such as Internet Explorer.

the8472 7y ago

Wouldn't this also be possible without javascript by nesting HTML inside SVG?

frosted-panel 7y ago
Only if you wanted the whole page blurred, in this instance we want only a small part of the background image blurred, so we have to do all sorts of fancy panning and zooming to the SVG image so we can mimic the movement of the actual background-image.

toastal 7y ago

That's one of the worst images you could choose to demo this. You can barely see anything blurred because the cloudless sky is just a gradient.

frosted-panel 7y ago
For the most part it is fine, apart from the "auto auto" breakpoint. edit: Demo is changed slightly on smaller screens to better demonstrate the blur.

frosted-panel 7y ago

As of BETA_v1.6 is should be working in most Safari versions, excluding the very old one's that don't support SVG or flexbox! I do not know about Firefox focus, but I have changed a few things that I think could have made it work in that browser too. Things changed: - Reverted back to using xlink:href rather than href attribute within the image element (the newer href attr was not supported in Safari) - Added two new attributes inside the filter element: 1) filterRes (needed for Safari to display the blur on page load without being prompted by a resize) 2) color-interpolation-filters (some older versions of Safari were using a different variation of this filter and the blur effect would't look right) - Autoprefixed main.css for older browser compatibility