今回はウェブサイトに表示する画像の見た目を簡単に変える「CSSフィルター」の話です。
CSSのfilter関数でウェブページ上の画像に見た目上でフィルターをかけることができることはご存知かと思いますが、何をどの値にすると見え方がどのように変わるかを目視確認できるインタラクティブなツールを用意しておきましたので、「どうだったっけ？」と思ったらお使いください。
| opacity | % | ||
| brightness | % | ||
| contrast | % | ||
| grayscale | % | ||
| saturate | % | ||
| sepia | % | ||
| hue-rotate | deg | ||
| invert | % | ||
| blur | % | ||
| drop-shadow | x | px | |
| y | px | ||
| z | px | ||
| color |