現状のHPを無料で診断いたします。
お気軽にお問い合わせください。
お役立ち
ニッティ・グリッティの
お役立ち情報
アイコンで進捗％を表示する方法(その1)
UPDATE :
投稿者 : ニッティ・グリッティ
アイコンで進捗情報など表示できたらわかりやすいですよね。
画像でやってもいいのですが、CSSでやる方法が、ここで紹介されていました
やりかたを見てみましょう！
まず、チャートに寸法を与え、その中の2つのdivを同じグリッドセルに割り当てて重ねます。
この2つのdivは、例えばpositionプロパティを使って、他の方法で重ねることもできます。
上のHTMLをもう一度見てみましょう。片方のdivには、五角形のシンボルがあります。
私は「絵文字と記号」キーボードを使ってこの記号を追加しましたが、 divの中でpentagonのHTMLエンティティ値である ⬠を使っても可能です。
シンボルが追加されたdivは、CSSのフォントプロパティと希望のチャートカラーでスタイリングされます。
十分な大きさで、中央に配置されています。 HTMLの2番目のdivには、円錐形のグラデーションの背景画像を入れています。
グラデーションのパーセンテージは、チャートの視覚的な値を表しています。 同じdivには、mix-blend-mode: screen;があります。
こんなふうにするんですね。
ポイントは、
background: conic-gradient(
transparent 50%,
green 50% );
/*円錐状のグラデーションから成る画像を生成*/
mix-blend-mode: screen;
ですね
2つ目のdivの背景に円錐状のグラディエーションをかけて、mix-blend-modeで重ね合わせているんですね。
mix-blend-modeはグラディエーションと画像を重ね合わせて表示するのによく使われています。
次回に続きます…
ランキング
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
お役立ち情報
