[CSS] How To add Background Blur to your wiki

[BurningTreeC]

Hello community,

I've discovered how one can add some background blur to transparent elements and want to share the how-to.

It's a CSS feature that's not yet available in all browsers and even in the latest stable versions it must be enabled - it's still considered experimental

On this page the sidebar has background-blur: http://btc.twtemplate.tiddlyspot.com - you'll see it if you enable it or if your browser already supports it. I think firefox has no support at all yet, not sure

To enable it on google chrome, chromium or TD:

• open the chrome://flags by typing "chrome://flags" in the address bar and hitting enter or on TiddlyDesktop open the backstage window, go to settings and look for the chrome flags button
• alternativelly, if you're using an older TD you can open the console by hitting F12 and typing (in the console at the bottom) this.document.location = "chrome://flags" , then hit enter
• look for the "Experimental Web Platform features" and enable them
• restart the browser
• now you can use "backdrop-filter: blur(10px);" in a Stylesheet tiddler

See here: https://developer.mozilla.org/de/docs/Web/CSS/backdrop-filter

On webkit browsers like safari use "-webkit-backdrop-filter: blur(10px);" - if I understand it right, it should be available from safari version 9.0 on

Firefox: ¯\_(ツ)_/¯

[Mat]

Thanks for sharing your discoveries BTC

How does this differ from filter:blur() ?

<:-)

[BurningTreeC]

Thanks for sharing your discoveries BTC

How does this differ from filter:blur() ?

<:-)

Hmmmmm ... good question! Maybe this just blurs the background and filter:blur()   ... blurs the whole div? - I'm speculating 

[Jeremy Ruston]

The difference is that the new backdrop filter is applied to the content that lies behind the element with that style; it’s like a fancy kind of opacity that let’s the underlying content show through. The old blur filter is just applied to the content within the element to which it is applied. The reason that browsers are adding this effect is because iOS, macOS and Windows all use it extensively in their windowing UIs.

Best wishes

Jeremy.

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/8606c83e-e3d9-46b2-a35e-22b6f3a241b9%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[BurningTreeC]

The difference is that the new backdrop filter is applied to the content that lies behind the element with that style; it’s like a fancy kind of opacity that let’s the underlying content show through. The old blur filter is just applied to the content within the element to which it is applied. The reason that browsers are adding this effect is because iOS, macOS and Windows all use it extensively in their windowing UIs.

Best wishes

Jeremy.

Thanks for clearing that up, Jeremy!

It's a cool filter, is there a way that it doesn't get used on animation frames?

I have it on tiddler backgrounds and closing a tiddler creates something like a temporary blur-artifact which I'd want to eliminate

Something like .tc-tiddler-frame:not(is-animating) {

    -webkit-backdrop-filter: blur(10px);

}

[Jeremy Ruston]

Hi BurningTreeC

It's a cool filter, is there a way that it doesn't get used on animation frames?

I have it on tiddler backgrounds and closing a tiddler creates something like a temporary blur-artifact which I'd want to eliminate

Something like .tc-tiddler-frame:not(is-animating) {

    -webkit-backdrop-filter: blur(10px);

}

That sounds like a browser bug; there are often glitches with the new stuff. The other thing to watch is that the effect is intrinsically much, much slower than an ordinary paint operation, particularly on mobile devices.

Best wishes

Jeremy

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/e6f52613-35ba-4765-b81f-72d0830c99fa%40googlegroups.com.

[BurningTreeC]

Hi BurningTreeC

It's a cool filter, is there a way that it doesn't get used on animation frames?

I have it on tiddler backgrounds and closing a tiddler creates something like a temporary blur-artifact which I'd want to eliminate

Something like .tc-tiddler-frame:not(is-animating) {

    -webkit-backdrop-filter: blur(10px);

}

That sounds like a browser bug; there are often glitches with the new stuff.

That's possible - I forgot about the early state of it

 

The other thing to watch is that the effect is intrinsically much, much slower than an ordinary paint operation, particularly on mobile devices.

I'm using it more on my desktop which is powerful enough running a very lightweight linux. I was expecting bad performance on mobile devices.