SVGとCSSで画像の境界線をぼかす。

マスクしてみよう。

では実際に上手くいくか試してみましょう。
マスク用のオブジェクトには長方形を用意しました。長方形はベクターソフトで作りましたが、もちろんSVGコードで書いてしまっても構いません。

わかりやすいように現時点では線に色を付けています。「塗り」はもちろん#ffffff（完全な不透明）です。

<svg viewBox="0 0 841.9 595.3"> <rect x="144.3" y="93.6" width="553.2" height="408" fill = "#fff" stroke = "#00A0E9"/> </svg>

SVGで書き出したもの⬆︎です。
ここに好きな画像を貼り付けましょう。

<svg viewBox="0 0 841.9 595.3"> 「「１<image xlink:href = "fu.png"/>」」 <rect x="144.3" y="93.6" width="553.2" height="408" fill = "#fff" stroke = "#00A0E9"/> </svg>

現在の状態をブラウザで表示するとこの⬆︎ように。
ここからぼかしとマスクを施します。

<image id = 「「５"img1"」」 xlink:href = "fu.png"/> 「「１<mask id = 「「５"mask1"」」>」」 bb<rect id = 「「５"rect1"」」 x="144.3" y="93.6" width="553.2" height="408" fill = "#fff" stroke = "#00A0E9"/> 「「１</mask>」」

長方形要素を<mask> 〜 </mask>で囲んでマスク要素として定義します。id名を「mask1」としました。
この時点で描画要素ではなくなるので、ブラウザ上には表示されなく成増。
さらにマスク要素になってしまった長方形要素にもid名「rect1」、貼り付けた画像にはid名「img1」としておきます。

「「３/* mask用の長方形をぼかす */」」 #rect1 { filter:blur(10px); } 「「３/* 定義したmask要素で画像をマスク */」」 #img1 { mask:url(mask1); }

できました。画像の真ん中部分は鮮明なままで、境界線のところだけがぼやけています。
ちなみに元の長方形には線の色を「#00A0E9」としていたのですが、mask要素として定義した段階で線の色は反映されなくなるので、コードを削除する必要は特にありません。

アニメーションさせてみる。

「画像の境界線をぼかす」方法、あっさりとできてしまいました。
せっかくなのでアニメーションさせてみましょう。

#rect1 { filter:blur(10px); transform-origin:center; animation:rect1 2s linear alternate infinite; } @keyframes rect1 { from { transform:scale(0); } to { transfrom:scale(1.5); } }

animationは<mask>要素ではなくその中にある<rect>に施すとうまくいきます。
今回のサンプルでは長方形を使いました。でももちろん、SVGで作ったオブジェクトなので自由な形状でマスクすることができます。
楕円系を使えば、「回想シーン」っぽくなりそうです。またblurの値は「10px」となっていますが、色々変えてみて変化を楽しんでください。

最後までお読みくださり、ありがとうございました。
じつは最初、「画像の境界線をぼかす方法」を考えたときに「グラデーションを使うか？ そのオフセットを動かすか？」などと手の込んだことをあれこれ考えていた「ふ」でした。
しかし記事完成直前に「CSSとマスクでできるやん！」と気付いてしまい、コンテンツをゼロから書き直した次第です。

「発想の転換」って大切ですね！
ではまた〜 ♩♩♩