サイトアイコン APPSWINGBY Developers Blog

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

Takahashi

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

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%);
css filterの種類一覧

グローバル値

filter: inherit;
filter: initial;
filter: unset;

css filterについてご紹介しましたが、これらのfilterがtailwindcssでサポートされるとのことですので、秒読み段階に入った新しいバージョンのtailwindcssのリリースを楽しみに待つことにしましょう。

今日も一日頑張りましょう！

Have a great day!

モバイルバージョンを終了