
前回の記事CSSのみでテキストや画像にぼかし効果を付けるでは、ぼかし(ブラー)効果について書きました。今回はその他のフィルター効果をご紹介します。
HTMLでの記述はこんな感じです。
1 2 3 4 5 |
<div class="sample"> フィルター効果を適用したい要素を記述 </div> |
この画像をサンプルにフィルター効果をご確認ください。
ぼかし blur
ぼかし効果はpxの単位で調整可能です。
1 2 3 4 5 |
.sample { filter: blur(5px); } |
.sample-1a{filter: blur(5px);}


.sample-1b{filter: blur(10px);}


明度 brightness
明度は0〜1で調節できます。%でも指定可能。
1 2 3 4 5 |
.sample { filter: brightness(30%); } |
.sample-2a{filter: brightness(30%);}


.sample-2b{filter: brightness(80%);}


コントラスト contrast
コントラストは0〜1で調節できます。%でも指定可能。
1 2 3 4 5 |
.sample { filter: contrast(30%); } |
.sample-3a{filter: contrast(30%);}


.sample-3b{filter: contrast(80%);}


ドロップシャドウ drop-shadow
ドロップシャドウは左から『xの位置』『yの位置』『ぼかしの大きさ』『シャドウの色』を指定します。
1 2 3 4 5 |
.sample { filter: drop-shadow(2px 2px 4px #000); } |
.sample-4a{filter: drop-shadow(2px 2px 4px #000);}


.sample-4b{filter: drop-shadow(4px 4px 6px #ff0);}


グレースケール
グレースケールは0〜1で調節できます。%でも指定可能。
1 2 3 4 5 |
.sample { filter: grayscale(50%); } |
.sample-5a{filter: grayscale(50%);}


.sample-5b{filter: grayscale(100%);}


セピア sepia
色相はdegを指定。180degで反転、360degで元の色相になります。
1 2 3 4 5 |
.sample { filter: sepia(50%); } |
.sample-6a{filter: sepia(50%);}


.sample-6b{filter: sepia(100%);}


色相 hue-rotate
色相はdegを指定。180degで反転、360degで元の色相になります。
1 2 3 4 5 |
.sample { filter: hue-rotate(180deg); } |
.sample-7a{filter: hue-rotate(180deg);}


.sample-7b{filter: hue-rotate(270deg);}


彩度 saturate
彩度は100%で元の彩度になります。サンプルの様に100%以上の指定も可能。0%でモノクロの画像になります。
1 2 3 4 5 |
.sample { filter: saturate(50%); } |
.sample-8a{filter: saturate(50%);}


.sample-8b{filter: saturate(150%);}


階調 invert
階調は0%を基準に100%で反転します。
1 2 3 4 5 |
.sample { filter: invert(80%); } |
.sample-9a{filter: invert(80%);}


.sample-9b{filter: invert(100%);}


透明度 opacity
透明度は100%を基準に0%で完全透過になります。
1 2 3 4 5 |
.sample { filter: opacity(20%); } |
.sample-10a{filter: opacity(20%);}


.sample-10b{filter: opacity(60%);}


「スタードメイン」は、年額100円からの独自ドメイン+無料サーバーも付いてきます。
WordPressも使えるので、練習も兼ねてお手軽にサイト運営ができちゃいます。
ドメイン取得は同じところで取得しておくと便利ですよ。
お名前.comは1円から購入(1年間)できるドメインがあるので、いろいろと便利で経済的です。
WordPressも使えるので、練習も兼ねてお手軽にサイト運営ができちゃいます。

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

関連記事
2023/03/02
noteにAI機能が追加されたみたいです。note AIアシスタント(β)と言う名称で、現在は一部のクリエイター向けにのみ提供されている機能になります。ついで...
2022/09/17
ワードプレスの管理画面の投稿一覧に、最終更新日を表示させる方法です。 記事によっては何度もリライトを繰り返す場合もあります。特定の記事であれば、検索で探したり該...
2022/09/09
Wordpressの管理画面にある投稿一覧のワード検索にて、カスタムフィールドの内容をを含める方法です。カスタムフィールドを修正したいけど、記事が大量にあったり...
2022/09/03
ワードプレスのアーカイブやカテゴリーページで、特定のカテゴリーのみ並び順を変更したい場合のやり方です。 <?php query_posts($query_...
2022/08/24
ブログなどで「この記事は○年前の内容です」など表示されるのを見かけたことはありませんか? 技術や情報系の記事では、最新の情報では無いと現在では役に立たないことも...