Blending modes

Custom code
1

Any widget can be used to alter the look of all underlying content—that is called blending. There are multiple blending modes, any of which can be triggered using widget ID within some custom CSS:

[data-id="PASTE WIDGET ID HERE"] {
mix-blend-mode: difference;
}

The previous code will work on Desktop layout only.
ezgif-4-4b433caf96

Experimenting with shapes, blending modes and colors can produce the most unexpected and exciting designs. Do you have one?

2 Likes
2

Hello,
I’ve been trying to give the menu (typeset) a blending mode of difference, but I’ve been trying for days without success. I have tried to do it with text that does not have a link, and it works, so not sure if the problem has to do with the fact that it’s clickable.
Any idea why is this happening and how to solve it?
Here is a screen-recording so you can see what’s happening.

3

Hi @Sepadel hello and welcome to the Readymag forum. Mind sharing a link to the project please? The code does look ok. My thoughts are that i’d rather see you use the code embed in the navigation rather than dropping in a code embed element. Also would suggest using code to change your text colour, otherwise editing your project in the future will be difficult with white text! I’ve put below a CSS line to recolour your text ready for the difference effect.

* {
  color: #ffffff !important;
}

[data-id="63d7b4e3a133500029131e64"] {
  mix-blend-mode: difference !important;
}
1 Like
4

Hi @HEADLESS.HORSE !!
Thanks for replying.
I’ve tried with the code you sent over, but still not working. It’s swapping the color to white in all the site content.
I’ve used the code widget and attribute the code to the element through the ID. Not sure if there’s another way to do it. Please, find the link to the project below.

5

hello, is there any way to make this code work on mobile? thank you very much in advance!