What I want to do is create an interface that changes color depending on the background color so that the text is always read. So far, everything is working fine. I recorded my browser to show a working example:
From my research, I found that the best method to achieve this was using mix-blend-mode: difference; . The only problem is that, for unknown reasons, the text becomes bold.
I originally wanted to provide a demo, but mix-blend-mode does not work in the code snippet. I'm not quite sure why, I saw other people using it in demos, but for me it stands out in red.
Anyway, here is the image (parts of the screenshot from the browser):
As you can see, after applying the text mix-blend-mode: difference; the text is clearly thicker. It may not be that important, but when I apply it to smaller texts, it looks really bad.
I know that this is stupid, but when I tried to recreate the same effect in Photoshop, everything was fine, which means that the inverse colors with the difference blending mode work correctly.
My question is: can a person get the same result if the inscriptions do not become thicker (?), Or maybe he should work like that, and I can’t do anything?
I do not want to change the font style to light in order to get a different look.
EDIT: Okay, so here is a quick example - I don't know why, but this time it worked. Last time mix-blend-mode: difference; didn't work at all in the demo, so I used images to describe my problem.
In any case, the text on the left and right sides without mix-blend-mode: difference; to see the difference. It is strange that the white version without mix-blend-mode: difference; It looks fine - I just discovered it by adding a version on black bg.
* { margin: 0; padding: 0; } .white { background-color: #fff; width: 50%; position: absolute; left: 0; height: 100%; } .black { background-color: #000; width: 50%; position: absolute; right: 0; height: 100%; } .normalb { position: absolute; top: 50%; left: 5%; color: #000; font-family: 'Roboto', sans-serif; font-weight: normal; font-size: 42px; transform: translateY(-50%); z-index: 10; } .normalw { position: absolute; top: 50%; right: 5%; color: #fff; font-family: 'Roboto', sans-serif; font-weight: normal; font-size: 42px; transform: translateY(-50%); z-index: 10; } .difference { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; font-family: 'Roboto', sans-serif; font-weight: normal; font-size: 42px; mix-blend-mode: difference; z-index: 10; }
<div class="white"></div> <div class="black"></div> <div class="normalb">example</div> <div class="normalw">example</div> <div class="difference">example</div>
Here is a brief comparison on the screenshot to get a closer look:
Hmmm ... It seems like after applying mix-blend-mode: difference; to white texts, it appears as white on black, but on a white background, which is strange because the font remains the same, therefore, changing colors, it should look like a regular black and white version, but it is not. I am embarrassed.