0
275
ViewsCSS Custom text color based on background
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;
}
·
Santiago Trujillo
1 answers
Answer question0
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>
·
Santiago Trujillo
Report
Answer question