CSS background-clip Demo: Text with Animated Emoji

This content originally appeared on Bram.us and was authored by Bramus!

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:

1. The ? emoji is set as the background-image of the text. To do so one must wrap it inside an SVG, and successively inject the SVG using a Data URL.

2. To clip the emoji to the foreground text, he uses background-clip: text.

I like the fact that these techniques by themselves are not new, yet their combination is (at least to me this was the case):

1. The “Emoji in SVG”-technique allows you to have an Emoji Mouse Cursor or use an emoji as favicon.
2. Using background-clip: text works on any background image. As gradients can also be set as background images, you can create gradient links.

This content originally appeared on Bram.us and was authored by Bramus!

Print Share Comment Cite Upload Translate Updates

APA

Bramus! | Sciencx (2021-03-14T23:37:30+00:00) CSS background-clip Demo: Text with Animated Emoji. Retrieved from https://www.scien.cx/2021/03/14/css-background-clip-demo-text-with-animated-emoji/

MLA

" » CSS background-clip Demo: Text with Animated Emoji." Bramus! | Sciencx - Sunday March 14, 2021, https://www.scien.cx/2021/03/14/css-background-clip-demo-text-with-animated-emoji/

HARVARD

Bramus! | Sciencx Sunday March 14, 2021 » CSS background-clip Demo: Text with Animated Emoji., viewed ,<https://www.scien.cx/2021/03/14/css-background-clip-demo-text-with-animated-emoji/>

VANCOUVER

Bramus! | Sciencx - » CSS background-clip Demo: Text with Animated Emoji. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/03/14/css-background-clip-demo-text-with-animated-emoji/

CHICAGO

" » CSS background-clip Demo: Text with Animated Emoji." Bramus! | Sciencx - Accessed . https://www.scien.cx/2021/03/14/css-background-clip-demo-text-with-animated-emoji/

IEEE

" » CSS background-clip Demo: Text with Animated Emoji." Bramus! | Sciencx [Online]. Available: https://www.scien.cx/2021/03/14/css-background-clip-demo-text-with-animated-emoji/. [Accessed: ]

rf:citation

» CSS background-clip Demo: Text with Animated Emoji | Bramus! | Sciencx | https://www.scien.cx/2021/03/14/css-background-clip-demo-text-with-animated-emoji/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.