6

Below is a screenshot of my current situation. Is it possible to make the text within the blob.svg white, and the text outside the blob.svg the color of the blob (#e60050)?

There is also a parallax effect on this particular element. The blob scrolls slower than the text. Therefore the text does not always overlap the blob in the same way/position. Based on the scrolling position, the text may even be completely within or without the blob.

I have been messing around with various implementations of mix-blend-mode now, but i can't seem to figure it out.

Current situation

<div id="sf-coming-up">
    <div class="title">Binnenkort in ons theater</div>
    <img class="blob" src="/assets/blob_vector_1.svg" />
</div>

.blob {
  position: absolute;
  top: 0;
  right: 20%;
  z-index: -1;
}

.title {
  padding-top: 50px;
  color: #FCFBFA;
  mix-blend-mode: difference;
}

1

clickbait
  • 2,818
  • 1
  • 25
  • 61
Rik Maton
  • 135
  • 1
  • 8

1 Answers1

3

You can try using inverted colors and re-inverting the whole thing with a CSS filter like so:

body {
  margin: 0;
}

#sf-coming-up {
  filter: invert(1);
  height: 100vh;
}

.blob {
  position: absolute;
  top: 15%;
  right: 15%;
  z-index: -1;
  width: 70%;
  height: 70%;
  border-radius: 25% 75% 25% 50% / 75% 25% 50% 25%;
  background: springgreen;
}

.title {
  padding: 25vh 0 0 12.5vh;
  color: springgreen;
  mix-blend-mode: difference;
}
<div id="sf-coming-up">
  <div class="title">Binnenkort in ons theater</div>
  <div class="blob"></div>
</div>

see here : a caveat

clickbait
  • 2,818
  • 1
  • 25
  • 61
  • 1
    I don't fully understand it but I am impressed... I was fairly certain this might not be possible, and yet you seem to have invented a means of achieving it with CSS alone. Well done! – Alexander Nied Dec 20 '21 at 05:16
  • 1
    Your code is much simpler and easy to use than what I was able to produce myself in the meantime. Also, the result is slightly better as my colors were a little bit off. I was able to use your code in my project using the exact inverted color that I was looking for. Well done and many thanks! – Rik Maton Dec 20 '21 at 10:50