最近、CSSのfilterを使って、HTMLの色を動的に変更しようと試みることがありまして、デモページを作って、改めて使用できる関数を確認しました。
※ SVGフィルターは試してません
※ 上限はある程度適当に決めています
DEMO
記述順
今回はフィルターをアルファベット順に掛けているのですが、フィルターを掛ける順序通りに加工されていくので記述順はとても重要です。
こちらの例だと、
左は影を落とした後に半透明に、右は半透明にしたあと影を落としていますが、結果が異なります。
実戦で使用する際は記述順にも注意を払って書きましょう。
トランジションの検証
また、transitionの検証のために、
- hoverのときにdrop-shadowを掛ける
- transitionでfilterを指定する
を試してみましたが、transitionも効きました。
👆 赤い四角の上にマウスを持ってくると、フィルターを使ったdrop-shadowが掛かります。
