You are not logged in.

a.pu

Trainee

  • "a.pu" started this thread

Posts: 95

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

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

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

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