Nice demo from Sebastiano Guerriero. When a fixed-position header moves from overlapping differently-colored backgrounds, the colors flop out to be appropriate for that background. Sebastiano’s technique is very clever, involving multiple copies of the header within each section (where the copies are hidden from screenreaders) which are all positioned on top of each other and then revealed as the new section comes, thanks to each section having a clip-path around it.
A bonafide CSS trick if I’ve ever seen one.
It makes me wish there was an easier way of doing it. Like, what if there was some magical value of mix-blend-mode that would handle it? I got close enough that it gives me hope.
Interesting idea but, as you wrote, I hope that could be exist a more robust (and compact) solution. I’ll wait for one of your tricks :-)
I love that effect! You can also see it in action on on https://www.dropbox.com/
Last year, I explained in detail how to achieve it in a blog post:
https://dev.to/mornir/cool-css-effect-j2n
It did take me a long time to understand the overlapping and the
clip-pathproperty. I’m glad to learn that there may be an easier way.Really cool! Thanks for sharing this.
I added some ‘backdrop-filter: blur(3px);’ to the site-header class for separating header and content a bit more.
You can easily use Javascript’s Intersection Observer to create a header like this. Doesn’t need multiple HTML elements.
Click here to see an example for a header changing colors on scrolling
I added an empty
<div>to each<section>and applied:so when it scrolls under
<header>mix-blend-mode: difference;kicks in.Very cool.
We did this a while back using position sticky. Believe me I struggled to find a more concise way to do it. I ended going to javascript for help but was unhappy with the performance. So we did it with CSS and css clip path: inset(0). It has one flaw though; IT DOES NOT WORK IN FIREFOX.
css in firefox is very buggy tbh. Anyway this is our version of it: https://studio.avvent.io