CSS is quite lame; it only allows us to set 1 color for the text. But seeing we create more and more floating and fixed elements, we might want to have a dynamic
How to create a difference based text color in CSS permalink
Let's start by marking up the html:
Then we want to include two random backgrounds for the sections, let's do that.
And make sure the text div is floating on top of everything!
As you can we we included
mix-blend-mode: difference; this makes the color blend in difference based on whatever the background is.
Awesome right?! 🤩
This also works on images/videos and what not!
See a demo here:
Browser support permalink
Unfortunately not supported by IE, but still overall good support! I use this option a lot to make just that small difference!