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 :)
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 :)
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:
<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>
Alles anzeigen
Usage example:
<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
Great
Not long ago I was still thinking about how to use fuzzy containers for UI interface
Thanks, this is super-cool!
Can you please comment on this topic? Separate layer structure from layer properties
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
Hello,
Thanks for the example, it works great even on android devices!
I have another similar question. Is it possible to create a container with animated gradient style like this?
Best regards
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!