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

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

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

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

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

DuoToneをCSSで簡単実装!

colorfilter.cssを使用してDuoToneを実装します

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

colorfilter.css

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

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

使い方はclass指定するだけ

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


<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で簡単再現!波に乗り遅れるな!

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

PR

Instagram Feed

Load More
Something is wrong. Response takes too long or there is JS error. Press Ctrl+Shift+J or Cmd+Shift+J on a Mac.

Instagram

WEB DIRECTOR

マンノカズミチ

バンドマンを経て、台湾で日本語教師をしてましたが、2016年より株式会社AWESOMEにてWEB開発とコンテンツ制作を担当しております。SEO対策と記事執筆が得意分野です。こっそり台湾と日本のハーフです。

他の投稿を見る →