1. TOP
  2. >技術メモ>
  3. CSSのfilterプロパティを利用したフィルター効果一覧

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

技術メモ, CSS

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

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

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

<div class="sample">
フィルター効果を適用したい要素を記述
</div>

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

ぼかし blur

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

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

明度 brightness

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

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

コントラスト contrast

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

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

ドロップシャドウ drop-shadow

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

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

グレースケール

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

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

セピア sepia

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

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

色相 hue-rotate

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

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

彩度 saturate

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

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

階調 invert

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

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

透明度 opacity

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

.sample {
filter: opacity(20%);
}
.sample-10a{filter: opacity(20%);}
CSSフィルター効果サンプル
.sample-10b{filter: opacity(60%);}
CSSフィルター効果サンプル
ホームページ制作ならRU DESIGN
「スタードメイン」は、年額100円からの独自ドメイン+無料サーバーも付いてきます。
WordPressも使えるので、練習も兼ねてお手軽にサイト運営ができちゃいます。


ドメイン取得は同じところで取得しておくと便利ですよ。
お名前.comは1円から購入(1年間)できるドメインがあるので、いろいろと便利で経済的です。

関連記事

【WordPress】古い投稿を現在の日付で再投稿してくれるプラグイン「Republish Old Posts」
2023/08/31
注意:パーマリンクに日付が含まれている場合は、このプラグインを使用しないでください。SEOプラグイン「All in One SEO」との相性もよくないそうです。...
Crayon Syntax Highlighterの代替プラグイン「Enlighter」
2023/06/05
 ソースコードをきれいに表示させるのに役立っていた「Crayon Syntax Highlighter」ですが、更新も止まったままの状態で再開の目処はなさそうで...
WordPressの文字列を一括変換する便利なプラグイン「Search Regex」
2023/05/26
 WordPressのサイト内の文字列を一括置換・一括変換するのに便利なプラグインをご紹介します。ドメインを変更した場合だったり、「WordPress」を「ワー...
ワードプレスの記事をまとめて削除に便利!「Bulk Delete」
2023/04/25
 ワードプレスで大量の記事を削除したいときに便利なのが「Bulk Delete」というプラグインです。数十記事ではチェックボックスで一括選択削除で十分ですが、こ...
Twitterに過去記事を自動投稿するプラグイン「Revive Old Posts」
2023/04/18
 TwitterなどSNSへの自動投稿プラグイン「Revive Old Posts」をご紹介します。記事投稿時に自動でツイートしてくる「WP to Twitte...