Changing text color for contrast based on background lightness
If you had to change the color of some fixed-positioned text based on the lightness of its scrolling background, how would you do that? CSS filters, blend modes? But what if you had to support all browsers, including Internet Explorer? Here are a couple of ways to do that using CSS
Here’s the result using
clip - wide browser support
And here’s the result using
clip-path - modern browsers only
What happens here that the content is:
- wrapped by a box with class
clipperwhich clips its content
- copied inside every container :(
- positioned with
Being the content in position fixed, the content sticks to our browser window, but is’t clipped by the moving clipping elements.
This solutions has 2 problems, though:
- there’s a bug in IE and Edge which makes the content’s block children invisible. It works with inline elements, though, but it’s a hack
- we need to copy the content inside every container
Can you think of a better solution? If you do, please add it to the comments!