Fun demo by Elad Shechter:
See the Pen Background-clip: text with Animated Emoji by Elad Shechter (@elad2412) on CodePen.
Behind it are two techniques:
The 👻 emoji is set as the
background-imageof the text. To do so one must wrap it inside an SVG, and successively inject the SVG using a Data URL.
- To clip the emoji to the foreground text, he uses
I like the fact that these techniques by themselves are not new, yet their combination is (at least to me this was the case):
- The “Emoji in SVG”-technique allows you to have an Emoji Mouse Cursor or use an emoji as favicon.
background-clip: textworks on any background image. As gradients can also be set as background images, you can create gradient links.
That’s great! Cool way of adding an emoji as background-image. I was looking for just that. Much appreciate it.
Leave a comment