Emoji seems to have invaded every part of our culture. What started out as a niche feature for mobile phone users and computer geeks has become its own phenomenon. Now, we see these little characters on t-shirts, marketing campaigns and even not-so-funny feature films.
It wouldn’t be a stretch to say that emoji have become a sort-of common language. Whether you speak English, Japanese or Swahili, certain characters are just universally recognized. As such, they can break down barriers in their own, cute way.
Naturally, the web design community utilizes and experiments with emoji quite a bit. Today, we’d like to showcase some of the more interesting and fun examples from CodePen. They run the gamut from simple CSS recreations, to clever animation that brings these little guys and gals to life. Enjoy 😊
Pop the Emoji
Let the Pseudocats Teach Us
Because emoji is so universal, it makes for a great learning tool. This interactive demonstration of CSS pseudoclasses benefits from the use of helpful “pseudocats”.
Surprisingly Pure CSS
Developers are continually getting better at creating images via CSS. Here, we have a surprised-face emoji that is crisp, clean and scalable. It’s also been written with surprisingly little code.
Choose Your Critter
One of the more popular usage of emoji is in games. They make for great, easily-recognized characters while also adding fun to the mix. This particular game is similar to a slot machine. Click the “spin” button and see which cute animal you land on.
Beary Cool Animation
What’s not to love about this emoji bear? It’s clearly a fun-loving animal, with sunglasses and backwards cap. It apparently writes code as well, judging from the super-cool scrolling animation in those lenses.
Happy or not, emoji does reflect what’s happening in our society. As such, it’s no surprise that this COVID-19-inspired character has been developed. The disgruntled little virus bounces pensively, apparently wary of an inevitable cure.
Take a Virtual Vacation in Emoji Town
One clever developer asked the question: What would an emoji town look like? The result is a fun, flat and animated world. It’s a great mix of modern technology and retro-game looks.
Build Your Own Emoji
Not a fan of the run-of-the-mill emoji characters? Then build your own! This tool lets you choose from various skin tones, facial features and even accessories.
Representing All the Feels
You wonder if, thousands of years from now, archaeologists will equate emoji with ancient Egyptian hieroglyphics. Granted, emoji are probably more lighthearted and reflect modern times. But both are used to communicate a story.
Want to see even more cute and fun emoji snippets? Take a look at our CodePen collection!
- 8 Creative CSS & JS Snippets for Creating Pixelated Backgrounds
- 10 Dramatic Examples of Splash Screens in Web Design
- 8 Fantastic Onboarding Carousel HTML & CSS Snippets