アイコンで進捗％を表示する方法(その2) | ニッティ・グリッティとはマーケティングweb戦略デザイン美容室向け記事 | お役立ち情報 | 岡山のホームページ制作会社。WEB戦略が得意なホームページ成績上げ屋さん！

前回からの続きです。

ここでもういちど、background: conic-gradientについて確認してみましょう

conic-gradientは、下記のような構文になっています

conic-gradient([ from <angle> ]? [ at <position> ]?, <angular-color-stop-list>)

第一引数について

第一引数では、始点の角度、位置をしています。

例えばfrom 60deg at 10% 10% と設定することで、グラデーションは30度の位置から、中心を左から10% 上から10%の位置 に設定されます。

第一引数を指定しないと、0度、centerを指定したことになります。

今回のは指定しbackground: conic-gradient(transparent 50%,red 50%);ていないので、0度、centerです。

第二引数について

第二引数では色を設定します。 始点と終点の最低2種類の色を設定します。

たとえば、conic-gradient(red,orange,yellow,green,blue,indigo,purple);とすると、どうなるでしょうか？

こうなります

https://codepen.io/sungura/full/oNWgBrw

虹色ですね～　均一に割り当てられる感じですね。

それぞれの色の後に角度を指定することもできます。

background: conic-gradient( red 6deg, orange 6deg 18deg, yellow 18deg 45deg, green 45deg 110deg, blue 110deg 200deg, purple 200deg);

さて、それでは今回のコードを見てみましょう！

background: conic-gradient(transparent 50%,red 50%);

これは、周に沿って(0％から)50%まで透明。50％から100%までが赤色ということになります。

例えば、30％であれば、background: conic-gradient(transparent 30%,red 30%);となります

つぎにmix-blend-modeについて確認してみましょう

背景の画像と前景をどのようにミックスするかを設定することができます。

下の表が、その方法なのですが、いろいろありますね。

今回は、mix-blend-mode:screenなので、背景と前景を掛け合わせ、その結果を補完します。この場合、前景は背景色よりも明るくなります。ということですね。

initial：ブレンドモードを設定しないプロパティのデフォルト設定です。
inherit：要素はその親要素からブレンドモードを継承します。
unset：現在のブレンドモードを要素から削除します。

normal: この属性は何のブレンドも適用しません。
multiply: 要素に背景を乗算して、背景色を置き換えます。結果として得られる色は常に背景と同じ濃さになります。
screen：背景と前景を掛け合わせ、その結果を補完します。この場合、前景は背景色よりも明るくなります。

overlay：背景色に応じて前景を乗算またはスクリーンします。ハードライトブレンドモードとは逆の機能です。
darken：前景が暗い場合は背景が前景に置き換えられ、そうでない場合は元のままになります。
lighten：前景が明るくなった部分の背景が前景に置き換えられます。
color-dodge：この属性は、前景の色を反映して背景色を明るくします。
color-burn：この属性は、前景の自然な色を反映して背景を暗くします。
hard-light：前景の色に応じて、この属性は前景を選別または増倍します。

soft-light：前景の色に応じて、前景を暗くしたり明るくしたりします。
difference(差分)：2つの色のうち、最も明るい色から最も暗い色を差し引きます。
exclusion(除外)：差に似ていますが、コントラストが低くなります。
hue(色相)：前景の色相に、背景の彩度と明度を加えた色を作成します。
saturation(彩度)：前景の彩度と、背景の色相と明度を組み合わせた色を作成します。
color：前景の色相と彩度、背景の明度を組み合わせて色を作成します。
luminosity：前景の輝度と、背景の色相と彩度を組み合わせた色を作成します。これは color 属性の逆バージョンです。

さらに続きます…