change colour of partial text css or javascript

Question

Is there any way of achieving a different colour on part of text, via css or script, based on a shape outline eg a circle or oval curve...with CSS or JS only.

An example is this, see how the colour of the S and part of the U are different based on the image?- example of effect

Theres a similar question but this is in illustrator - https://graphicdesign.stackexchange.com/questions/20127/text-silhouette-change-color-in-middle-of-a-letter-illustrator

Instinct says no way, but there could be some magical clipping effect that can achieve the same?

Answer 1

I was a bit slower than Emil Østervig, but I wanted to write the same :-) I created a little example for the mix blend mode property, which does NOT work in IE and Edge. I dont think you can exactly recreate your Image with pure CSS, but it is an interesting option to maybe dig a bit deeper.

 .image { background: url(http://www.iconsdb.com/icons/preview/red/wolf-xxl.png); background-repeat: no-repeat; } .inverted { background-repeat: no-repeat; color: blue; width: 50%; height: 256px; mix-blend-mode: screen; font-size: 64px; } 

 <div class="image"> <div class="inverted"> Wolf <br> Wolf <br> Wolf </div> </div> 

Answer 2

There are two or more ways to do that. I can come up with 2 on the spot.

One solution would be to use SVG text. Which i cant advise if you have a lot of places or dynamic text. Animating SVG text is a bit complicated sometimes.

What you could do instead is using mix-blend-mode css. It allows blending colors of text and backgrounds. Kind of how you might know it from Photoshop or Illustrator.

You can read more about it here on CSS tricks . You might wan't to check up on browser compatibility, since mix-blend-mode is poorly supported in general. You can check out which browser can make use of it here on Caniuse .

If you need inspiration for workarounds or examples of usage you could always search codepen.io for mix-blend-mode or something similar.