その他

2023.12.28

色違いは必要ない!アイコンは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制作を!

この記事をシェアする

関連記事

  • 2024.03.22

    Webデザインにおけるアニメーションについて考えてみた〜実例編〜

    その他

  • 2024.03.12

    Webデザインにおけるアニメーションについて考えてみた〜メリット・デメリット編〜

    その他

  • 2023.12.30

    案件を切り替える拡張機能「Project Manager」が便利!

    その他

おすすめ記事

  • 2021.02.26

    SEO対策に効果的!?headに入れるメタタグの種類と使い方

    その他

  • 2022.07.26

    【超便利】プレミアプロとアフターエフェクトの連携で快適な動画編集術をご紹介

    その他

  • 2023.12.01

    クレイモーフィズムとは?

    その他

TAG

×