DuoToneという単語ご存知でしょうか？
最近いたるところで使われるようになった配色の名称なのですが。
名前は聞いた事がなくても、見たことはきっとあるでしょう。
こんな配色です。
２つの色で構成されたこういった画像を見かけた事があるかと思います。
元々は印刷業界や、アパレルなどでよく使われていた配色ですが、
音楽ストリーミングサービスの「Spotify」が火付け役となり、
今やWEB業界のトレンドとして取り入れられているDuoTone。
今回はそんんDuoToneをCSSで簡単に再現していきたいと思います。
目次
DuoToneをCSSで簡単実装！
colorfilter.cssを使用してDuoToneを実装します
こちらのCSSファイルを導入するだけで、とても簡単にイメージファイルにDuoToneフィルターをかける事が可能になります。
CSSのブレンドモードを利用しているため、一部ブラウザ（IEなど）では動作しません。
ChromeやFireFoxなどのモダンブラウザ専用とはなってしまいますが、
そんなハイカラじゃないブラウザは捨ててしまう気持ちで臨みましょう
使い方はclass指定するだけ
<div class="blend-blue">
<img src="img.jpg"/>
</div>
class名には他にも
- blend-blue-dark
- blend-orange-dark
- blend-purple-dark
など色々ありますので。色々試してみてくださいね。
Photoshopで加工しちゃいたい人
そんなCSSでまどろっこしくしたくない。
photoshopで直接加工しちゃいたい！というDuoToneジャンキーのあなたは、こちらの動画を見ながら作って見てはいかがでしょうか。
画像が大量にあって、全部同じ色調でいくのであれば、CSS。
そうでないのであればPhotoshopで素材を作成しちゃうのが早そうですね。
CSSで簡単にDuoToneを使いましょう
DuoToneを効果的に使用すれば、それだけで簡単におしゃれな雰囲気を手に入れる事ができます。
CSSだけで簡単に再現できるのはとても嬉しいですね。
画像点数が多く、一つ一つPhotoshopで加工するのは面倒！なんて時にサクッと行えるので、是非実践してみてくださいね。
