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