CSS

filterプロパティのblurエフェクトを使ってグラデーションの背景をつくる

今回はCSSのfilterプロパティのblurエフェクトを使って背景画像を作ってみました。
まずは作ったものを御覧ください。


DEMO - デモページを見る

直線的なものや円形のグラデーションでよければbackground-imageプロパティでもグラデーションの背景を作ることが可能ですが、今回のようなモヤモヤしたグラデーションは作ることが出来ません。今回のデザインが良いか悪いかは別としてなんか面倒な処理していそうだなと思うかもしれませんが、ものすごく簡単な実装しかしていません。
blurを外した状態のデモページを用意していますのでこちらも合わせてご覧ください。


DEMO - デモページを見る

「なーんだこんなことか。。」って言う感じですね。Photoshopでつくられた素材なんかでもこういうグラデーションの背景画像があると思いますが、ほとんどの場合今回作成したサンプルと同じ原理で作られています。また、デモページでは円のアニメーションや背景色の変更はjavascriptで行っていますが、今回のようなスタティックな動きであればCSSだけでも十分実現可能です。ただblurちょっと重たいですね。。。

まとめ

今回は背景全面にエフェクトを使用しましたが、clip系のプロパティと併用してテキストやsvgオブジェクトでクリッピングしても面白くなるかも!?と思いました。
あとは、凄いなこれっていうアニメーションも結局絵作りがうまくいかないと成立しないというのを改めて思ったのと、“アニメーション=Javascript”みたいになってしまうと今回みたいな単純な仕組みすら複雑に考えてしまいそうですが、やはり表現力はCSSで実現出来る表現を学んでいくことである程度成長するという手応えを少しだけ感じることが出来ました。

WEBの表現においてfilterプロパティの役割は印刷物でいうところのインクや紙質による演出と同じ意味合いがあると思います。他にも多くのエフェクトが用意されているので引き続きあれこれ使い倒してみたいと思います。