Top 10 CSS Snippets for Emojis



Screen Shot 2017-04-20 at 5.46.37 PM

Is it just us, or does it feel like emojis are taking over the world? Or at the very least, they’re definitely taking over the internet, and they don’t seem to be going away anytime soon. If you want your projects to get in on the emoji craze, there are dozens of different ways you can implement the cute little smiley faces and icons into just about any site. Not sure how to get started? Take a look at our curated list of the top ten coolest emoji-centric code snippets that can easily be added to your projects.

1. Facebook Emoji Reactions

Screen Shot 2017-04-20 at 5.17.45 PM

 

By now, pretty much everyone is probably familiar with Facebook’s animated reaction emojis, which can be used to “react” (rather than just “like” like we did back in the old days) to another person’s post. This code snippet shows you how you can use purely HTML and CSS to create the same animated emojis for yourself..

2. Emoji Toggles

Screen Shot 2017-04-20 at 5.28.04 PM

 

A unique take on both toggles and emojis, this snippet creates an effect that smoothly changes the emoji when the toggle functionality is triggered. Instead of toggling something on or off, you’re toggling the emoji you see — so when you trigger the thumbs up toggle, for example, it becomes a thumbs down.

3. CSS Emojis

Screen Shot 2017-04-20 at 5.30.29 PM

 

Here’s a collection of three cute animated CSS emojis that would make a great addition to any project. One emoji makes a kissing face, another opens and closes its mouth, and the third one looks from side to side.

4. Interactive Emoji

Screen Shot 2017-04-20 at 5.32.11 PM

 

This snippet uses SVG to create animated, interactive emojis. The interactive part is where the user is able to control the emotion displayed by the emojis by choosing from one of four expressions — standard (shown above), wink, rage, and happy.

5. Emoji Hats

Screen Shot 2017-04-20 at 5.33.59 PM

 

Add a dapper-looking top hat to any of your favorite emojis with this code snippet. This one might not be super useful, but seriously…what’s cuter than a puppy in a top hat?

6. Emoji Cursor

Screen Shot 2017-04-20 at 5.36.10 PM

 

This code snippet creates a trail of classic smiley face emojis that follow your cursor around the viewport. Emojis range from smiling to laughing to laugh-crying.

7. Coloring Emojis

Screen Shot 2017-04-20 at 5.37.59 PM

 

This simple tutorial demonstrates how to use CSS’s filter properties and hue values to easily and quickly transform the color of your standard-issue emojis.

8. Twemoji

Screen Shot 2017-04-20 at 5.43.17 PM

Twemoji is a textarea input field where you can input emojis rather than text! Much more fun than a boring old text input field that only supports keyboard characters.

9. Split Emojis

Screen Shot 2017-04-20 at 5.44.58 PM

This cool snippet shows you how you can split emojis in half using only html and css. With this snippet, you can create hybrid emojis, like a heart that’s half yellow and half green, or a face that’s half happy and half angry.

10. Emoji Alphabet

Screen Shot 2017-04-20 at 5.46.37 PM

This fun snippet uses JavaScript to assign each letter of the alphabet it’s own corresponding emoji, then it provides you with an input field where you can type in characters and emojis will be rendered that are meant to represent those characters — pretty cool to play around with!

 

Leave a reply
this will never be published
@