ロゴ

モザイクのかけ方について知った件

cssのプロパティについて学習していて最近知ったのが、モザイクのかけ方です。

HTML

    
<div class="backcontent">
<p>テスト</p>
<img src="https://nakahaku.com/img/nakahaku.svg" width="80">
</div>

CSS

    
.backcontent {
  filter: blur(4px);
}

ブラウザでの見え方

テスト

cssのfilterプロパティを詳しく調べると、様々な機能があって面白いですね。

グレースケール

HTML

    
<div class="backcontent2">
<p>テスト</p>
<img src="https://nakahaku.com/img/nakahaku.svg" width="80">
</div>

CSS

    
.backcontent2 {
  filter: grayscale(80%);
}

ブラウザでの見え方

テスト

色の反転

HTML

    
<div class="backcontent3">
<p>テスト</p>
<img src="https://nakahaku.com/img/nakahaku.svg" width="80">
</div>

CSS

    
.backcontent3 {
  filter: hue-rotate(90deg);
}

ブラウザでの見え方

テスト

彩度の強調

HTML

    
<div class="backcontent4">
<p>テスト</p>
<img src="https://nakahaku.com/img/nakahaku.svg" width="80">
</div>

CSS

    
.backcontent4 {
  filter: saturate(4);
}

ブラウザでの見え方

テスト