UPDATE：2024.2.9
- CATEGORY
「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（青と赤のデフォルト）
・Spotify
・Vintage
・Blade Runner
・Law & Order
・Moody
・Ursula
・Random
・Spotify
・Vintage
・Blade Runner
・Law & Order
・Moody
・Ursula
・Random
「Default」でもすでにかっこいいイメージが表示されますし、
「Random」で気に入った画像イメージが表示されるまでクリックする、でもいいですね。
とても簡単におしゃれな「Duotone」が生成されます。
画像が作成できたら「Generate HTML+CSS」をクリックすればHTMLとCSSが表示されます。
あとはこれをコピペして使用すればOK！
最後に
すでにDuotoneに加工された画像をそのまま使うのも簡単なのですが、
CSSで作成すれば後で画像を変更する必要が出た時も、差し替えるだけで対応ができるなど修正が容易になります。
機会があれば使ってみたいジェネレータでした◎
・Zoom
・Spacing（間隔）
・Blur（ぼかし）
・Image Opacity（画像の不透明度）
・Image Color（画像の色）
・Image Blend Mode（ブレンドモード）
・Background Color（背景の色）