You are not logged in.

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

  • "a.pu" started this thread

Posts: 94

Location: Default city, Russia

Occupation: Vtour dev, design, UX and photography

  • Send private message

1

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

2

Wednesday, February 19th 2020, 9:08am

Hi,

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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"
       />


Best regards,
Klaus

panoyun

Beginner

Posts: 19

Location: Somalia

  • Send private message

3

Wednesday, February 19th 2020, 9:34am

Great
Not long ago I was still thinking about how to use fuzzy containers for UI interface
*tongue* *tongue* *tongue*

a.pu

Trainee

  • "a.pu" started this thread

Posts: 94

Location: Default city, Russia

Occupation: Vtour dev, design, UX and photography

  • Send private message

4

Wednesday, February 19th 2020, 10:31am



Thanks, this is super-cool!

Can you please comment on this topic? Separate layer structure from layer properties

panoyun

Beginner

Posts: 19

Location: Somalia

  • Send private message

5

Sunday, April 5th 2020, 4:19am

Blur effects cannot be used on Android phones,
I want to design a UI background,
But the phone has no blur effect,
Ask for help

Similar threads