text not showing with mix-blend-mode
Hey buys, so I'm trying to get a text changing it's color as the background fades in (using transform). I'm trying to achieve this using mix-blend-mode. For some reason the text appears to be transparent. Any ideas?
https://codepen.io/micahbcode/pen/YPKwOKb
10 Replies
change the text color to white
Okey. I don't get it why I should set it to white (as I want it to be black in the "default" state). And how can I then define the text to become white on the green background? It becomes pink then
thats just how difference work in blend mode, if you make text white, it will be black
@Micah You can put the mix-blend-mode on the pseudo element instead and use "screen" or "lighten" as the blend mode, then you can use backdrop-filter:invert(1); to get what you want
https://codepen.io/tok124/pen/MYgKqKr
My case is actually a bit more complex than what I did in the codepen to try it out. I'm trying to achieve something like this. Each icon represents a page and the green background highlights, which page is active. The arrow is supposed to be animated on change. Your solution with the backdrop filter causes some issues on the rounded corners as well.
Okey I was playing around a bit more now and I'm getting to understand now how this works. But I wasn't able to figure out which base color and which mode I have to use to achieve this:
For #21B250 (green background), the result should be #FFFFFF (white).
For #F4F4F4 (light gray background), the result should be #000000 (black).
No, it's not possible to achieve what you're trying to do with blend modes
If you're animating the icon why don't you just use the same process to invert the icon colors?
Because the transition would look weird, as it would not result in something like this
I assume you're doing a transition with a onClick
So you can just bind the invert to
transitionendMDN Web Docs
Element: transitionend event - Web APIs | MDN
The transitionend event is fired when a CSS transition has completed. In the case where a transition is removed before completion, such as if the transition-property is removed or display is set to none, then the event will not be generated.