こんにちは。
デザイントランスメディアでは、WEBページのクリエイティブの作成を徐々にphotoshopからXDに移行しています。
それに伴って、コーダー側では今までほぼ使ったことのなかったSVGファイルを触るようになりました。
この記事では、CSSのmaskプロパティを使用したSVGファイルの色変更の方法をご紹介します。
maskプロパティはbackgroundプロパティと同じように使うことができます。
See the Pen
eYBYRLO by izanami (@izanami)
on CodePen.
maskプロパティで画像を指定し、backgroundプロパティで色を変えています。
この方法だと、PNGやJPEGで書き出した画像のように色ごとに画像を用意する必要がなく、また、SVGのコードを直接貼り付けた場合のようにコードが長くなることもないのでとても便利です。
ちなみに、上記コードではmaskプロパティを「image」「position」「size」「repeat」と値ごとに分けて記述していますが、こちらもbackgroundプロパティと同様に一行で記述することも可能です。
See the Pen
qBqBXWr by izanami (@izanami)
on CodePen.
ボタンやアイコン等で複数のカラーバリエーションを用意しなければならないときに大変役立つプロパティです。
以上、CSSのmaskプロパティのご紹介でした。
Font Awesome https://fontawesome.com/
