Hi,
I was trying to edit the header of my discourse like the tranlucent-ish and blurry navigation bar on https://apple.com/
but simply editing .d-header { } didn’t help much.
I use safari mostly and a tranlucent header not only looks cool but also complements the whole iOS’s status bar transparency.
What would be the mobile only CSS for something like that?
Frankly, it’s a bit easier to make a design like that work on one static page with very large text and a black background. So a gentle heads up, you’re in for a bit of work.
The header background is set via a color-scheme variable. The name of that variable is $header_background
Color-scheme colors are always opaque since they are RGB hex colors - #ffffff for example.
What you need is an RGBA color since those have an alpha parameter which you can use to control the opacity of the color.
a semi-translucent RGBA black color looks like this
rgba(0,0,0, .8)
Since Discourse uses scss, you can use something like this to control the opacity of the header background color:
.d-header {
background-color: rgba($header_background, 0.8);
}
which takes the header background - whatever it may be for your current color-scheme - and sets its opacity to 0.8
This creates something like the what you see below
However, that’s not they only thing used on the Apple website, they also use a gradient under the header to give the illusion of page elements fading out as they go under the header.
which you can achieve using something like this: (I grabbed this from Apple’s website and modified it a bit)
.d-header:after {
content: "";
position: absolute;
top: 100%;
height: 100px;
width: 100%;
pointer-events: none;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.8) 0%,
rgba(0, 0, 0, 0.79) 8.1%,
rgba(0, 0, 0, 0.761) 15.5%,
rgba(0, 0, 0, 0.717) 22.5%,
rgba(0, 0, 0, 0.66) 29%,
rgba(0, 0, 0, 0.593) 35.3%,
rgba(0, 0, 0, 0.518) 41.2%,
rgba(0, 0, 0, 0.44) 47.1%,
rgba(0, 0, 0, 0.36) 52.9%,
rgba(0, 0, 0, 0.282) 58.8%,
rgba(0, 0, 0, 0.207) 64.7%,
rgba(0, 0, 0, 0.14) 71%,
rgba(0, 0, 0, 0.083) 77.5%,
rgba(0, 0, 0, 0.039) 84.5%,
rgba(0, 0, 0, 0.01) 91.9%,
transparent 100%
);
}
If you add that, you’d need to modify the padding of the #main-outlet a bit so that items at the top of the page are not covered by the gradient before you scroll.
Something like this should work
#main-outlet {
padding-top: 8em;
}
The example on Apple’s website works really well because it’s black on black and the text is very large like I mentioned earlier. You might have spend a bit of time playing around with the colors to get it to look as nice on your site.
I created a basic black on black demo on theme creator for this which you can see here
It works on both desktop and mobile but if you only want it to be on the mobile view, add the code to the mobile section of your theme / theme component.
Great. Transparency working perfectly fine. Thanks @Johani Can we add a blur to it? As I mentioned in the title, an iOS like blur, like in the image for example (Gaussian blur):
Love this idea, thanks @rootsh3ll, @Johani
There is apparently a CSS filter for this:
as in:
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
But looks like support is patchy! Browser support (surprisingly Chrome doesn’t support it ootb)?:
https://caniuse.com/#feat=css-backdrop-filter
This works in Safari (!). Thanks to @Johani for pointing out the naughty space in my original code snippet 
Right. I was just testing this:
-webkit-filter: blur(10px);
filter: blur(10px);
inside .d-header and this:
but didn’t work.
when I put the code inside .d-header, it blurs the whole header, including the text and the logo also.
Couldn’t figure out a way to prevent texts, logo and just blur out the background content that comes beneath the header.
See if you find any success with it.
As @merefield said earlier, backdrop-filter would apply the blur effect to the underlying elements, but support is spotty (no Firefox, Chrome supports it only with a change to user’s browser preferences).
It would give you something like this, where supported:
Updated my CSS above which now works in Safari (and in Chrome with Experimental Web Platform Features enabled)
I’ve just updated the logo on one of my sites so it has a tranparent background to take full advantage of this effect
From what I remember of blink-dev discussions, there’s some architectural issues that complicate its implementation? Obviously it exists behind a flag right now, but it might not perform very well in Chrome or something. (Someone was saying “I didn’t realize when I was adding support for Backdrop Filters that they aren’t even turned on by default right now!”)
Hey, remember when I said that Chrome didn’t think that backdrop filters were ready to ship yet?
Is there any progress on that?
I love to integrate this as soon as possible. At least for those browsers, that support this blur filter.
