15

これが可能かどうかはわかりませんが、CSS/Jquery 手法を使用してグラデーション メッシュを作成できますか? これに似たものここに画像の説明を入力

このメッシュをランダムに生成し、場合によってはアニメートしたいので、画像の使用を避けようとしています。このようなことが可能かどうかはわかりません。

個々のグラデーションのいくつかのレイヤーを作成してから、それらをすべて固定位置にレイヤー化し、不透明度の設定を変更することを考えていましたか?

4

4 に答える 4

8

現在のところ

私は数年前、SVG、HTML5 キャンバス タグ、そして最近では CSS3 グラデーションを使用して、これらの方針に沿った実験を行いました。現時点では、単純な線形または放射状のグラデーションを超える自然な方法はないと思います。

問題は、単純な線形グラデーションと放射状グラデーション (使用可能な唯一のツール) のみを使用して、メッシュ グラデーションをシミュレートできるかどうかです。

残念ながら、不透明度または rgba を使用して複数のグラデーションを組み合わせると、異なるグラデーションの色が役に立たない方法で組み合わされる傾向があり、色あせが発生します。これを回避するには、ブラウザーで単一の複雑なグラデーションとしてレンダリングできる必要があります。

また、グラデーションが持つことができる形状には大きな制限があります。任意の角度の線形グラデーションと、放射対称の楕円グラデーションです。どちらも自由形式の不規則な形状を許可しません。結果の画像に適用できる 2D 変換も、本質的にかなり規則的です (スケーリング、ゆがみなど)。

将来

近い将来、私が認識している最も有望なオプションは、SVG 2.0 でのメッシュ グラデーションのサポートの可能性です (おそらく拡散曲線も同様です)。これが実現し、最終的にブラウザーでサポートされるようになると、選択肢が大幅に拡大し始めるはずです。HTML5 のキャンバス タグと CSS3 は、すぐ後に続く可能性があります。

また、@vals が下のコメントで指摘したように、WebGL はいくつかの非常に有望なオプションを提供する必要があります (3D コンテキストを使用する HTML5 キャンバス タグ用)。

関連リンク

于 2013-02-18T20:59:03.983 に答える
7

私はこれを実証するために単純なレイアウトを行いました。

最初に、4つのdivを配置します。最初は部分的な結果を表示し、最後は最終結果を表示します。マークアップは次のとおりです。

<div class="box mesh1"></div>
<div class="box mesh2"></div>
<div class="box mesh3"></div> 
<div class="box mesh"></div>

ここでのボックスは寸法専用です。mesh1から3は部分的な結果を保持し、メッシュではすべてをまとめます。

CSSは次のとおりです。

.box {
    width: 400px;
    height: 150px;
    position: relative;
    display: inline-block;
}

.mesh1, .mesh {
background:
    -webkit-linear-gradient(5deg,  rgba(0, 250, 0, 0.5), rgba(0, 100, 0, 0.5))
}

.mesh:after, .mesh:before {
    content: "";
    position: absolute;
    left: 0px;
    bottom: 0px;
    top: 0px;
    right: 0px;
}
.mesh2, .mesh:after {
background:   -webkit-radial-gradient(center center, circle cover, rgba(250, 0, 0, 0.6) 0%, rgba(120, 0, 10, 0.5) 100%);}

.mesh3, .mesh:before {
background: -webkit-radial-gradient(10% 10%, ellipse cover, rgba(0, 0, 250, 0.6) 0%, white 100%);}

私はmesh1クラスに、5度傾斜した線形の背景を与え、透明性を考慮してrgba形式で色を指定しています。

次に、より多くのグラデーションをオーバーレイできるようにするために、同じレイアウトプロパティを共有して、前後と同じように疑似要素に指定します。

後の要素に、メッシュと共有される円形のグラデーションを与えます2前の要素に、中心から外れた楕円形のグラデーションを与えます。それらはすべてrgbaにすることができます。

最後に、メッシュdivにすべてをオーバーラップした結果が表示されます

（私はそれを短くするためにどこでもウェブキット表記法を使用しました）

それほど芸術的だとは言えませんが、この部分はあなたにお任せします:-)

ここをいじる

于 2013-02-18T20:04:02.690 に答える
3

私の最初の回答では、これを「数学的な」方法よりも「芸術的な」方法で解釈しました。Matt Coughlin からの回答により、要件の「メッシュ」部分をより厳密にする、より数学的な回答について考えるようになりました。

つまり、色のマトリックスがあり、これをグリッドで表示したいと考えています。グリッドの間隔が 100px の場合、マトリックスの色 [x][y] は 100x と 100y のピクセルに与えられます。間のピクセルは、双一次方式で近似されます。

このようなアプローチの場合、css は次のようになります。

.mesh { overflow: hidden; position: absolute;   width: 300px;   height: 300px;    }

.tile {    width: 200px;    height: 200px;    position: absolute;    display: block;   }

.tile11, .tile21, .tile31 {
left: -50px;
}
.tile12, .tile22, .tile32 {
left: 50px;
}
.tile13, .tile23, .tile33 {
left: 150px;
}
.tile11, .tile12, .tile13 {
top: -50px;
}
.tile21, .tile22, .tile23 {
    top: 50px;
}
.tile31, .tile32, .tile33 {
top: 150px;
}

.tile11 {
background: -webkit-radial-gradient(center center, 100px 100px, 
      rgba(255, 0, 0, 1) 0%, 
      rgba(255, 0, 0, 0.5) 50%,
      rgba(255, 0, 0, 0) 100%);}

.tile12 {
background: -webkit-radial-gradient(center center, 100px 100px, 
      rgba(255, 0, 0, 1) 0%, 
      rgba(255, 0, 0, 0.5) 50%,
      rgba(255, 0, 0, 0) 100%);}

私はすべての div をメッシュのローカル コントリビューターとして使用し、中間の隣人にのみ「触れる」ようにし、そのポイントを超えて完全な透明性を実現しています。

結果は次のとおりです。

フィドル

最初の 2 色はテストとして両方とも赤です。完全なシステムでは、2 点を結ぶ線は常に完全な赤である必要があります。

完璧な結果ではないことは事実ですが、結果の「濁り」や「ぼやけ」は多かれ少なかれ回避されます。

于 2013-02-24T11:36:51.840 に答える
2

ラスター イメージを使用して軽量でスケーラブルなメッシュ グラデーションを作成するためのソリューションについて書きました: https://peterhrynkow.com/performance/2019/01/13/blowing-up-images-to-make-them-small.html

ランダムに生成したいという問題は解決しませんが、少なくとも、CSS または SVG ソリューションに期待される小さなファイル サイズと解像度に依存しないスケーリングが得られます。

于 2019-01-18T20:22:55.557 に答える