{"id":320156,"date":"2020-09-02T11:22:04","date_gmt":"2020-09-02T18:22:04","guid":{"rendered":"https:\/\/css-tricks.com\/?p=320156"},"modified":"2020-09-02T11:22:05","modified_gmt":"2020-09-02T18:22:05","slug":"excluding-emojis-from-transparent-text-clipping","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/excluding-emojis-from-transparent-text-clipping\/","title":{"rendered":"Excluding Emojis From Transparent Text Clipping"},"content":{"rendered":"\n<p>CSS-Tricks has this pretty cool way of styling hovered links. By default, the text is a fairly common blue. But hover of the links, and they&#8217;re filled with a linear gradient.<\/p>\n\n\n\n<!--more \\Read more-->\n\n\n\n<figure class=\"wp-block-jetpack-image-compare\"><div class=\"juxtapose\" data-mode=\"horizontal\"><img loading=\"lazy\" decoding=\"async\" id=\"320159\" src=\"https:\/\/i1.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/css-tricks-links-default.png?ssl=1\" alt=\"\" width=\"541\" height=\"233\" class=\"image-compare__image-before\"\/><img loading=\"lazy\" decoding=\"async\" id=\"320161\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/css-tricks-links-hover.png?resize=541%2C233&#038;ssl=1\" alt=\"\" width=\"541\" height=\"233\" class=\"image-compare__image-after\" data-recalc-dims=\"1\"\/><\/div><figcaption>&#x1f60d;<\/figcaption><\/figure>\n\n\n\n<p>Pretty neat, right? And the trick isn&#8217;t all that complicated. On hover&#8230;<\/p>\n\n\n\n<ul><li>give the link a <a href=\"https:\/\/css-tricks.com\/snippets\/css\/css-linear-gradient\/\">linear gradient<\/a> background,<\/li><li>clip the background to the text, and<\/li><li>give the text a transparent fill so the background shows through.<\/li><\/ul>\n\n\n\n<p>It looks like this in CSS:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">a {\n  color: #007db5;\n}\n\na:hover {\n  background: linear-gradient(90deg,#ff8a00,#e52e71);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n}<\/code><\/pre>\n\n\n\n<p>Notice the <code>-webkit-<\/code> prefix, which is required for now. There&#8217;s a little more to the actual implementation here on CSS-Tricks, but this little bit gets us what we&#8217;re looking for.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_oNxwXwo\" src=\"\/\/codepen.io\/anon\/embed\/oNxwXwo?height=350&amp;theme-id=1&amp;slug-hash=oNxwXwo&amp;default-tab=result\" height=\"350\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed oNxwXwo\" title=\"CodePen Embed oNxwXwo\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>But that&#8217;s not the point here. Just the other day, <a href=\"https:\/\/twitter.com\/bradwestfall\" rel=\"nofollow noopener\">Brad Westfall<\/a> phoned in to let us know that this technique also takes effect on emojis which, like any other text, gets a transparent fill on hover.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_JjXyOLZ\" src=\"\/\/codepen.io\/anon\/embed\/JjXyOLZ?height=350&amp;theme-id=1&amp;slug-hash=JjXyOLZ&amp;default-tab=result\" height=\"350\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed JjXyOLZ\" title=\"CodePen Embed JjXyOLZ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>He noticed it happening on a link in one of our posts.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1126\" height=\"106\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-11.50.51-AM.png?resize=1126%2C106&#038;ssl=1\" alt=\"\" class=\"wp-image-320184\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-11.50.51-AM.png?w=1126&amp;ssl=1 1126w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-11.50.51-AM.png?resize=300%2C28&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-11.50.51-AM.png?resize=1024%2C96&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-11.50.51-AM.png?resize=768%2C72&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-11.50.51-AM.png?resize=1000%2C94&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Not the worst thing. And it totally makes sense. I mean, <a href=\"https:\/\/en.wikipedia.org\/wiki\/Emoji#Font_format_support\" rel=\"noopener\">an emoji is a glyph<\/a> like any other text in a font file, right? They just happen to be a color font and take on the form of an image. Of course they would be treated like any other glyph in a situation like this where we&#8217;re hallowing out the fill color.<\/p>\n\n\n\n<p>But if keeping the color in tact on emojis is a requirement, that can be resolved by wrapping the emoji in a span and setting its fill back to its initial state.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_wvGeKyW\" src=\"\/\/codepen.io\/anon\/embed\/wvGeKyW?height=350&amp;theme-id=1&amp;slug-hash=wvGeKyW&amp;default-tab=result\" height=\"350\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed wvGeKyW\" title=\"CodePen Embed wvGeKyW\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>But who wants to write a span every time an emoji happens to pop up in a link? &#x1f44e;<\/p>\n\n\n\n<p>If you&#8217;re looking for a CSS solution, we&#8217;re kinda out of luck. That said, the CSS Fonts Module Level 4 specification includes a definition for a proposed <code><a href=\"https:\/\/drafts.csswg.org\/css-fonts-4\/#font-variant-emoji-prop\" rel=\"noopener\">font-variation-emoji<\/a><\/code> property. However, there&#8217;s not much on it (that I can find) at the moment and it doesn&#8217;t appear to be designed for this sort of thing, A quick skim of <a href=\"https:\/\/github.com\/w3c\/csswg-drafts\/issues\/1092\" rel=\"noopener\">some discussion<\/a> related to the proposal suggests it&#8217;s more about the way some browsers or systems automatically convert Unicode to emoji and how to control that behavior.<\/p>\n\n\n\n<p>There&#8217;s also the proposed definition of <code><a href=\"https:\/\/drafts.csswg.org\/css-fonts-4\/#propdef-font-palette\" rel=\"noopener\">font-palette<\/a><\/code> in the same draft spec which seems like a way to control color fonts \u2014 that&#8217;s what emojis are at the end of the day. But this isn&#8217;t the solution, either.<\/p>\n\n\n\n<p>It seems the only way to prevent an emoji&#8217;s fill from being changed without a span is some sort of JavaScript solution. Look at services like WordPress, Dropbox, Facebook and Twitter. They all implement their own custom emoji sets. And what do they use? Images.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"843\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-11.32.07-AM.png?resize=1024%2C843&#038;ssl=1\" alt=\"\" class=\"wp-image-320177\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-11.32.07-AM.png?resize=1024%2C843&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-11.32.07-AM.png?resize=300%2C247&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-11.32.07-AM.png?resize=768%2C632&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-11.32.07-AM.png?resize=1536%2C1264&amp;ssl=1 1536w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-11.32.07-AM.png?resize=2048%2C1686&amp;ssl=1 2048w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-11.32.07-AM.png?resize=1000%2C823&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>Yeah, along with a <em>lot<\/em> of divs and such!<\/figcaption><\/figure>\n\n\n\n<p>That would be one way to do it. If the emoji is replaced with an image (an SVG in this specific example), then that would certainly exclude it from being filled along with the link text.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_poywgBB\" src=\"\/\/codepen.io\/anon\/embed\/poywgBB?height=350&amp;theme-id=1&amp;slug-hash=poywgBB&amp;default-tab=result\" height=\"350\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed poywgBB\" title=\"CodePen Embed poywgBB\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Or, hey, why not prevent ourselves from getting into the situation at all and place that dang thing <strong>outside of the link?<\/strong><\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_mdPwepd\" src=\"\/\/codepen.io\/anon\/embed\/mdPwepd?height=350&amp;theme-id=1&amp;slug-hash=mdPwepd&amp;default-tab=result\" height=\"350\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed mdPwepd\" title=\"CodePen Embed mdPwepd\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>That&#8217;s probably the route we should have taken all along. But an emoji might not come at the beginning or end of a link, but somewhere in the middle. It just underscores the point that there are cases where having some sort of control here could come in handy.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS-Tricks has this pretty cool way of styling hovered links. By default, the text is a fairly common blue. But hover of the links, and they&#8217;re filled with a linear gradient.<\/p>\n","protected":false},"author":2508,"featured_media":271124,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[1421,1373,1331],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/emoji-trio.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":317525,"url":"https:\/\/css-tricks.com\/bold-on-hover-without-the-layout-shift\/","url_meta":{"origin":320156,"position":0},"title":"Bold on Hover&#8230; Without the Layout Shift","date":"July 27, 2020","format":false,"excerpt":"When you change the font-weight of a font, the text will typically cause a bit of a layout shift. That's because bold text is often larger and takes up more space. Sometimes that doesn't matter, like a vertical stack of links where the wider\/bolder text doesn't push anything anyway. Sometimes\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/bold-no-shifty-shift.gif?fit=600%2C300&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":266368,"url":"https:\/\/css-tricks.com\/css-basics-styling-links-like-boss\/","url_meta":{"origin":320156,"position":1},"title":"CSS Basics: Styling Links Like a Boss","date":"February 15, 2018","format":false,"excerpt":"You are probably well acquainted with how links looks without any styling at all. That blue. That underline. That's a link in it's purest form. But what if we want to change things up a bit? Perhaps blue doesn't work with your website's design. Maybe you have an aversion to\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/02\/linky-boo.gif?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":363619,"url":"https:\/\/css-tricks.com\/when-to-avoid-css-text-decoration-shorthand\/","url_meta":{"origin":320156,"position":2},"title":"When to Avoid the text-decoration Shorthand Property","date":"February 25, 2022","format":false,"excerpt":"In my recent article about CSS underline bugs in Chrome, I discussed text-decoration-thickness and text-underline-offset, two relatively new and widely-supported CSS properties that give us more control over the styling of underlines. Let me demonstrate the usefulness of text-decoration-thickness on a simple example. The Ubuntu web font has a fairly\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/text-decoration-none-devtools.png?fit=1098%2C534&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":5475,"url":"https:\/\/css-tricks.com\/link-underlines-grow-to-backgrounds-on-hover\/","url_meta":{"origin":320156,"position":3},"title":"Link Underlines Grow to Backgrounds on Hover","date":"February 4, 2010","format":false,"excerpt":"A reader recently emailed in asking if I knew a way to have links be underlined, and then have the underline grow upwards on hover and turn into a background\/highlight effect. I ended up trying three different things, with varying levels of success.","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/technique1linkcover.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":276507,"url":"https:\/\/css-tricks.com\/having-fun-with-link-hover-effects\/","url_meta":{"origin":320156,"position":4},"title":"Having fun with link hover effects","date":"September 21, 2018","format":false,"excerpt":"A designer I work with was presenting comps at a recent team meeting. She had done a wonderful job piecing together the concept for a design system, from components to patterns and everything in between that would make any front-end developer happy. But there was a teeny tiny detail in\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/link-effectz-featured.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":449,"url":"https:\/\/css-tricks.com\/how-to-make-walking-links\/","url_meta":{"origin":320156,"position":5},"title":"How To Make Walking Links","date":"January 3, 2008","format":false,"excerpt":"While screwing around at the ol' Zen Garden, I ran into a pretty neat little effect for underlined links. We've talked about this before, but never incorporating animation. A \"walking link\" is a link with a dotted underline created by a background image. Upon rollover or active state, the dots\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/320156"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=320156"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/320156\/revisions"}],"predecessor-version":[{"id":320311,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/320156\/revisions\/320311"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/271124"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=320156"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=320156"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=320156"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}