Topic

Filter

A collection of 3 issues

CSS filterで複数の効果

filter は多重がけできない? 例えば下記のような CSS でblurとdrop-shadowを2つ適用しようとしてもうまくいきません。 /* ぼかしと影を同時適用できず、最後のフィルタが有効となる */ .dbl-filter { filter: blur(3px); filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.6)); } 最後に定義したフィルタが適用されます。 これはfilterという属性を 2 回定義したことと同じなので、CSS のルールに従って最後に定義されたものが有効になります。 1 つの filter 属性に複数の関数を渡す 上記の例は「複数の filter は定義できない」ということではなく、単に指定の仕方が悪いだけです。 1つのfilterに複数の関数を渡すことで問題なく多重が
2 min read

CSS filter - 画像をぼかす

filter: blur で画像をぼかす 画像をぼかしてみます。 blur 関数 ねこ画像にblur関数でぼかしをかけてみます。 関数への引数はぼかしの半径です。10px でもかなりボケますね。emや%などの相対指定も可能です。 /* filterでぼかし */ .filter-blur { filter: blur(10px); } .filter-blur:hover { filter: blur(0px); } filter:blur リファレンス MDN のサイトが参考になります。 blur() ねこ画像 by 素材 Library.com, Thanks!!
1 min read

CSS filter - 画像に沿って影をつける

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

Subscribe to 猫好きが猫以外のことも書く

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.
jamie@example.com
Subscribe