「Duotone」画像をCSSで！『CSS Duotone Generator』

「Duotone」の画像が簡単にCSSで作成できるジェネレータ『CSS Duotone Generator』を紹介します。

「Duotone」とは？

「Duo（ペア）」＋「tone（色）」を組み合わせた言葉で、
写真などの画像を2色に配色したハーフトーンデザインを指す言葉です。

このような配色のデザイン、とてもおしゃれでかっこいいですよね。
こんな配色がCSSで簡単に作成できるのが『CSS Duotone Generator』です。

『CSS Duotone Generator』の使い方

まずは『CSS Duotone Generator』にアクセスします。

ジェネレータでは以下の項目を設定することが可能です。

これら項目を組み合わせて、イメージ通りの画像を作成しましょう。

また、「Premade settings」（プリセット）として以下の内容が用意してあります。

「Default」でもすでにかっこいいイメージが表示されますし、
「Random」で気に入った画像イメージが表示されるまでクリックする、でもいいですね。
とても簡単におしゃれな「Duotone」が生成されます。

画像が作成できたら「Generate HTML+CSS」をクリックすればHTMLとCSSが表示されます。
あとはこれをコピペして使用すればOK！

最後に

すでにDuotoneに加工された画像をそのまま使うのも簡単なのですが、
CSSで作成すれば後で画像を変更する必要が出た時も、差し替えるだけで対応ができるなど修正が容易になります。

機会があれば使ってみたいジェネレータでした◎