One advantage of Ana’s technique is that it doesn’t require duplicated images in the markup. A disadvantage though is that it only works with background images. Chrome only too, as it relies on @property.
What I’m not too excited about in this implementation is the fact that it requires you to manually cut up the image into parts beforehand, even though clip-path is used later on. I’ve quickly made a pen that uses the one single image, yielding a similar cutout effect.
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-path CSS 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-path property 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.
Internally it looks like this:
Note that the hitareas are made triangular using CSS Clipping, and not using the for this typically used CSS border-fiddling.
Here’s a Pen of the final markup for you to play with:
Sidenote/Related: The General Sibling Selector – just like any other Combinator such as the Adjacent Sibling Selector (+) for that matter – is a CSS Selector that’s very powerful and should be used more often. Here’s why: