{"id":358210,"date":"2021-12-02T07:42:37","date_gmt":"2021-12-02T15:42:37","guid":{"rendered":"https:\/\/css-tricks.com\/?p=358210"},"modified":"2021-12-02T07:42:39","modified_gmt":"2021-12-02T15:42:39","slug":"fractional-svg-stars-with-css","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/fractional-svg-stars-with-css\/","title":{"rendered":"Fractional SVG stars with CSS"},"content":{"rendered":"\n<p>Some &#x2b50;&#xfe0f;<meta charset=\"utf-8\">&#x2b50;&#xfe0f;<meta charset=\"utf-8\">&#x2b50;&#xfe0f;<meta charset=\"utf-8\">&#x2b50;&#xfe0f;<meta charset=\"utf-8\">&#x2b50;&#xfe0f; star rating systems aren&#8217;t always exactly even stars. Say you want to support rating something 2.25 stars. To do that you could &#8220;fill&#8221; the shape of the stars partially. I like <a href=\"https:\/\/samuelkraft.com\/blog\/fractional-svg-stars-css\" rel=\"noopener\">this idea<\/a> by Samuel Kraft. The tricky part is:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-style-default is-layout-flow wp-block-quote-is-layout-flow\"><p>The final step is making the overlay div only affect the star SVGs beneath, not the background. We can do this by using the CSS&nbsp;<code>mix-blend-mode<\/code>&nbsp;property with the&nbsp;<code>color<\/code>&nbsp;value.<\/p><\/blockquote>\n\n\n\n<p>Check out Samuel&#8217;s post for an interactive demo and deeper information, but I thought I&#8217;d give it a crack myself to get a feel for the idea:<\/p>\n\n\n\n<!--more-->\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_poWvyXQ\" src=\"\/\/codepen.io\/anon\/embed\/poWvyXQ?height=450&amp;theme-id=1&amp;slug-hash=poWvyXQ&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed poWvyXQ\" title=\"CodePen Embed poWvyXQ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>The idea is that this is an overlay on top of the stars. You can&#8217;t see it and it doesn&#8217;t affect the stars because it&#8217;s either <code>black<\/code> or <code>white<\/code> and <code>mix-blend-mode: color;<\/code> means that overlay will only effect elements that do have color. <\/p>\n\n\n\n<p>There are loads of ways to do rating stars, for the record. <a href=\"https:\/\/css-tricks.com\/five-methods-for-five-star-ratings\/#method-5-using-unicode-symbols\">We covered five of them<\/a> a little while back. One rather clever method in there is using unicode stars (like, as text), then filling their background with <code>-webkit-background-clip: text;<\/code> which means you can partially fill them (like with a <a href=\"https:\/\/css-tricks.com\/books\/greatest-css-tricks\/hard-stop-gradients\/\">hard-stop<\/a> <code>linear-gradient()<\/code>). Solid trickery, that.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Some &#x2b50;&#xfe0f;&#x2b50;&#xfe0f;&#x2b50;&#xfe0f;&#x2b50;&#xfe0f;&#x2b50;&#xfe0f; star rating systems aren&#8217;t always exactly even stars. Say you want to support rating something 2.25 stars. To do that you could &#8220;fill&#8221; the shape of the stars partially. I like this idea by Samuel Kraft. The tricky part is: The final step is making the overlay div only affect the star SVGs [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":358303,"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":[17],"tags":[1552,469],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/Screen-Shot-2021-12-02-at-7.42.15-AM.png?fit=1908%2C894&ssl=1","jetpack-related-posts":[{"id":330726,"url":"https:\/\/css-tricks.com\/debugging-css\/","url_meta":{"origin":358210,"position":0},"title":"Debugging CSS","date":"December 14, 2020","format":false,"excerpt":"High five to Ahmad Shadeed for releasing his new book, Debugging CSS. I think that's a neat angle for a book on CSS. There are a ton of books on the general subject of CSS already, so not that they can't be fresh takes on that, but this feels equally\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/Screen-Shot-2020-12-10-at-2.43.21-PM.png?fit=1200%2C626&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":351302,"url":"https:\/\/css-tricks.com\/grainy-gradients\/","url_meta":{"origin":358210,"position":1},"title":"Grainy Gradients","date":"September 13, 2021","format":false,"excerpt":"Browse through Dribbble or Behance, and you\u2019ll find designers using a simple technique to add texture to an image: noise. Adding noise makes otherwise solid colors or smooth gradients, such as shadows, more realistic. But despite designers\u2019 affinity for texture, noise is rarely used in web design. In this article,\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/noisy-gradient.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":342448,"url":"https:\/\/css-tricks.com\/how-to-create-css-charts-with-interesting-shapes-glyphs-and-emoji\/","url_meta":{"origin":358210,"position":2},"title":"How to Create CSS Charts With Interesting Shapes, Glyphs and Emoji","date":"June 21, 2021","format":false,"excerpt":"Let\u2019s forego the usual circles and bars we typically see used in charts for more eccentric shapes. With online presentations more and more common today, a quick way to spruce up your web slides and make them stand out is to give the charts a shapely makeover \ud83e\ude84 I\u2019ll show\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/chart-shapes.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":267485,"url":"https:\/\/css-tricks.com\/css-techniques-and-effects-for-knockout-text\/","url_meta":{"origin":358210,"position":3},"title":"CSS Techniques and Effects for Knockout Text","date":"March 6, 2018","format":false,"excerpt":"Knockout text is a technique where words are clipped out of an element and reveal the background. In other words, you only see the background because the letters are knocking out holes. It\u2019s appealing because it opens up typographic styles that we don\u2019t get out of traditional CSS properties, like\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/02\/knockout-text-background-clip.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":295620,"url":"https:\/\/css-tricks.com\/a-color-picker-for-product-images\/","url_meta":{"origin":358210,"position":4},"title":"A Color Picker for Product Images","date":"September 17, 2019","format":false,"excerpt":"Sounds kind of like a hard problem doesn't it? We often don't have product shots in thousands of colors, such that we can flip out the with . Nor do we typically have products in a vector format such that we can apply SVG fills to them and such. There\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/product-color-picker.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":292151,"url":"https:\/\/css-tricks.com\/five-methods-for-five-star-ratings\/","url_meta":{"origin":358210,"position":5},"title":"Five Methods for Five-Star Ratings","date":"July 5, 2019","format":false,"excerpt":"In the world of likes and social statistics, reviews are a very important method for leaving feedback. Users often like to know the opinions of others before deciding on items to purchase themselves, or even articles to read movies to see, or restaurants to dine. Developers often struggle with reviews\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/07\/star-pattern.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/358210"}],"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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=358210"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/358210\/revisions"}],"predecessor-version":[{"id":358258,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/358210\/revisions\/358258"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/358303"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=358210"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=358210"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=358210"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}