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)
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)
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Was this page helpful?
