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

世界的流行のデザイン

DuoToneという単語ご存知でしょうか?

最近いたるところで使われるようになった配色の名称なのですが。

名前は聞いた事がなくても、見たことはきっとあるでしょう。

こんな配色です。

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

2つの色で構成されたこういった画像を見かけた事があるかと思います。

元々は印刷業界や、アパレルなどでよく使われていた配色ですが、

音楽ストリーミングサービスの「Spotify」が火付け役となり、

今やWEB業界のトレンドとして取り入れられているDuoTone。

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

こちらのプラグインを使わせていただきましょう。

【トレンド】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で素材を作成しちゃうのが早そうですね。

最新トレンドに強いAWESOME

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

世界中の情報を毎日収集・分析を繰り返すIT企業AWESOMEだからこそ、

WEB業界に限らず、あらゆる業界の最新トレンドに強いんです!

どんな業種であっても、最新かつ最良の提案をさせていただきます。

お困りの事があればなんでもご相談ください。

Contact

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

Instagram Feed

Load More

Instagram

WEB DIRECTOR

マンノカズミチ

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

他の投稿を見る →