css mix blend modes

Methods for Contrasting Text Against Backgrounds

It started with seeing a recent Pen of Mandy Michael's text effects demos. I'm a very visual creature, so the first thing I noticed was the effect, not the title (which clearly states how the effect was achieved). Instantly, my mind went "blend modes!", which turned out to be wrong.

The demo actually uses clip-path. First of all, the text is duplicated. We have black text below as the actual text content of the element and the white text above as the value of the content property (taken from a data attribute which gets updated via JS). These two are stacked one on top of each other (they completely overlap). Then the pseudo-element with the white text above gets clipped to the shape of the black dress.

However, this means we need to change the clipping path if we change the image and, at this point, it's anything but easy to figure out polygonal clipping paths with a lot of points via dev tools (which is why having something like Benett Feely's Clippy with two-way editing directly in dev tools would be immensely useful). So I decided to give my initial idea - blend modes - a try.


Visual Regression Testing with CSS Blend Modes

Last week I saw Una Kravets give a very inspiring talk at Generate Conf about using CSS Filters and Mix Blend Modes. One demo in particular got my attention because Una showed us how we could overlay two layouts on top of each other and use blend modes to spot all the differences between them.

I was pretty excited about this idea and got to thinking: could we create visual regression testing with just one line of CSS? Turns out we can.