ローディング中

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

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

sample2

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

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

目次

DuoToneをCSSで簡単実装!

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

SONY DSC

colorfilter.css

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

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

使い方はclass指定するだけ

sample1


<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を使いましょう

pasona_15_tp_v

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

ホームページ・デザイン制作のご相談・ご依頼は

079-451-5881

68ED4C65-BA1E-46D0-A7AC-B9869923C696 Created with sketchtool. A07C553F-CF16-4B7D-94FE-D36AE0A6297D Created with sketchtool. 37B7D8F4-7A18-4725-9EC6-595ABDF69D64 Created with sketchtool. 95DFB680-1EDF-4199-BC4A-BB6752EBA23C Created with sketchtool. 02DDF754-E1DB-4EF2-B6BB-C884722938C4 Created with sketchtool. NEW! 1A95E369-6469-4C46-B38F-F83410B928B0 Created with sketchtool. Group 5Group 2Group 4Group 3E4FC8CF2-721D-4699-8162-18E886C432C1 Created with sketchtool.