https://www.clairecodes.com/categories/emoji/ Recent content in Emoji on clairecodes Hugo -- gohugo.io en-gb Fri, 26 Apr 2019 11:48:09 +0100 https://www.clairecodes.com/blog/2019-04-26-styling-list-bullets-with-emoji// Fri, 26 Apr 2019 11:48:09 +0100 https://www.clairecodes.com/blog/2019-04-26-styling-list-bullets-with-emoji// The available styles of bullet points for HTML unordered lists <ul> are limited. Using CSS, they can be changed to something more exciting, like emoji! 🎉👯‍♂️✨ In this post, I’ll show you two methods to replace them: @counter-style, which is concise and flexible (but your browser probably doesn’t support it), and the more tried-and-tested technique of using the ::before pseudo-element. We will transform an unordered list with unstyled counters from this: https://www.clairecodes.com/blog/2018-10-24-missing-emoji// Wed, 24 Oct 2018 22:30:05 +0100 https://www.clairecodes.com/blog/2018-10-24-missing-emoji// It’s happened to all of us: you’re reading an article online or a message from a friend on your phone, and where the author intended to display an emoji, all you see is an empty rectangle. This is your device’s way of saying it doesn’t have support for that emoji. Why is an emoji missing on my operating system? This is very complex (and interesting!) subject so I’m going to try and give a high-level overview. https://www.clairecodes.com/blog/2018-10-11-emoji-silhouettes// Thu, 11 Oct 2018 21:38:16 +0100 https://www.clairecodes.com/blog/2018-10-11-emoji-silhouettes// To change the colour of text with CSS, we can simply use the colour CSS property. However, this doesn’t work on emoji characters. But by using the background-clip property, it’s possible to fill the whole emoji shape with a colour, or gradient. This enables us to create text effects like this: .silhouette-one { font-size: 24px; display: inline-block; background: -webkit-linear-gradient(to right, #ffea00, #f50057); background: linear-gradient(to right, #ffea00, #f50057); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } 🐘 ☘️ ⭐️ TL;DR The CSS required to create the silhouettes above looks like this: