アイコンで進捗%を表示する方法(その2) | お役立ち情報 | 岡山のホームページ制作会社。WEB戦略が得意なホームページ成績上げ屋さん!

NITTY GRTTY
NITTY GRITTY

お役立ち

ニッティ・グリッティの

お役立ち情報

アイコンで進捗%を表示する方法(その2)

青木

UPDATE :

投稿者 : AOKI THISHIO

aoki_icon

前回からの続きです。


ここでもういちど、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 属性の逆バージョンです。


さらに続きます...







aoki_icon

この記事を書いた人 Who wrote this blog

AOKI THISHIO

カヌーの事業化を考えながら旭川を流れていたところ、
小笠原社長に遭遇しニッティ・グリッティに参加。

プロフィール

無料診断

現状のHPを無料で診断いたします。
お気軽にお問い合わせください。

tel

お問い合わせ

tel


086-959-4456

受付時間 10:00〜17:00定休日/土日・祝日

BLOG

お役立ち情報

© 2021 NITTY GRITTY All Rights Reserved.
WEB GROW
WEB戦略を成功させる
システムできました。

自社で驚くほど簡単に更新・運用ができる!

セキュリーティー万全なWEBの内製化システム

ホームページ改善勉強会 ホームページ改善勉強会 ホームページで失敗しないためのノウハウをセミナー限定で完全公開
© 2021 NITTY GRITTY All Rights Reserved.
無料診断バナー 無料診断バナー