Follow

Food for thought: Applying a transparent-enough noise texture as the background of a webpage's header & footer and activating backdrop-filter: blur(20px) on things above it (header & footer) for minimal eyecandy. 🤔

Check this idea in live code in my site at lainsce.us .

Still minimalist and doesn't detract from pure css and html.

Show thread

@neauoire Firefox doesn't carry over the dark style between loads, and I'm not sure why.

@lains which browser do you use? Next has the same issue. On surf, I get "Peer sent fatal TLS error"

@neauoire I'm using Chromium, and it doesn't have this issue.

After looking online, it seems Firefox needs a flag in about:config called layout.css.backdrop-filter.enabled set to true to get the blur to load correctly and thus hopefully this error ends.

As for surf, it doesn't implement TLS 1.3 (which I use) and is by design insecure due to this.

@lains gotcha, is there any way you could make this work for screen readers or terminal browsers?

Lynx gives me an error a bit like surf and the others.

@neauoire

TLS 1.3 support depends on the browser itself, I can't do anything.
As for this styling, it shouldn't even bother text browsers.

@lains So your site only works in chrome? I'll try and fix up the firefox flag so it doesn't flicker as much. 👌

@neauoire caniuse.com/#feat=css-backdrop says this feature works on everyone sans Firefox out of the box. Pretty sure once the feature lands in Firefox it should be universal.

@neauoire fwiw this site helps know if a css adventure is possible for everyone to enjoy

Sign in to participate in the conversation
Merveilles

Merveilles is a community project aimed at the establishment of new ways of speaking, seeing and organizing information — A culture that seeks augmentation through the arts of engineering and design. A warm welcome to any like-minded people who feel these ideals resonate with them. Check out our Patreon to see our donations.