【トレンド】DuoToneをCSSで簡単再現！波に乗り遅れるな！

m.k

8年前

DuoToneという単語ご存知でしょうか？
最近いたるところで使われるようになった配色の名称なのですが。
名前は聞いた事がなくても、見たことはきっとあるでしょう。
こんな配色です。

２つの色で構成されたこういった画像を見かけた事があるかと思います。
元々は印刷業界や、アパレルなどでよく使われていた配色ですが、
音楽ストリーミングサービスの「Spotify」が火付け役となり、
今やWEB業界のトレンドとして取り入れられているDuoTone。

今回はそんんDuoToneをCSSで簡単に再現していきたいと思います。

DuoToneをCSSで簡単実装！

こちらのCSSファイルを導入するだけで、とても簡単にイメージファイルにDuoToneフィルターをかける事が可能になります。
CSSのブレンドモードを利用しているため、一部ブラウザ（IEなど）では動作しません。
ChromeやFireFoxなどのモダンブラウザ専用とはなってしまいますが、

そんなハイカラじゃないブラウザは捨ててしまう気持ちで臨みましょう


<div class="blend-blue">
    <img src="img.jpg"/>
</div>

class名には他にも

など色々ありますので。色々試してみてくださいね。

そんなCSSでまどろっこしくしたくない。
photoshopで直接加工しちゃいたい！というDuoToneジャンキーのあなたは、こちらの動画を見ながら作って見てはいかがでしょうか。

画像が大量にあって、全部同じ色調でいくのであれば、CSS。
そうでないのであればPhotoshopで素材を作成しちゃうのが早そうですね。

DuoToneを効果的に使用すれば、それだけで簡単におしゃれな雰囲気を手に入れる事ができます。
CSSだけで簡単に再現できるのはとても嬉しいですね。
画像点数が多く、一つ一つPhotoshopで加工するのは面倒！なんて時にサクッと行えるので、是非実践してみてくださいね。