DigiPress

Highly Flexible WordPress Theme

メニュー

CSSでブラーをかけると縁がどうしてもぼやけてしまう場合の解決策

CSSでブラーをかけると縁がどうしてもぼやけてしまう場合の解決策

以前、ブログで紹介した CSS filter で画像などにブラーをかけると四隅がもわっとした感じでエッジがきれいにぼかし切れない場合の解決方法をご紹介しましたが、どうやらこの方法でも解決できないケースがありました。

そこで、どんなパターンでもぼかす要素の四隅のフチまでしっかりブラーをかける(エッジがぼけない)別の方法を今回はご紹介します。


SVG フィルターによるブラー効果

CSS の filter: blur とマージン(margin)や位置(top, bottom, left, right)の拡大調整をしても、どうしてもエッジがきれいにぼかし切れない場合は、 SVG フィルターでブラーを施すと確実です。

サンプルCSS filter の場合
filter: blur(10px);
CSS filter の場合(フチがぼけてしまう)

これを 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");
SVG filter の場合(フチまでぼかしが効く)

ブラーの度合いは、stdDeviationradius の数値(ピクセル)を変更するのみです。

面倒なので 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 が得られます。

Share / Subscribe
Facebook Likes
Tweets
Hatena Bookmarks
Pinterest
Pocket
Feedly
Send to LINE