😎 Emoji Compositions

In succession to Split emoji text effect with CSS (which has received an update by now BTW), PixelAmbacht has created a nice Emoji composition using the U+1F60E Smiling Face With Sunglasses emoji (😎) as the key modifier.

Note: For some mysterious reason the original demo yielded a blank page for me. Changing the font-size to anything lower than the originally set 8em fixed this issue. Therefore I’ve embedding a fork of the original demo.

Here’s how it works: The 😎 emoji is injected using generated content. It is positioned on top of the original emoji, and cut off (in height) so that only the sunglasses remain. In the end mix-blend-mode: darken; is added to make ‘m a bit transparent. Only works with the default Mac Emoji BTW.

Personally I’ve gone with overlaying the πŸ•Ά emoji, to not have to use any blending at all.

Sidenote: Marcin Wichary has also been busy mocking up some emoji variations, and compositions using the ❀️ emoji:

Workshopped a bunch of emoji ligatures for more complex and underrepresented feelings.

The emoji ligature Rorschach test →

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

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.