How to manage mix-blend-mode: difference for Navbar
I have a navbar with a logo and essential elements, and I want the logo and elements to change their colors automatically when placed on whitish or black backgrounds. To achieve this effect, I have set the mix-blend-mode property to "difference," which works perfectly for white and black sections.
However, I encountered an issue when using this blend mode with a red section. Instead of the desired outcome, the logo and elements turn cyan, which is not the effect I want. I would prefer them to appear white as they would on a black background.
Is there a solution to maintain the mix-blend-mode as "difference" for white and black sections, while making the elements appear white when placed on a red background (#f5221b)? I need a method that will seamlessly adjust the colors based on the background, providing a consistent and visually appealing navbar experience.
My code is rather extensive, so I will provide a codepen with a simple version of what i have.
https://codepen.io/jorge-onate/pen/ExOOvWL
Note: In the images I have provided show the current implementation in my code, the first is with a semi white background color the logo looks and the elements look as intended ,the one with the red bg how it currently is (cyan elements) and the other red bg one is how i want it (mix-blend-mode:screen but it only works in this section) and finally the last one with a bg that is black.
i want to mention i have trried to:
filter: invert(1) grayscale(1) ; but it doesnt really do much it just creates a gray scale of the cyan instead of making it or white or black (white is what im looking for)
5 Replies
I dont think it is possible solely with blend modes.
To solve this problem, you can istead add and intersection listener and change the css class to white or black based on the current section background color
I agree with Senra, I don't think it's possible with blend-modes.
I have to say though A+ work on the example, this is a textbook example of how to ask a question in an online forum, thank you!
Yeah, you pretty much need the perfect combination of colors to get this to work if you aren't using black and white :(((
I've tried to solve a similar-ish problem before, but the solution I came up with really isn't super practical. I had two elements stacked upon each other that were identical aside from having differeent colors, then revealed the lower one with a
mask-image.ty ❤️