CODEWITHSUNDEEP
htmlcsssassstyles
Merim
Merim

Reputation: 1363

Dynamic half text color in Sass

I'm not sure if this is possible, I want to create mixin which will set text color based on background, it seems easy if you have one color, what about two colors, is it executable to change a color of a half of a text ?

Change text with blue background..

Change text color where background is blue

I have this simple mixin, but this one doesn't work: 

@mixin setColor($bg) {
    @if (lightness($bg) > 50) {
        color: $dark; // Lighter backgorund, return dark color
    } @else {
        color: white; // Darker background, return light color
    }
}

Upvotes: 0

Views: 287

Answers (1)

felixmosh
felixmosh

Reputation: 35583

You can use mix-blend-mode on the text with difference to achieve your effect.

div {
  background: linear-gradient(45deg, #fff 0%, 50%, #6ba8e5 51%);
  width: 500px;
  height: 236px;
}

span {
  mix-blend-mode: difference;
  color: #2c2c2c;
  font-size: 2em;
}
<div>
  <span>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span></div>

Upvotes: 1

Related Questions