filter は多重がけできない？ 例えば下記のような CSS でblurとdrop-shadowを２つ適用しようとしてもうまくいきません。 /* ぼかしと影を同時適用できず、最後のフィルタが有効となる */ .dbl-filter { filter: blur(3px); filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.6)); } 最後に定義したフィルタが適用されます。 これはfilterという属性を

filter: blur で画像をぼかす 画像をぼかしてみます。 blur 関数 ねこ画像にblur関数でぼかしをかけてみます。 関数への引数はぼかしの半径です。10px でもかなりボケますね。emや%などの相対指定も可能です。 /* filterでぼかし */ .filter-blur { filter: blur(10px); } .filter-blur:hover { filter: blur(0px); } filter:blur リファレンス

CSS だけで、画像に沿って影をつけたい！ box-shadow しか知らないあなたへ つい最近まで私もそうでしたが、img タグの画像に影を付けるときはbox-shadowを使っていました。 皆さんご存知の通り、box-shadowでは画像の内容がどうであれ、画像の外枠にしか影が付きません。 しかし最近、いろいろ SVG や透過 PNG 画像を扱うようなり、画像の形を活かして影をつけたい要望も増えてきました。 そこで今回は画像の形で影を落とす、CSS のfilter: drop-shadow関数を使ってみます。 まずは box-shadow のおさらい