颜色渐变从上往下渐变

梯度正在悄悄卷土重来。 有一阵子他们属于迈阿密虎钳和​​龙舌兰日出世界，然后他们增加了1980年代的杂志的深度，然后出现了Geocities –好吧，让我们不谈过去。

如今，网络上以大胆的方式使用了渐变。 混合高度饱和的颜色以获得极其丰富的效果（尽管并非所有人都喜欢）。

让我们看一下我最近偶然发现的一些示例，看看是否可以从中获得启发。

在此列表中看到Spotify不会让您感到惊讶。 在过去的六个月中，他们的图形充满了双色调图像和丰富的渐变色，并以“音乐年”功能为结尾。

结合强大的类型，Spotify的视觉品牌现在不仅可以轻拍您的肩膀，还可以将您的头靠在耳放上并提高音量。

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

在这里，紫色和倒挂金钟（成45度角）给人以可爱的等距深度，使页面看起来像眼镜。

realfuturefair.com使用同样引人注目的色彩范围，同样以对角线显示<canvas>生成的波浪图形：

我的前同事Jeffrey Way变得水平了，在laracasts.com上使用了微妙的紫色至靛蓝：

注释使用了较不复古的美感，而是选择在主页背景上放置一个半透明的渐变图像：

可以更灵活地完成此操作-额外的图像将另一个http请求和75kb的内容添加到页面上-但这是一种时尚的效果。

渐变和边界

Web会议Web Afternoon在其页面上使用重复的蓝色到紫色渐变，这对于按钮边框特别有效：

将鼠标悬停在链接上，整个背景采用渐变。 那怎么办呢？ 在使用一些基本样式后，按钮的border-image具有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）语法的外观： 

p {background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #f24a70), color-stop(0.5, #c557d8), color-stop(0.99, #f24a70));-webkit-background-clip: text;-webkit-text-fill-color: transparent;
}

Envato市场

需要更多灵感吗？ 检出Envato Market上可用的以下文件：

翻译自: https://webdesign.tutsplus.com/articles/good-golly-gradients-all-over-the-web–cms-25481

颜色渐变从上往下渐变