Mask text with a layer

user_5417679 0
Viewed 35

I am trying to do something similar to this enter image description here

from https://ubac-store.com/ , I am trying to make some combinations width CSS with mix-blend-mode: difference; and filter: invert(100%); but honestly I don´t receive the expected result, it seems like in ubac-store are making some mask and they have diferents layers with the same text in diferents colors, but I don´t find the way, anybody can give any clue to get my objetive?

Thanks in advance

css html
1 Answers

Your most likely culprit is missing a background-color on whatever the containing element (or document) that mix-blend-mode relies on to make the effect.

See the example below, we use the difference mode that will invert the color of the background accordingly. So for example the black text turns white over the image, while red turns the inverted equivalent of light blue. Hope this helps, cheers.

section {
  height: 100vh;
  width: 100%;
  position: relative;
  outline: #0f0 2px dashed;
  background-color: #fff;
  margin: 0;
  padding: 0;
}

#img1, #img2 {
  position: absolute;
  height: 45%;
  width: 45%;
  background: url(https://picsum.photos/id/237/200/300) no-repeat center / cover;
}

#img2 {
  bottom: 0;
  right: 0;
}

#txt1, #txt2 {
  font-size: 3rem;
  color: #fff;
  margin: 2rem 1rem;
  mix-blend-mode: difference;
}

#txt2 {
  position: absolute;
  bottom: 0;
  right: 0;
  text-align: right;
  color: red;
}
<section>

  <div id="img1"></div>
  <div id="img2"></div>
  
  <p id="txt1">SOME TEXT WORDS</p>
  <p id="txt2">EVEN MORE WORDS</p>

</section>

user_10902060
Related