【CSS】videoにドットフィルターをかけよう

2024 4/11

2022年8月23日 2024年4月11日

動画に点々のような、網目のようなエフェクトがかかっているのを見たことはあるでしょうか？

正式な名称は知りませんが、僕は勝手にドットフィルターと呼んでいます。

今回はそんなドットフィルターをCSSだけで実装する方法を解説します。

ドットフィルターってどんなの？

それはどんなんやねん？ということでまずはサンプルをご覧ください。

See the Pen Untitled by yukiwebcreate (@Yukiwebcreate) on CodePen.

くらげさんが泳いでいる動画のうえに、

小さい黒い点が網目状に配置されており、フィルターがかかっております。

なんか見たことあるって感じですよね。

動画自体がそういうエフェクトをかけてある場合もありますが、

なんとコレがCSSだけで表現できちゃうんですよね。

ドットフィルターは、目が細かく、粗い画質に対する違和感を軽減してくれる効果もあります。

記事の最後で、実際に低画質の動画を使ってフィルターのありなしを比べてみましょう。

まずは実装方法の話を進めたいと思います。

具体的な実装方法と解説

上記のサンプルから、HTMLとCSSを取り出してみます。

HTML

<div class="video-wrapper">
  <video src="https://web-den.com/wp-content/uploads/2022/08/jellyfish.mp4" poster="" muted autoplay loop playsinline></video>
</div>

CSS

.video-wrapper {
  postion: relative;
  width: 100%;
  height: 100vh;
}
.video-wrapper:after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  background-image: radial-gradient(black 20%, transparent 20%),
    radial-gradient(black 20%, transparent 20%);
  background-size: 6px 6px;
  background-position: 0 0, 3px 3px;
}
video {
  position: absolute;
}

HTMLは超シンプル。

重要なCSS部分を丁寧に解説していきます。

まず、フィルターそのものは:after（疑似要素）を使って表現するので

フィルターの詳細設定はafterの中に書きます。

CSSの下記の部分では

.video-wrapper:after {
  /* 省略 */
  background-color: rgba(0, 0, 0, 0.5);
  background-image: radial-gradient(black 20%, transparent 20%),
    radial-gradient(black 20%, transparent 20%);
  background-size: 6px 6px;
  background-position: 0 0, 3px 3px;
}

background-imageがドットの形を形成し、

background-sizeがドットのサイズを決め、

background-positionでドットの位置を決めています。

①background-imageの中では、

radial-gradientでドットの設定が書かれています。

※radial-gradientとは、円形にグラデーションをかけるCSS関数です

https://developer.mozilla.org/ja/docs/Web/CSS/gradient/radial-gradient

また、その設定値として、

(black 20%, transparent 20%)というのが２回書かれています。

これは、黒い点が２段、位置をずらして配置することで網の目を表現するため、

最低二つの点が必要なので２回書いています。

②background-sizeでは、