動画にかけるドットフィルターをCSSのみで実装する

更新日 : 2021.04.04

動画にかけるドットフィルターの画像
Share
0
0
5

Webサイトに動画を設置する機会は多くなり、メインビジュアルの背景でループさせているサイトをよく見かけます。その際高画質で見せたいところなのですが、モバイルを考慮するとどうしてもサイズを小さくしないといけなくなり画質が悪くなります。その時にドットフィルターをかけると画質の粗さを目立たなくなるのでよく実装しています。今回はCSSのみでドットフィルターを実装する方法を紹介します。

See the Pen
Movie filter
by Kobayashi (@Pulp_Kobayashi)
on CodePen.

<div class="movie">
	<video src="movie.mp4" loop autoplay muted playsinline></video>
</div>
.movie {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

.movie::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 50%;
	height: 100vh;
	background-color: rgba(0,0,0,0.5);
	background-image: radial-gradient(#111 30%, transparent 31%), radial-gradient(#111 30%, transparent 31%);
	background-size: 4px 4px;
	background-position: 0 0, 2px 2px;
}

擬似要素.movie::afterにドットフィルターを描写してフィルターをかけます。

background-color: rgba(0,0,0,0.5)でフィルター全体に半透明の背景色を指定します。
円形グラデーションbackground-image: radial-gradientでドットの指定をしています。

background-size: 4px 4pxの半分サイズをbackground-position: 0 0, 2px 2px;2px部分に指定。これでドットが敷き詰められた状態で表示されます。

全体の横半分のサイズwidth: 50%にしているのはデモで違いが分かりやすくしているためなので、実際に実装する際は100%指定にしてください。

人気記事

  1. 【保存版】CSSのみのボタンデザイン!私が現場で使ってきたボタンアイデア30選の画像

    【保存版】CSSのみのボタンデザイン – 私が現場で使ってきたボタンアイデア30選

  2. 現場で使えるFlexboxレイアウト12選。実際に使ってきたレイアウトを紹介しますの画像

    現場で使えるFlexboxレイアウト12選。実際に使ってきたレイアウトを紹介します

  3. Web制作の現場で使えるWebサービス15選!無料で使えるサービスを集めてみた

    Web制作の現場で使えるWebサービス15選!無料で使えるサービスを集めてみた

  4. CSS見出しデザイン21スタイル - シンプルな見出しデザインをご紹介の画像

    CSS見出しデザイン21選。現場ですぐ使える見出しデザインをご紹介

  5. ボタンやテキストリンク、hoverスタイルをCSSのみで19パターン実装するの画像

    CSSのみで実装するボタン、テキストリンク、hoverスタイル19選