backdrop-filter: blur();

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

a.pu

Trainee

Posts: 95

Location: Default city, Russia

Occupation: Vtour dev, design, UX and photography

Tuesday, February 18th 2020, 1:33pm

backdrop-filter: blur();

I wish I had a ... hm-hm a property for contaiers that automatically applies backdrop-filter: blur() for container area.

This css property is finally supported by majority of browsers.
Bluring looks super cool and super fresh in UI design :)

Go to the top of the page

klaus.krpano

Administrator

Posts: 12,655

Wednesday, February 19th 2020, 9:08am

Hi,

Quoted from "a.pu"

This css property is finally supported by majority of browsers.

Firefox doesn't support it by default yet (only when manually enabling the layout.css.backdrop-filter.enabled setting in about:config).

But it's possible to extend krpano to be able to it:

Source code

<style name="backdropblur"
       onloaded.addevent="register_backdropblur()"
       />

<action name="register_backdropblur" type="Javascript">
   var backdropblur = 0.0;
   caller.registerattribute("backdropblur", 0.0,
    function(v)
    {
      backdropblur = Number(v);
      if( isNaN(backdropblur) ) backdropblur = 0.0;
      var style = caller.sprite.style;
      style["backdrop-filter"] = style["-webkit-backdrop-filter"] = "blur(" + backdropblur + "px)";
    },
    function()
    {
      return backdropblur; 
    });
</action>

Usage example:

	Source code
1 2 3 4 5 6 7 8	<layer name="test" keep="true" style="backdropblur" type="container" align="center" width="50%" height="40%" bgcolor="0x123456" bgalpha="0.5" backdropblur="3" />