【CSS】レビュー★の色域割合をスタイル属性を利用して簡単に実装する

【CSS】レビュー★の色域割合をスタイル属性を利用して簡単に実装する



レビューの評価を★のアイコンを並べて表示する際に、例えば「3.7」のように小数点が含まれる場合どのように設計するか以前考えてみました。

その時は2つのアイコンを重ね合わせて合成する、という手段を考えました。

fontawesomeを使ったハーフスターアイコンを作り方 – モノグサにお灸
参考
fontawesomeを使ったハーフスターアイコンを作り方 – モノグサにお灸

Webアイコンフォントのfontawesomeで、このような半分は黄色で半分はグレーのハーフスターアイコンを作りたいな、と。 そこで真っ先に思い浮かぶのが、 と を「Stacked Icons」で重ねて使う方法です。 し…

fontawesomeを使ったハーフスターアイコンを作り方 – モノグサにお灸 モノグサにお灸

しかし、どうしても同じアイコンを重ね合わせるとエッジが滲んでしまい、「ちょっとだけ」嫌な感じです。

そこでもっと良い方法が無いかと考えて、グラデーションで色域を設定することにしました。

.star-rate{
  background: linear-gradient( to right, #FFB03D 0%, #FFB03D 70%, #A9A9A9 70% );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

これで70%の色域を指定することが出来ます。

しかし、この設定だと割合に応じてクラスを複数用意する必要があるのでとても面倒です。
スタイル属性を直書きすると、

<i class="fa fa-star fa-5x star-rate" style="  background: linear-gradient( to right, #FFB03D 0%, #FFB03D 70%, #A9A9A9 70% );-webkit-background-clip: text;-webkit-text-fill-color: transparent;"></i>

となり、とても冗長になってしまいます。

そこでさらに工夫して、以下のように修正しました。

<i class="fa fa-star fa-5x star-rate" style="--rate: 50%"></i>
.star-rate{
  background: linear-gradient( to right, #FFB03D 0%, #FFB03D var(--rate), #A9A9A9 var(--rate) );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

知らなかったのですが、スタイル属性値に指定した変数をクラスに当てはめることが出来るようです。

Using HTML data-attribute to set CSS background-image url
参考
Using HTML data-attribute to set CSS background-image url

I plan on building a custom photo gallery for a friend and I know exactly how I am going to be producing the HTML, however I am running into a small issue with the CSS.(I would prefer to not have the

Using HTML data-attribute to set CSS background-image url Stack Overflow

この方法は他にも活用できそうです。

今日はここまで

関連する記事



こちらはいかが?


コメントを残す