Every now and again it’s useful to display single-colour emoji on a web page; all the colours in those little emoji symbols are nice and all, but it does occasionally make your formal document look a bit like an angry fruit salad. I’ve seen a technique for this before (in particular from Bram van Damme, but searching for “emoji silhouettes” finds lots of other people doing it too), where you set the text colour to transparent and then set a text-shadow, and you’re done. This is nice, but it doesn’t work for me in Firefox, sadly; if you set the text color to transparent then indeed your emoji disappear, but if you set a text shadow they come right back, and in full colour.
So, I do it a different way, akin to the ancient and well-known image replacement method; set a text-indent on the element containing your emoji and then reverse that text indent in the text-shadow‘s offset-x position. So you set text-indent to something massive and negative like -2000em so it’s definitely off the page to the left, and then a text-shadow (which, we recall, is specified as text-shadow: offset-x offset-y blur-radius color) of plus 2000em to put the text shadow back where the original characters were before they were indented miles to the left.
<style>
span.emoji {
text-indent: -2000em;
text-shadow: 2000em 0 0 red;
}
</style>
...
<p>And here are some emoji silhouettes:
<span class="emoji">🚀 🎭 </span>.
Aren't they nice!<p>
And here are some emoji silhouettes: 🚀 🎭 . Aren’t they nice!
You have to wrap your Unicode characters in their own little span, which is a bit unfortunate, but then you have to with other approaches too. (And your span has to be display: inline-block or block too, otherwise the text-indent gets ignored.) Anyway, not earth-shattering, but I quite like it.
After this was originally posted, Garrett LeSage suggested a different approach, using CSS filters. These are quite a lot more powerful than one might think. His approach applies a set of CSS filters in concert, like this:
Set the contrast on your emoji to high with CSSfilter: contrast(0): 🚀 🎭
Use a sepia(100%) filter to colorise: 🚀 🎭
Set the colour to one of your choice with hue-rotate(180deg): 🚀 🎭
And finally pump up the saturation with saturate(1000%): 🚀 🎭
The up-side of this approach is that it’s one line of CSS; you don’t need to set inline-block, or worry about defining a width on your “emoji” element. The down-side is… well, you may be thinking, “where do we specify that we want the final colour of the emoji to be red in that code above?” And you would be right. You have to do some crazy maths calculations to actually work out how to set your emoji to the colour you want. Barrett Sonntag wrote an interactive filter generator to calculate the set of filters required to set your colour to the thing you choose, based on some Stack Overflow answers. I think this downside is enough to lean me away from this method, personally, but it’s another approach if you prefer it!