Rook
KPCKevin Powell - Community
•Created by Rook on 6/18/2023 in #front-end
Invert text color when elements overlap
Hey guys! I was trying to re-create the "inversion" effect with the cursor and text that I saw here, and it got me thinking a bit: https://drigmatic.com/
This site uses
mix-blend-mode: difference and setting the color of the cursor to white to get this effect, so it seems it only really works with the specific colors they picked. I've seen a few other examples of this effect in action as well, but they mainly stick to black and white due to the nature of blend modes. In a lot of cases, you won't have the perfect set of complimentary colors, or be working in exclusively black and white.
Is there a way to have more control over blend modes so you can control which color gets displayed when elements overlap? For example, if you wanted to keep the background and the overlapped text colors the same, but have the default text and cursor colors be red, you would end up with some really wonky colors on the cursor and the overlapped text due to the blend modes.
Here's a codepen with a simple recreation of it:
https://codepen.io/Therason/pen/XWydYMv4 replies