CSS Shaders のサンプル

この格子の細かさがこのパラメータで調整できるというわけです。もちろん細かいほど滑らかな変形が可能ですが、そのぶん処理が重くなります。 GPU アクセラレーションがかかっていればほぼ問題になりませんが、環境によってはソフトウェアでエミュレーションしているかもしれないので。

<ボックス> はこのメッシュの外枠をどのボックスに合わせるかで、 border-box, padding-box, content-box, filter-box のいずれかです。最初の 3 つは CSS でお馴染みのボックスモデルでお馴染みなので省略。 filter-box というのはフィルタの効果をすべて含むボックスです。例えばぼかしをかけたとき（後述しますが、 CSS Shaders はぼかしフィルタ等と併用できます）、ぼかしの部分は border-box の外に広がりますよね。そのぼかしの部分も含むボックスということです。