0

I've been trying all day to find a solution to colorize text when a slanted element is over it. I have partially solved this with mix-blend-mode. But I don't like that you don't have a full control over the colors.

The buttons should be available in many different colors and you have to be able to clearly define what color the text should have and what color it should get when the element moves over it.

I have created a Stackblitz here. With a yellow background, the text should be black and become white when the element is placed over it, this does not seem to be possible with mix-blend-mode.

Does anyone have an idea? In worst case is a js solution also fine for me.

https://stackblitz.com/edit/mix-blend-mode-text-color?file=styles.scss

Budi
  • 678
  • 2
  • 6
  • 27

1 Answers1

0

I have not found a suitable answer using mix-blend-mode but, depending on your use case, you may be able to get the required effect using background clip and linear gradients as you will have absolute control over the colors.

This is a simple snippet which just does the styling for the text and background to give the idea:

button {
  background-image: linear-gradient(-45deg, #f7ff14 0, #f7ff14 50%, black 50%, black 100%);
}

button span {
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(-45deg, black, black 50%, white 50%, white 100%);
  color: transparent;
}
<button>
      <span>Weiter</span>
    </button>
A Haworth
  • 30,908
  • 4
  • 11
  • 14
  • Thanks, but i dont understand how i can use this in my stackblitz. i have a pseudo element that moves on hover. – Budi Jul 07 '21 at 09:16