下記のような、いろいろな方向からのぼかしグラデーションはCSS3で作ることも可能なのでしょうか？

Question

下記のような、いろいろな方向からのぼかしグラデーションはCSS3で作ることも可能なのでしょうか？
フォトショで作らないとやはり無理ですかね。

Answer 1

box-shadowを使えばいけるんじゃないですかね。

box-shadow: 0 0 50px #fff;

3番目の引数で大きめにぼかし範囲をとっておいて、
4番目の引数でぼかし色を指定すればOKかと。

Comments

[退会済みユーザー]

box-shadow: 0 0 50px #fff;をやってみたのですが、
ボックスの外側にふわっとした光彩はできるのですが、
中にグラデーションはできません。組み合わせるということでしょうか？

[ogaaaan]

そっすねー。

具体的にいうと、
position: relative;
overflow: hidden;
なボックスつくって、
その中に、先ほどのぼかしboxをいくつか入れればいいかと。

ぼかしboxは
position: absolute;
にしておいて、
left: 10px;
top: 80px;
みたいにbox内で位置指定できるので、
いろいろやってみてください。

注意点として、グラデーションは処理がかなり重いので、
あんまりたくさん入れ込むと、スクロールとかががたつくかもしれない。
ちなみに自分だったら画像にします。

[退会済みユーザー]

ポジションでdivを四つくらい上下に重ねて、それぞれに別のグラデーションをかけるということですね。

CSSなら何でも画像より軽いわけではないのですね。

フォトショで小さめに作って、それとわざとWEB上で拡大表示させて表示するか、
フォトショで小さめに作って、SVG化するほうがいいですかね。

[ogaaaan]

htmlもcssも画像も、まずはPCが計算してメモリ上にレンダリングします。
レンダリングしたらそれを画面にペインティングします。

レンダリングはCPU、ペインティングはGPUが使われることが多いですが、まず、レンダリングもペインティングも軽いほうが最終的に『速い』わけです。
1枚画像なら、1枚の画像をレンダリングするという処理だけで済み、あとはペインティングするだけです。

CSSだと各種パラメータを計算し、それをレンダリング結果として保存し、それをペインティングします。ぼかしBOXが大量にあれば、それだけ計算が走ります。
SVGも基本同じです。

予断ですが、canvasタグでAndroid4系でSVGを表示させると、欠けたり表示されなかったり、いろいろ不具合が出ます。

そういう意味も含めて、画像1枚のほうがはるかに処理が軽いじゃないですかね。

ぼかしをそれぞれアニメーションとかしたいなら、ぼかし画像を1個ずつpng画像でつくっておいて、jQueryとvelocity.jsで動かすのがお勧めです。いろいろな理由でvelocity.jsはちらつきなどほとんどないので。

[退会済みユーザー]

ありがとうございます。
まさに下記のサイトのような感じなのですが、やはりはじめからぼかした画像を使っていますね。
https://app.codegrid.net/entry/bem-basic-1

やはりヒーローイメージにぼかしグラデーションは今はやっているのかもしれないですね。

また、画像よりもCSS3のグラデーションのほうが遅くなる可能性があるのですね。
それはびっくりしました。
画像のほうが絶対に遅いと思っていました。

[退会済みユーザー]

レンダリングの速度を考えても、複雑なグラデーションは画像のほうが早いのですね。

[退会済みユーザー]

SVG化しても、画像のほうがはやいのですね。

[ogaaaan]

っそっすね。
画像でシンプルにやったほうが良いかもしんないっす。

[退会済みユーザー]

了解しました。簡単なグラデはCSS3で行い、その他はSVG化しても軽くならないのでそのまま画像にします。

[ogaaaan]

Google Chromeだったら開発者ツール（Ctrl+Shift+IもしくはF12）でTimelineつかってどれくらい処理が重いかわかるんで、参考にどうぞ～。

[退会済みユーザー]

ありがとうございました。
論より証拠ですね。

[ogaaaan]

予談ですが、画像を拡大させてぼかすのは、
バイリニアとかバイキュービックとかいろいろなアルゴリズムがありますが、
余計な処理が走るのでその分重くなります。

基本的には当倍が一番早く、2の倍数サイズがその次に早いです。あんまり人間が感じる速度の差はないですけど、ぼかすために拡大するよりかは早いです。

Answer 2

そこまで複雑になるのだったら、CSSで書くより何かしらの画像にすることをおすすめします。

とりわけ、SVGであればHTMLに直接埋め込むこともできますし、JavaScriptからの操作もできますので、（どんな使い方をするのかにもよりますが）悪くないかなと思います。

Comments

[退会済みユーザー]

フォトショで小さめに作って、それとわざとWEB上で拡大表示させて表示するか、
フォトショで小さめに作って、SVG化するほうがいいですかね。

Answer 3

現実的かどうかは別にして、
もともとPhotoshopでも複数のグラデーションを被せる場合は「半透明の色->透明」のグラデーションを利用すると思いますので
position:absolute; グラデーション塗り
のような同じ大きさのboxタブを画像の上に重ねていけば可能ではないでしょうか？

ここでやっているようなことを複数回

Comments

[退会済みユーザー]

ポジションでdivを四つくらい上下に重ねて、それぞれに別のグラデーションをかけるということでしょうか？

[hirohiro]

そうですね。
ただメモリサイズはともかく、実行時に描画するわけですからクライアントの負荷は増大します。
複雑な画像をイメージしているなら別の方法を検討したほうが良いと思います。

[退会済みユーザー]

レンダリングの速度を考えても、複雑なグラデーションは画像のほうが早いのですね。
SVG化しても、画像のほうがはやいのですね。