网络上的Good Golly，Gradients_极简慕枫

Gradients正在偷偷摸摸地卷土重来。有一段时间他们属于Miami Vice和Tequila Sunrise的世界，然后他们增加了1980年的杂志的深度，然后有Geocities - 好吧，让我们不要纠缠于过去。

如今，渐变式正在以大胆的方式在网络上使用; 混合高度饱和的颜色以获得极其丰富的效果（尽管并不是每个人的口味）。

看起来每个人都像1995年一样使用对角线渐变。同样的那个（L：Stripe，R：Google）。pic.twitter.com/j3cXyWo9tq

- Eli Schiff（@eli_schiff）

重庆网页设计让我们看看最近我偶然发现的一些例子，看看我们是否可以从中汲取灵感。

在此列表中看到Spotify并不会感到惊讶。他们在过去六个月中的图像充满了双色调图像和丰富的渐变，最后是他们的音乐年份功能。

结合强大的类型，Spotify的视觉品牌不仅可以让你在肩膀上轻拍，它还可以让你的头靠在放大器上，并提升音量。

Atomic在最近的2015年设计文章回顾中采用了类似的方法。

在这里，紫色和紫红色（角度为45度）给出了一些可爱的等距深度，并使页面真实奇观。

realfuturefair.com  使用同样壮观的颜色范围，再次以对角线角度，使用<canvas>生成的波形图形：

我的前同事杰弗里·韦尔（Jeffrey Way）已经走向水平，在laracasts.com上使用了一种微妙的紫色靛蓝  ：

注释使用较少的复古美学，而是选择在主页面背景上放置半透明渐变图像：

这本来可以做得更有效 - 额外的图像添加另一个http请求和75kb到页面 - 但它是一个时尚的效果。

渐变和边界

网络会议Web下午在其页面上使用反复出现的蓝紫色渐变，这对于按钮的边框特别有效：

将鼠标悬停在链接上，整个背景采用渐变。那怎么回事？在一些基本样式之后，按钮的边框被赋予与border-image属性的线性渐变。这有效地使我们能够在边界施放的图像，而不是依赖于正常的行程，虽然你可以声明标准边框属性首先为了留下一个回落，如果边界图像不受支持。

然后您会注意到border-image属性后跟  border-image-slice: 1;。这决定了背景图像的切片位置，以便它可以与元素一起缩放。值1采用渐变“图像”的左侧，顶部，右侧和底部的第一个像素，并将这些切片映射到边框的八个区域。阅读有关在MDN上切片的更多信息。

然后，对于悬停状态，将相同的渐变应用于背景填充。这是在行动：

粗暴起来

到目前为止，我们已经涵盖了平滑的渐变; 两种或多种颜色沿着完美的过渡流入彼此。CSS使这个过程现在相对简单和可维护。但渐变也可以纹理的形式给出角色：

在worldseasiestdecision.org上，这种粗糙的绘图纹理用于赋予其渐变更多个性。不错的工作。

www.viens-la.com也使用图像（而不是CSS）来使他们的渐变有点个性：

在整个网站的细节中可以看到类似的渐变：

类型

渐变不仅限于背景和边框，它们还可以添加排版感兴趣的元素：

在这里，Pierre Georges在“Bonjour”段落块的背景上使用渐变，然后使用该background-clip属性将绘制区域限制为文本。-webkit-text-fill-color: transparent;然后使实际文本透明，因此从下面可以看到渐变。

以下是（webkit）语法的外观：

重庆网页设计