この記事は【2022年7月6日】が最後の更新のため、記事の内容が古い可能性があります。
前回の記事CSSのみでテキストや画像にぼかし効果を付けるでは、ぼかし(ブラー)効果について書きました。今回はその他のフィルター効果をご紹介します。
HTMLでの記述はこんな感じです。
<div class="sample"> フィルター効果を適用したい要素を記述 </div>
この画像をサンプルにフィルター効果をご確認ください。
ぼかし blur
ぼかし効果はpxの単位で調整可能です。
.sample { filter: blur(5px); }
.sample-1a{filter: blur(5px);}
.sample-1b{filter: blur(10px);}
明度 brightness
明度は0〜1で調節できます。%でも指定可能。
.sample { filter: brightness(30%); }
.sample-2a{filter: brightness(30%);}
.sample-2b{filter: brightness(80%);}
コントラスト contrast
コントラストは0〜1で調節できます。%でも指定可能。
.sample { filter: contrast(30%); }
.sample-3a{filter: contrast(30%);}
.sample-3b{filter: contrast(80%);}
ドロップシャドウ drop-shadow
ドロップシャドウは左から『xの位置』『yの位置』『ぼかしの大きさ』『シャドウの色』を指定します。
.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で調節できます。%でも指定可能。
.sample { filter: grayscale(50%); }
.sample-5a{filter: grayscale(50%);}
.sample-5b{filter: grayscale(100%);}
セピア sepia
色相はdegを指定。180degで反転、360degで元の色相になります。
.sample { filter: sepia(50%); }
.sample-6a{filter: sepia(50%);}
.sample-6b{filter: sepia(100%);}
色相 hue-rotate
色相はdegを指定。180degで反転、360degで元の色相になります。
.sample { filter: hue-rotate(180deg); }
.sample-7a{filter: hue-rotate(180deg);}
.sample-7b{filter: hue-rotate(270deg);}
彩度 saturate
彩度は100%で元の彩度になります。サンプルの様に100%以上の指定も可能。0%でモノクロの画像になります。
.sample { filter: saturate(50%); }
.sample-8a{filter: saturate(50%);}
.sample-8b{filter: saturate(150%);}
階調 invert
階調は0%を基準に100%で反転します。
.sample { filter: invert(80%); }
.sample-9a{filter: invert(80%);}
.sample-9b{filter: invert(100%);}
透明度 opacity
透明度は100%を基準に0%で完全透過になります。
.sample { filter: opacity(20%); }
.sample-10a{filter: opacity(20%);}
.sample-10b{filter: opacity(60%);}
関連記事
2024/01/29
WordPressのバージョンによって使用可能なPHPのバージョンは異なってきます。PHPのバージョンによっては、ワードプレスが正常に動作しなかったり、テンプ...
2023/10/08
Googleが提供しているChrome OS(クローム・オーエス)は、Linuxをベースとしたオペレーティングシステム(OS)の1つ。その中でPCやMACでも...
2023/10/07
古いMacに最新のmacOSをインストールするプロジェクト「OpenCore Legacy Patcher」(OCLP)は、Appleが提供する最新のmacO...
2023/08/31
注意:パーマリンクに日付が含まれている場合は、このプラグインを使用しないでください。SEOプラグイン「All in One SEO」との相性もよくないそうです。...
2023/06/05
ソースコードをきれいに表示させるのに役立っていた「Crayon Syntax Highlighter」ですが、更新も止まったままの状態で再開の目処はなさそうで...