Split emoji text effect with CSS

1 Comment on Split emoji text effect with CSS

Thanks to some absolute positioning, hue-rotation, and even some clipping you can create nice split emoji:

I especially like the experiments near the lower part of the demo, where one emoji is used as a modifier for the other (e.g. the 🎩 is placed on top of 😁, yielding a new emoji). They remind me of this ingenious XKCD Comic on “the vomiting emoji” (U+1F92E):

💥 Did you know you can also create Emoji Silhouettes and/or Outlines? And did you know that some emoji wrap lines, and some don’t?

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Join the Conversation

1 Comment

  1. Pingback: 😎 Emoji Compositions | Bram.us

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.