-2

Consider this partial screenshot of a webpage:

enter image description here

The text color varies based on the background color because I am using mix-blend-mode: difference on the text.

I would like to achieve a similar effect in my app, except I would like to use the following rule:

  1. There can be two backgrounds: #ED1B34 (red) and #FFFDF8 (cream)
  2. When the text is on top of the #FFFDF8 (cream) background its color should be #ED1B34 (red)
  3. When the text is on top of the #ED1B34 (red) background its color should be #FFFDF8 (cream)
  4. When the text is on top of anything else its color should be #ED1B34 (red).

Blending mode difference comes very close to achieving (2) but not (3) as the text appears black and not cream over the red background.

Tom Lehman
  • 85,973
  • 71
  • 200
  • 272
  • You can use css gradient to provide appropriate background color and text color based on your preference – Abin Thaha Aug 07 '21 at 15:16
  • @AbinThaha that's interesting! Do you know where I can find some sample code to do that? The issue for me is that I don't want a static background with static text, I want the user to be able to scroll fixed text over a variety of backgrounds – Tom Lehman Aug 07 '21 at 15:27
  • Scrolling may not be available, but providing a static text can be achieved – Abin Thaha Aug 07 '21 at 15:32

1 Answers1

0

Can you check the below snippet and let me know if something like this is what you are trying to develop

div {
padding: 10px;
border: 1px solid #ddd;
background: linear-gradient(to bottom, #ffffff 0%,#ffffff 50%,#ed2334 50%,#ed2334 100%);
}

.text {
    text-transform: uppercase;
    background: linear-gradient(to bottom, #ed2334 0%,#ed2334 50%,#000 50%,#000 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font: {
        size: 20vw;
        family: $font;
    };
}
<div>
  <h1 class="text">Hello world</h1>
</div>
Abin Thaha
  • 4,493
  • 3
  • 13
  • 41
  • This is the correct effect but I would like the effect to persist in the case that `.text` is `position: sticky` and can scroll such that an arbitrary amount of it is over white v. red. Thank you! – Tom Lehman Aug 07 '21 at 16:05