tailwindcssのcss filterサポートが完了。リリースが秒読み段階に！css filterの使い方をおさらい

tailwindcssのcss filterサポートが完了しました。とadamwathan氏がツイートしています。リリースは秒読み段階に入ったようです。

Alright CSS filter support for Tailwind is done 🥳https://t.co/kPZrNI9yz5

Going to try and get v2.1 out tomorrow! Wish my docs-typing-fingers luck 😅
— Adam Wathan (@adamwathan) April 4, 2021

css filterとは？

css filterとは、CSSのプロパティのひとつで、css filterを使うと、画像の彩度や明度、コントラストを変更することができる他、画像をぼかしやセピア色に変更するなど画像のグラフィック効果を操作する際に使われます。

まるで、photoshopで加工したかのような画像操作がCSSで手軽にできるのが css filterです。

もちろん、photoshop程の機能や精度があるわけではありませんので、あくまで簡易なものになりますが、元画像を直接編集することなく開発中のウェブページの画面上で画像のテイストをテストするができるので、とても便利で使えるのがこのcss filterです。

img {filter: contrast(5 0%)}

上記の例では、filterの後ろに”contrast”を使いましたが、この部分はフィルターの種類で、開発者の望む画像フィルターを入れることによって動作することができます。括弧でくくられている％は、フィルターの強度、つまり効果の強さです。また、filterはひとつの画像に対し同時に複数使うことができる他、マウスオーバー時にのみfilterをかけることもできます。

css filterの構文

filter: url(“filters.svg#filter-id”);

filter: filter-function(値);

css filterの種類

css filterの種類を表にまとめておきます。

種類	効果	構文の例
blur	ぼかし	filter: blur(1px);
brightness	明度	filter: brightness(0.2);
contrast	コントラスト	filter: contrast(30%);
drop-shadow	ドロップシャド	filter: drop-shadow(4px 5px 6px blue);
grayscale	グレースケール	filter: grayscale(70%);
hue-rotate	色相	filter: hue-rotate(80deg);
invert	階調	filter: invert(90%);
opacity	画像の透明度	filter: opacity(10%);
saturate	彩度	filter: saturate(20%);
sepia	セピア	filter: sepia(30%);