CSSで画像をハーフトーン（網点）に加工する

CSSで画像をハーフトーン（網点）に加工する画像の中の色や明るさの濃淡を、様々な大きさのドットで表現するハーフトーン。日本語では網点とも言うようです。どこかレトロで、アメコミタッチなこのハーフトーンを、CSSで表現してみます！ グラフィックツールを使わず、CSS だけでひとつの画像をこんな感じに加工してみます。 1. 画像を div に入れておくまずは下準備。「halftone」というクラス名をつけた div に画像を入れておきます。今回は猫ちゃんの画像を用意しました。 HTML <div class="halftone"> <img src="cat.jpg" alt="" /> </div> 2. CSS で水玉模様を作成「halftone」クラスに ::after で疑似要素を作成。 position を使って猫ちゃん画像の上に重ねます。水玉模様は円形グラデーションで作成します。この

[localnavi]

よくもまあ、こんなスゴいことを思い付いて実現するものだ。

[iww]

おもしろい