Result
映画等でよく見かける演出で、夢の中にいて、ちょっとボヤけるような景色っぽい表現「Dreamy blur（参照：Youtube）」エフェクトをCSSで実装する、というもの。
具体的にはbackdrop-filterが採用されています。参考記事先でも最初はmix-blend-modeを使ったようで、個人的にも初見はそう思ったけど必要ないみたいです。
css
picture { position: relative; display: block; } picture::after { content: ''; position: absolute; inset: 0; backdrop-filter: blur(3px) opacity(.5) brightness(1.3); } |
brightnessは明るさの度合いを調整します。
html
<picture> <img src="url.png" /></picture> |
SVGフィルターを使う方法もあります。
<img src="url.png" style="filter: url(#dreamy-blur)"/><svg height="0"> <filter id="dreamy-blur"> <feGaussianBlur stdDeviation="3" /> <feComponentTransfer> <feFuncR type="linear" slope="1.3" /> <feFuncG type="linear" slope="1.3" /> <feFuncB type="linear" slope="1.3" /> <feFuncA type="linear" slope=".5" /> </feComponentTransfer> <feBlend in2="SourceGraphic" /> </filter></svg> |
使いこなせるならSVGの方が汎用的ですかね。以下を参考にしました。
