ホームページ成績上げ屋さんです!

ホームページ成績

上げ屋さんです!

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

NITTY GRTTY
NITTY GRITTY

お役立ち

ニッティ・グリッティの

お役立ち情報

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

UPDATE :

投稿者 : ニッティ・グリッティ

ニッティ・グリッティ

前回からの続きです。


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


さらに続きます…







無料診断

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

tel

お問い合わせ

tel


086-959-4456

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

BLOG

お役立ち情報

  • 雑に選んでいませんか?フォントでデザインに表情をつけよう!

    2024.12.03

    CATEGORY
    お役立ち情報

  • 【初心者さん必見!】使えると超おしゃれ!「ブレンドツール」とは!~イラレの便利機能紹介Part6~

    2024.12.02

    CATEGORY
    お役立ち情報

  • テンプレートで簡単!?もう悩まないプレゼン資料作成!

    2024.11.28

    CATEGORY
    お役立ち情報

  • ホームページ集客のコツとは?コンサルティング会社が紹介!

    2023.08.21

    CATEGORY
    お役立ち情報

  • IT導入補助金のご案内

    2023.08.07

    CATEGORY
    お役立ち情報

  • 【3分でわかる】Threads(スレッズ)とは?登録方法やTwitterとの違いをご紹介

    2023.07.07

    CATEGORY
    お役立ち情報

ホームページ改善勉強会プロ経営者トレーニング交流会毎月テーマを変えて懇親会費用だけでまるっと回収
© 2025 NITTY GRITTY All Rights Reserved.
  • tline
  • tfacebook
  • tinst
  • tyoutube
無料診断バナー無料診断バナー