Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8644

【初心者でもわかる】CSSだけでアイコン画像の色を変える方法

$
0
0

どうも7noteです。cssだけで1枚のアイコン画像を好きな色に変える方法(IEにも対応!!)

IEはどうでもいいから簡単な方法が知りたい方はこちら↓
IEさえ、、IEさえいなければ・・・こんなに便利な機能が・・・

画像の書き出し方をちょっと工夫することで、1枚のアイコン画像の色をCSSだけで自由に変更できる方法があります。

簡単2ステップ

ステップ1

画像を書き出す時に、アイコンの形をそのまま画像として書き出さずに・・・

『アイコンの形をくり抜いた画像を書き出します!!』

こういう画像ではなくて、
noamal.png

真ん中が透明になります。(分かりやすいよう少し色を変えてます)

inversion.png

ステップ2
この画像を任意の場所に設置して、CSSでimgに好きな背景色を入れます。

index.html
<imgsrc="heart.png"alt="ハート"class="heart">
style.css
.heart{background:#fdb126;}

結果

noamal.png

まとめ

画像編集ツール(フォトショップ等)が必要ですが、全ブラウザ対応かつ簡単なのが魅力的。
linear-gradientを使えば単色だけでなくグラデーションにも対応できます。

ao.png
※背景色が違う色に変わる時は画像を作り直さなければいけなくなるので注意!

はたまたjsでアニメーションを入れればカラフルに色が変わるようなことも可能に。

herat.gif

おそまつ!

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ


Viewing all articles
Browse latest Browse all 8644

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>