3

I am using a rating system that used to display Font Awesome star (and half star) icons, which I recently switched to headphone icons. Font awesome provides a half-star icon but doesn't provide a half-headphone icon. So I had to use CSS to only display half an icon (full-opacity) and the other half with less opacity. This is how I did it:

background: linear-gradient(to right, rgb(206, 55, 72) 50%, rgba(206, 55, 72, 0.28) 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

Example (see the red icons below for a rating of 4.5 headphones): enter image description here

Problem is, I also use this same rating in other places, where the font color is different. But because I'm defining a specific RGB value, it's using the same color across the entire site for my half-headphone.

Check it out:

enter image description here

Can I "inherit" the color while using linear-gradient and only affect the opacity of the icon?

Such as:

background: linear-gradient(to right, inherit 50%, rgba(inherit, 0.28) 50%);

Or is there another approach to this?

Thank you.

anthonyCam
  • 360
  • 1
  • 4
  • 21
  • 1
    You *could* do it with CSS custom properties (variables) but you'd need three of them and it's get messy. – Paulie_D Mar 01 '18 at 22:18
  • 3
    `CurrentColor` could work for the first stop but not the second. – Paulie_D Mar 01 '18 at 22:19
  • ..but this might be useful - https://stackoverflow.com/questions/23569441/is-it-possible-to-apply-css-to-half-of-a-character/23569891#23569891 – Paulie_D Mar 01 '18 at 22:21
  • @Paulie_D thanks for the link, I saw that earlier but I was hoping for another option as that plugin looks like overkill for such a basic need. But the plugin does look awesome... I'll have to check that out in the meantime. Thanks brother. – anthonyCam Mar 01 '18 at 22:31
  • i agree with @Paulie_D, the best way here is CSS variabes – Temani Afif Mar 01 '18 at 22:34
  • Thanks guys, i'll look into that. – anthonyCam Mar 02 '18 at 20:19

0 Answers0