UPDATE 2021.01.14: Besides using
clip-path, a more easy approach is to use
mix-blend-mode: difference; if all you’re doing is inverting colors.
Ever had a fixed header that had to work with both light and dark content shown underneath it? Keep an eye at the header in the video below to see what I’m talking about:
As explained over at CodyHouse, here’s how it’s done:
This effect uses the
clip-pathCSS property. The idea is to have a clone of the main header inside each
<section>of the page. Each clone will inherit the style of the section it belongs to.
All cloned headers are placed at the top of the page (with a fixed position). The
clip-pathproperty can then be used to define, as clipping region for each header, the section element it belongs to. This way, each header is visible only when on top of its parent section.
This creates the clipping transition effect between headers with different color themes.