Filter

filter は多重がけできない？ 例えば下記のような CSS でblurとdrop-shadowを２つ適用しようとしてもうまくいきません。 <img class="cat center dbl-filter" src="/images/site/cat.svg" title="SVGねこ" /> /* ぼかしと影を同時適用できず、最後のフィルタが有効となる */ .dbl-filter { filter: blur(3px); filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.6)); } 最後に定義したフィルタが適用されます。 これはfilterという属性を 2 回定義したことと同じなので、CSS のルールに従って最後に定義されたものが有効になります。 1

filter: blur で画像をぼかす 画像をぼかしてみます。 blur 関数 ねこ画像にblur関数でぼかしをかけてみます。 関数への引数はぼかしの半径です。10px でもかなりボケますね。emや%などの相対指定も可能です。 <img class="blur" src="/images/site/cat.svg" title="SVGねこ" /> /* filterでぼかし */ .filter-blur { filter: blur(10px); } .filter-blur:hover { filter: blur(0px); } filter:blur リファレンス MDN のサイトが参考になります。 blur() ねこ画像 by 素材 Library.

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