tel.0120-622835

営業時間/10:00〜18:00 
定休日/土日祝日

トップページ > ブログ > 「Duotone」画像をCSSで!『CSS Duotone Generator』

BLOG

ブログ

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』にアクセスします。


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

・画像のアップロード
・Zoom
・Spacing(間隔)
・Blur(ぼかし)
・Image Opacity(画像の不透明度)
・Image Color(画像の色)
・Image Blend Mode(ブレンドモード)
・Background Color(背景の色)
これら項目を組み合わせて、イメージ通りの画像を作成しましょう。



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

・Default(青と赤のデフォルト)
・Spotify
・Vintage
・Blade Runner
・Law & Order
・Moody
・Ursula
・Random


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


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



最後に


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

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

Happiness in Design

シアワセをデザインする会社

営業ゼロで年間600件以上
お問い合わせをいただいている
ノウハウを惜しみなく。

アプリコットデザインには創業当初から営業マンはいません。
創業当初からWEBを活用することに重点を置いて、これまで試行錯誤してきました。その結果、年間600件以上の問い合わせををこのホームページから得ています。ホームページという集客ツールを提供している私たち自身が、自社のホームページで集客できないのでは、お客様に自信を持ってオススメすることはできません。自社の実験から「WEBを活用して集客するためのノウハウを蓄積」した上で、誰よりもホームページの素晴らしさを知り、自信をもってお客様にご提供していきたいと考えます。

VIEW MORE

CONTACT

お問い合わせ・ご相談は
お気軽にどうぞ。

tel.0120-622835

営業時間/10:00〜18:00 
定休日/土日祝日

プロジェクト

それぞれの
らしさ溢れる日常を。

カフェ、トリミングサロン、ネイルサロン、スクール「tone village(トーンビレッジ)」

カフェ、トリミングサロン、ネイルサロン、スクール「tone village(トーンビレッジ)」

カフェ/ドッグサロン/
ネイルサロン/スクール

tone village

We're open.

採用情報

recruit info

豊かで彩りのある社会をつくる!

私たちは仕事を通して、一人でも多くの人が未来に対する希望を描けるような、そんなワクワクする社会をつくっていきたいと思っています。

VIEW MORE