{"id":2385,"date":"2017-04-24T20:53:29","date_gmt":"2017-04-24T20:53:29","guid":{"rendered":"http:\/\/cssreset.com\/?p=2385"},"modified":"2017-04-24T20:53:29","modified_gmt":"2017-04-24T20:53:29","slug":"top-10-css-snippets-for-emojis","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/top-10-css-snippets-for-emojis\/","title":{"rendered":"Top 10 CSS Snippets for Emojis"},"content":{"rendered":"

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.<\/p>\n

1. Facebook Emoji Reactions<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

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..<\/p>\n

2. Emoji Toggles<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

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.<\/p>\n

3. CSS Emojis<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

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.<\/p>\n

4. Interactive Emoji<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

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.<\/p>\n

5. Emoji Hats<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

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?<\/p>\n

6. Emoji Cursor<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

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.<\/p>\n

7. Coloring Emojis<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

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.<\/p>\n

8. Twemoji<\/a><\/p>\n

\"Screen<\/a><\/p>\n

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.<\/p>\n

9. Split Emojis<\/a><\/p>\n

\"Screen<\/a><\/p>\n

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.<\/p>\n

10. Emoji Alphabet<\/a><\/p>\n

\"Screen<\/a><\/p>\n

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!<\/p>\n

 <\/p>\n

Share and Enjoy !<\/h3>
0<\/span><\/span>Shares<\/small><\/div>
<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n

Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":2398,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[6,1],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2385"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=2385"}],"version-history":[{"count":3,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2385\/revisions"}],"predecessor-version":[{"id":2400,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2385\/revisions\/2400"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/2398"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=2385"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=2385"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=2385"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}