How to set the blending mode of the logo?
Hello!
How to set the blending mode of the logo?
I want, that when using the blending mode, the logo (.png) is always visible on any background, even complex. For example, that the white logo is not lost on the light section of the background photo (or background photo in the case of "Slider Revolution").
Obviously, light and dark variants logo are not as flexible as the overlay mode. A variant with a shadow is not suitable.
It's great that in "css" there is "background-blende-mode". And in "Slider Revolution" it is used, and works well.
I know that there must be at least 2 layers to make this work.
How to do it right? On the example of Rife Fully https://rifetheme.com/fully/.
How to set the blending mode of the logo?
I want, that when using the blending mode, the logo (.png) is always visible on any background, even complex. For example, that the white logo is not lost on the light section of the background photo (or background photo in the case of "Slider Revolution").
Obviously, light and dark variants logo are not as flexible as the overlay mode. A variant with a shadow is not suitable.
It's great that in "css" there is "background-blende-mode". And in "Slider Revolution" it is used, and works well.
I know that there must be at least 2 layers to make this work.
How to do it right? On the example of Rife Fully https://rifetheme.com/fully/.
background-blend-mode: overlay;Post edited by vasiliykuleshov on
Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Comments
I have never used blend mode in production, but from my understanding it will not work.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode It is said here that it only affects one element, and in this element if describes how background images & background color should blend.
However in theme, slider and header are different elements, so it doesn't work.
Could you show me link to revo slider where you see it working? I will check if they are doing it on separate elements.
With kind regards.
Thanks for slider. I was checking it out for long time and I have found that they use something else.
You can add such custom CSS, but it will affect whole theme header: However I have played with it for a bit and for me
mix-blend-mode: difference;might be better.Making this work only for logo in theme header : I didn't find a way yet, but I think it will require overwriting this in child elements of header. I can play around with this if you need. Let me know what do you think.
With kind regards.
For me the value "overlay" is more appropriate than "difference", although the latter is very well distinguishable. But it all depends in what circumstances it is used. I will also experiment with this, the values and combinations there can be many, the main thing is not to lose readability.
No thanks, I do not want to waste your time on this now. You have many other more important planned cases. ;-) For me this is an experiment in the design of the site, and right now there is no hot need for it.
But someday in the future maybe this setting will appear in your Appearance/Customize/Header, and the Elementor!
With kind regards.