在CSS/Jquery中创建渐变网格-CreatingagradientmeshinCSS/Jquery

4  

At present

I experimented with something along these lines a few years ago, using SVG, the HTML5 canvas tag, and more recently CSS3 gradients. I don't believe there's a natural way to go beyond simple linear or radial gradients at present.

几年前,我使用SVG,HTML5画布标签以及最近的CSS3渐变来尝试这些方面。我不相信目前有一种超越简单线性或径向渐变的自然方法。

The question is if a mesh gradient can be simulated using only simple linear and radial gradients (which are the only tools available).

问题是,是否可以仅使用简单的线性和径向渐变(这是唯一可用的工具)来模拟网格渐变。

Unfortunately, when you combine multiple gradients using opacity or rgba, the colors of the different gradients tend to combine in a way that's not useful, leading to washed-out colors. Avoiding this would require being able to render it in the browser as a single complex gradient.

不幸的是,当你使用不透明度或rgba组合多个渐变时,不同渐变的颜色倾向于以一种无用的方式组合,从而导致褪色。避免这种情况需要能够在浏览器中将其作为单个复杂渐变进行渲染。

There are also significant limitations to the shapes the gradients can have -- linear gradients at an arbitrary angle, and elliptical gradients with radial symmetry. Neither allows for free-form, irregular shapes. The 2D transformations that can be applied to the resulting image are fairly regular in nature as well (scaling, skewing, etc).

梯度可以具有显着的局限性 - 任意角度的线性梯度和径向对称的椭圆梯度。也不允许自由形状的不规则形状。可以应用于结果图像的2D变换在性质上也是相当规则的(缩放,倾斜等)。

In the future

在将来

The most promising option I'm aware of for the near future is the possible support for mesh gradients in SVG 2.0 (and perhaps diffusion curves as well). If this does happen and it's eventually supported by browsers, that should start to greatly expand the options. And the HTML5 canvas tag and CSS3 may follow soon afterwards.

我不知道在不久的将来最有希望的选择是可能支持SVG 2.0中的网格渐变(也可能是扩散曲线)。如果确实发生这种情况并且最终得到浏览器的支持,那么应该开始大大扩展选项。之后很快就会出现HTML5 canvas标签和CSS3。

And as @vals pointed out in the comment below, WebGL should offer some very promising options (for HTML5 canvas tags using a 3D context).

正如@vals在下面的评论中指出的那样,WebGL应该提供一些非常有前景的选项(对于使用3D上下文的HTML5画布标签)。

Related links

• http://www.svgopen.org/2011/papers/18-Advanced_Gradients_for_SVG/
• http://w3-org.9356.n7.nabble.com/Diffusion-Curves-td146288.html

4  

I have done a simple layout to demostrate this.

我做了一个简单的布局来说明这一点。

First, I will put 4 divs, the first to show the partial results, and the last to see the final result. The markup is just:

首先,我将放置4个div,第一个显示部分结果,最后一个显示最终结果。标记只是:

here box is just for dimensions, mesh1 to 3 hold the partial results, in mesh we put it all together.

这里的框仅用于尺寸,mesh1到3保持部分结果,在网格中我们将它们全部放在一起。

The CSS is:

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%);}

I am giving to the mesh1 class a background linear, inclinated 5 degrees, and specifying colors in rgba format to allow for transparency.

我给mesh1类一个背景线性,倾斜5度,并指定rgba格式的颜色以允许透明度。

Then, to be able to overlay more gradients, I specify to pseudo elements as before and after, sharing the same layout properties.

然后,为了能够覆盖更多的渐变,我指定了前后的伪元素,共享相同的布局属性。

To the after element I give a circular gradient, shared with the mesh2 To the before element I give an elliptical gradient, off center. All of them can be rgba.

对于after元素,我给出一个圆形渐变,与mesh2共享。对于before元素,我给出一个椭圆渐变,偏离中心。所有这些都可以是rgba。

At the end, you see in the mesh div the result of overlapping everything

最后,您在网格div中看到重叠所有内容的结果

(I have used everywhere the webkit notation to make it short)

(我已经到处使用webkit表示法来缩短它)

I wouldn't say it is much artistic, but I leave this part to you :-)

我不会说这很有艺术性,但我把这部分留给你:-)

fiddle here

2  

In my first answer, I interpreted this going more in the "artistic" way than in the "mathematical" way. The answer from Matt Coughlin make me think about a more mathematic answer, in wich we would make the "mesh" part of the requirement more rigorous.

在我的第一个答案中,我认为这更多地是以“艺术”方式而不是“数学”方式。 Matt Coughlin的答案让我想到了一个更加数学化的答案,我们会把这个要求的“网格”部分更加严谨。

That is, we have a matrix of colors, and we want to show this in a grid. If the grid has a spacing of say 100px, then the color [x][y] of the matrix would be given to the pixel in 100x and 100y. The pixels in between would be aproximated in a bilinear way.

也就是说,我们有一个颜色矩阵,我们希望在网格中显示它。如果网格的间距为100px,则矩阵的颜色[x] [y]将以100x和100y的形式给予像素。中间的像素将以双线性方式进行近似。

For such an approach, the css would be:

对于这种方法,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%);}

I am using every div as a local contributor of the mesh, getting only to "touch" the inmediate neighbour, and going to a full transparency beyond that point.

我使用每个div作为网格的本地贡献者,只是“触摸”中间邻居,并在此之后达到完全透明。

The result is this :

结果如下:

fiddle

The 2 first colors are both red as a test. In a perfect system, the line connecting the 2 points should be perfect red all the time.

2种第一种颜色都是红色的测试。在一个完美的系统中,连接2个点的线应始终是完美的红色。

It's true that it's not a perfect result, but the "muddying" or "washyness" of the result is more or less avoided

确实,这不是一个完美的结果,但结果的“混乱”或“淡态”或多或少地避免了