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


お役立ち
ニッティ・グリッティの
お役立ち情報
アイコンで進捗%を表示する方法(その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:現在のブレンドモードを要素から削除します。
multiply: 要素に背景を乗算して、背景色を置き換えます。結果として得られる色は常に背景と同じ濃さになります。
screen:背景と前景を掛け合わせ、その結果を補完します。この場合、前景は背景色よりも明るくなります。
darken:前景が暗い場合は背景が前景に置き換えられ、そうでない場合は元のままになります。
lighten:前景が明るくなった部分の背景が前景に置き換えられます。
color-dodge:この属性は、前景の色を反映して背景色を明るくします。
color-burn:この属性は、前景の自然な色を反映して背景を暗くします。
hard-light:前景の色に応じて、この属性は前景を選別または増倍します。
difference(差分):2つの色のうち、最も明るい色から最も暗い色を差し引きます。
exclusion(除外):差に似ていますが、コントラストが低くなります。
hue(色相):前景の色相に、背景の彩度と明度を加えた色を作成します。
saturation(彩度):前景の彩度と、背景の色相と明度を組み合わせた色を作成します。
color:前景の色相と彩度、背景の明度を組み合わせて色を作成します。
luminosity:前景の輝度と、背景の色相と彩度を組み合わせた色を作成します。これは color 属性の逆バージョンです。
さらに続きます…
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
お役立ち情報