CSSのfilterプロパティを利用したフィルター効果一覧 - RU DESIGN

CSSのfilterプロパティを利用したフィルター効果一覧

技術メモ, CSS

2022/07/04
2022/07/06
CSSのfilterプロパティを利用したフィルター効果一覧

前回の記事CSSのみでテキストや画像にぼかし効果を付けるでは、ぼかし(ブラー)効果について書きました。今回はその他のフィルター効果をご紹介します。

HTMLでの記述はこんな感じです。

この画像をサンプルにフィルター効果をご確認ください。
CSSフィルター効果サンプル

ぼかし blur

ぼかし効果はpxの単位で調整可能です。

.sample-1a{filter: blur(5px);}
CSSフィルター効果サンプル
.sample-1b{filter: blur(10px);}
CSSフィルター効果サンプル

明度 brightness

明度は0〜1で調節できます。%でも指定可能。

.sample-2a{filter: brightness(30%);}
CSSフィルター効果サンプル
.sample-2b{filter: brightness(80%);}
CSSフィルター効果サンプル

コントラスト contrast

コントラストは0〜1で調節できます。%でも指定可能。

.sample-3a{filter: contrast(30%);}
CSSフィルター効果サンプル
.sample-3b{filter: contrast(80%);}
CSSフィルター効果サンプル

ドロップシャドウ drop-shadow

ドロップシャドウは左から『xの位置』『yの位置』『ぼかしの大きさ』『シャドウの色』を指定します。

.sample-4a{filter: drop-shadow(2px 2px 4px #000);}
CSSフィルター効果サンプル
.sample-4b{filter: drop-shadow(4px 4px 6px #ff0);}
CSSフィルター効果サンプル

グレースケール

グレースケールは0〜1で調節できます。%でも指定可能。

.sample-5a{filter: grayscale(50%);}
CSSフィルター効果サンプル
.sample-5b{filter: grayscale(100%);}
CSSフィルター効果サンプル

セピア sepia

色相はdegを指定。180degで反転、360degで元の色相になります。

.sample-6a{filter: sepia(50%);}
CSSフィルター効果サンプル
.sample-6b{filter: sepia(100%);}
CSSフィルター効果サンプル

色相 hue-rotate

色相はdegを指定。180degで反転、360degで元の色相になります。

.sample-7a{filter: hue-rotate(180deg);}
CSSフィルター効果サンプル
.sample-7b{filter: hue-rotate(270deg);}
CSSフィルター効果サンプル

彩度 saturate

彩度は100%で元の彩度になります。サンプルの様に100%以上の指定も可能。0%でモノクロの画像になります。

.sample-8a{filter: saturate(50%);}
CSSフィルター効果サンプル
.sample-8b{filter: saturate(150%);}
CSSフィルター効果サンプル

階調 invert

階調は0%を基準に100%で反転します。

.sample-9a{filter: invert(80%);}
CSSフィルター効果サンプル
.sample-9b{filter: invert(100%);}
CSSフィルター効果サンプル

透明度 opacity

透明度は100%を基準に0%で完全透過になります。

.sample-10a{filter: opacity(20%);}
CSSフィルター効果サンプル
.sample-10b{filter: opacity(60%);}
CSSフィルター効果サンプル
ホームページ制作ならRU DESIGN
ドメイン取得は同じところで取得しておくと便利ですよ。 お名前.comは1円から購入できるドメインがあるので、いろいろと便利で経済的です。

関連記事

Welcart2.6にアップデートして画像が表示されなくなった場合の対処
2022/07/27
Welcart2.6から商品画像の登録方法の仕様変更があり、今まで不満だった内容が改善されました。それに伴い旧バージョンからアップデートすると、画像が表示されな...
overflow-wrapではみ出す半角英数字やURLを自動改行
2022/07/23
URLなど半角英数字の長すぎて要素からはみ出てしまい、デザインが崩れてしまうことがあります。レスポンシブサイトだと、モバイルなど表示幅が狭いと突き抜けて見た目も...
WordPressの最新記事を判別して表示を変更
2022/07/22
トップページやサイドバーなどに記事一覧を表示させている事が多いかと思いますが、今回は一覧の最初の記事などを変化させる方法をご紹介します。 WordPressのル...
ワードプレスの全記事を一覧表示
2022/07/21
ワードプレスに投稿された全記事を一覧で表示するやり方です。 固定ページを作成 全記事一覧を表示させる固定ページを作成しましょう。 category.phpやpa...
サイトマップのエラーが出た時の対処について
2022/07/16
ワードプレスでサイトマップを確認した際に、下記のようなエラーが出た場合の対処法です。 This page contains the following erro...