以前、ブログで紹介した CSS filter で画像などにブラーをかけると四隅がもわっとした感じでエッジがきれいにぼかし切れない場合の解決方法をご紹介しましたが、どうやらこの方法でも解決できないケースがありました。
そこで、どんなパターンでもぼかす要素の四隅のフチまでしっかりブラーをかける(エッジがぼけない)別の方法を今回はご紹介します。
SVG フィルターによるブラー効果
CSS の filter: blur とマージン(margin)や位置(top, bottom, left, right)の拡大調整をしても、どうしてもエッジがきれいにぼかし切れない場合は、 SVG フィルターでブラーを施すと確実です。
サンプルCSS filter の場合
filter: blur(10px);
これを SVG フィルターに置き換えて CSS の filter プロパティの値としてエンコードしたものを代入します。
サンプルSVG filter の場合
filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a' x='0' y='0' width='1' height='1' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='10' result='b'/%3E%3CfeMorphology operator='dilate' radius='10'/%3E%3CfeMerge%3E%3CfeMergeNode/%3E%3CfeMergeNode in='b'/%3E%3C/feMerge%3E%3C/filter%3E%3C/svg%3E#a");
ブラーの度合いは、stdDeviation と radius の数値(ピクセル)を変更するのみです。
面倒なので SVG blur のジェネレーターを作ってみた
同一ページ内に複数のフィルターを適用する際は、上記の SVG の id と result を一意にしておくほうが無難なので、いっそのことこの SVG フィルターによる CSS 用の filter を生成するためのジェネレーターを適当に作ってみました。
CSS フィルター用の SVG ジェネレーター
See the Pen SVG Blur Generator for CSS Filter by digistate (@digistate) on CodePen.
このジェネレーターを利用すれば、ぼかし具合(数値)を変化させるだけでブラーのプレビューの確認と同時に CSS フィルター用にエンコードされた SVG が得られます。