色違いは必要ない！アイコンはcssで色を変えよう！

コーディング

こんにちは。コーダーのぶんちゃんです。

今日のGoodNewsは、サイト制作には欠かせないアイコン画像のお話です。

矢印のアイコン何個書き出してる？

私がここで示しているアイコン画像とは、ボタン横の矢印や、SNSのアイコンの画像のことです。このようなアイコンはリンクが設定されることも多く、ホバーアニメーションで色が変化する効果を付けることもよくありますよね。

上記のように赤塗りには白い矢印、白塗りには赤い矢印、別の箇所では黒い矢印と、同じ矢印で色違いを何個も書き出したりしていませんか？
それ、1個で大丈夫なんです！！

maskプロパティで色を変える！

アイコンならSVG画像で色を変える方法もありますが、今回はmaskというプロパティをご紹介します。

例えば、このような白のカレンダーアイコンを書き出しています。

ホバーでこのようにゴールドにしたいとき

必要なのは以下の記述です！

&:after {
　content: "";
　width: 20px;
　height: 20px;
　display: block;

　/*ここからが大事*/
　background: rgb(159,133,82);
　mask: url(../img/common/calendar.svg) no-repeat center/contain;
　-webkit-mask: url(../img/common/calendar.svg) no-repeat center/contain;
}

maskで画像の形を切り抜いて、backgroundで色を流し込んでいるイメージです。もちろんbackground-colorで違う色にも変更できます。これなら共通パーツでクラスを分けて色違いを作ることもカンタンにできますね。

これから画像フォルダがすっきりしそうな予感！是非お試しください。

それでは、よいWeb制作を！

この記事をシェアする