CSSだけで画像にモザイク処理を施すデザインのサンプル
CSSだけで画像にモザイク処理を施すデザイン方法の紹介です。
CSSでモザイクというと、単純なぼかし処理というイメージですが、今回はブロック型のモザイクというのか方眼型のモザイクというのか、はたまたピクセルモザイクなのか、タイル調モザイクかマス目モザイクなのか、全くわかりませんでしたので検索してみました。
そのタイプのぼかし処理は英語では「pixelization」、日本語では「ピクセル化」。
または、そのまま「モザイク」という言葉がそれを指すようです。
それをCSSだけでの実装を紹介してくれているサイトさんが見つからなかったので、CSSだけでは できそうでできないのか、以前気になっていたのですが、これは以外に簡単にできました。
※画像ファイルはそのままですので、セキュリティ面やプライバシー保護を目的の利用には全く使えませんのでご注意下さい
画像にモザイク処理を施す（ピクセル化）
CSSだけで画像にモザイク処理を施したサンプルコードです。
よく見かけるCCSでのぼかし処理で使われるblur()が、指定したぼかし量が一定値を超えると範囲内の色の中間色の一色になるのを利用して作成しています。
See the Pen CSS | image pixelization by yochans (@yochans) on CodePen.
サンプルでは部分的にモザイク処理をかけていますが、画像全体にかける事も可能です。
HTMLでは、モザイクのマス目ひとつひとつを作成する必要があるため、ひとマスの幅10pxとして200pxの範囲にモザイクをかけるので<p>タグを横一列分20個配置します。
サンプルでは横200pxの7列分の140個の<p>タグを記述しています。
<div class="container">
<img class="background-image" src="https://1-notes.com/wp-content/uploads/2021/02/cat2.jpg" />
<div class="mosaic">
<p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>
<p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>
<p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>
<p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>
<p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>
<p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>
<p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>
</div>
</div>.container{
position: relative;
width: 500px;
max-width: 100%;
margin: 10px auto;
}
.background-image{
width: 100%;
vertical-align: top;
}
.mosaic{
position: absolute;
top: 40%;
left: 30%;
width: 200px;
display: flex;
flex-wrap: wrap;
}
.mosaic p{
width: 10px;
height: 10px;
margin: 0;
padding: 0;
backdrop-filter: blur(24px);
}画像部分は<img>タグを利用していますが「background-image」での指定でも問題ありません。
画像下の余白を消すのに「vertical-align: top;」も指定しています。
.background-image{
width: 100%;
vertical-align: top;
}モザイク全体の位置は「position: absolute;」を利用して「top」「left」で指定しています。
もし、画像全体にモザイク処理を行う場合は「top」「left」ともに「0」を指定して左上隅を開始位置にします。
モザイク全体の幅を「width」で指定、高さは指定せずマス目の量に委ねています。
マス目部分を<p>タグにしていますので「display: flex;」で横並びにして「flex-wrap: wrap;」で折り返しています。
.mosaic{
position: absolute;
top: 40%;
left: 30%;
width: 200px;
display: flex;
flex-wrap: wrap;
}「.mosaic」内の<p>タグ全てに「backdrop-filter」でぼかし処理（blur）を指定します。
blur()は、指定したぼかし量が一定値を超えると範囲内の色の中間色の一色になります。
これを利用して<p>タグ全て、それぞれの中間色に変更しています。
.mosaic p{
width: 10px;
height: 10px;
margin: 0;
padding: 0;
backdrop-filter: blur(24px);
}※filter処理を数多く実行することになりますので、表示は早いですが、それなりに負荷がかかっているものと思われますので、一部の遊び要素としてしか活用できなさそうです。
サイト内で多用する場合は、完成したものをJavaScriptかなにかで画像ファイルとして生成したほうが良いかもしれません。
画像にモザイク処理を施す（全体ぼかし）
ついでに、よくあるCSSで実装する画像にぼかし処理を施したサンプルコードも紹介しておきます。
See the Pen CSS | image blur by yochans (@yochans) on CodePen.
<div class="container">
<img class="background-image" src="https://1-notes.com/wp-content/uploads/2021/02/cat2.jpg" />
<div class="mosaic"></div>
</div>単純に「blur」で画像をぼかすだけならHTML、CSSともにピクセル版のものよりシンプルに記述できます。
開始位置や範囲も指定しやすいですし、やはり負荷もこちらの方が軽そうです。
.container{
position: relative;
width: 500px;
max-width: 100%;
margin: 10px auto;
}
.background-image{
width: 100%;
vertical-align: top;
}
.mosaic{
position: absolute;
top: 40%;
left: 30%;
width: 200px;
height: 100px;
backdrop-filter: blur(6px);
}猫さん、勝手にモザイクにしてごめんよ。