I added this to https://cppbuilder.com/ which used to use a standard blur for the header background. It's very subtle, especially with the bottom border turned off, but I appreciate the knowledge of it being a 'better', ie a more real effect matching how real-world light or glass works. Feels like doing it right.
Firefox on Mac _may_ have a slight lag scrolling now which Chrome does not show.
Not mentioned in the article (that I saw) is that despite being a background blur it will affect all elements placed in the header, even with z-index higher than the blur, unless you mark them `position: relative;`. I added that style to my nav container.
You're probably right, but I enjoyed the effect as text and graphics slid under the header. Originally I was going to have the header and page different colours.
Firefox on Mac _may_ have a slight lag scrolling now which Chrome does not show.
Not mentioned in the article (that I saw) is that despite being a background blur it will affect all elements placed in the header, even with z-index higher than the blur, unless you mark them `position: relative;`. I added that style to my nav container.