使用 CSS 圆锥渐变创建背景图案
本文翻译自 How to create background pattern using CSS & conic-gradient,作者: Temani Afif, 略有删改。
拥有一个好的背景图案可以使你的网站设计与众不同。多亏了 CSS 渐变,我们可以使用几行代码创建花哨炫酷的图案。在这篇文章中,我们将学习conic-gradient
并使用它来创建不同的 CSS 图案。
圆锥梯度如何工作?
圆锥渐变从指定圆心开始,类似于径向渐变,不同之处在于圆锥渐变色标放置在圆的圆周周围,而不是从圆心出现的直线上,从而使颜色在围绕圆心旋转时平滑过渡,而不是从圆心向外过渡。
这是 MDN 页面上的一张图:
![](https://static001.geekbang.org/infoq/00/001bd0fde160e3603d96c1172c7acc0d.png)
举一个基本的例子来看看它是如何工作的:
![](https://static001.geekbang.org/infoq/9d/9d4bdb32c2f288a326f5852909692c54.png)
我们将中心点放置在 X=75%和 Y=25%处,然后在红色,蓝色和黄色之间创建颜色过渡。
在大多数情况下,我们不需要平滑的过渡,而是不同的颜色值。要做到这一点,我们需要使颜色从上一个结束的地方开始:
注意两种颜色(90deg 和 225deg)之间使用相同的角度。代码可以进一步优化,就像下面这样。
通过指定 0(小于前一个值),浏览器将自动使其等于前一个值。这样可以避免我们两次写入相同的值。最终的效果如下:
![](https://static001.geekbang.org/infoq/f2/f291fcf9838c6d9c0deb455cae4ae279.png)
和上面的效果图保持有相同的中心点,但没有颜色之间的过渡效果。红色填充90deg
。蓝色从红色结束的地方开始,一直持续到225deg
,所以它填充了135deg
。黄色填充了剩余的135deg
空间。
如果我们定义一个background-size
,我们就创建了一个图案:
![](https://static001.geekbang.org/infoq/b6/b6f4c8441ef9d6c1afb48de65b3d114e.png)
这不是一个好看的图案效果,但说明了我们将在本文中使用的技术来构建更好的图案效果!
棋盘图案
我们从一个基本图案开始:
![](https://static001.geekbang.org/infoq/79/79da23dbc6a5997c603d30530b9bc52a.png)
下面的图来理解这种模式的逻辑:
![](https://static001.geekbang.org/infoq/81/81ccb01bc4e2a6e04a6c0cb9131e7420.png)
可以看到我们的圆心被放置在背景区域的中心(默认位置),所以我们不需要定义它。然后我们有 4 种颜色(2 白 2 黑),每种颜色填充 90deg(区域比例为 25%)。代码为:
继续优化语法使用重复渐变代码:
我们也可以用百分比来代替度数:
我们要做的就是更新 background-size 来控制图案显示格子的比例。
Z 字形图案
接下来我们创建一个更花哨的图案效果,这次我们将使用两个渐变。
![](https://static001.geekbang.org/infoq/e5/e5dde92bb9514378e91332e021faf910.png)
此效果中我们将学习from
选项,该选项允许我们控制渐变的旋转。
![](https://static001.geekbang.org/infoq/47/4763972f5a405547484450e15b4649f2.png)
在上面的例子中,每个渐变都由两种颜色组成。第一种颜色填充 90deg,而第二种颜色填充剩余的空间。两种渐变之间的唯一区别是旋转。 第一渐变旋转-45deg,而第二渐变旋转 135deg。
这两个梯度加在一起会给予下面的结果。
![](https://static001.geekbang.org/infoq/a6/a6f13423b63f8f3788279dba7db5fe9d.png)
上面的(1)对应的代码如下:
这不是我们想要的结果。为了得到我们想要的结果,我们需要移动第二个渐变代码,如(2)所示,以获得以下代码:
50px 0
只是第二梯度的background-position
,50px
是background-size
的一半。
可以通过引入 CSS 变量进一步优化代码:
图纸图案
这个图案我们将使用两个类似的梯度,但这次有不同的大小。 除了background-position
,我们还将看到使用background-size
也可以帮助我们创建图案。
![](https://static001.geekbang.org/infoq/ad/adc784a487407dc916c67aae6e9a77c6.png)
第一梯度定义如下:
![](https://static001.geekbang.org/infoq/15/154502eff4c9a125777290271e47a496.png)
设置100px
后的background-size
最终效果如下:
![](https://static001.geekbang.org/infoq/4a/4afba761300f90cc7ffe193d404fecb3.png)
第二个渐变是相同的,但不是2px 2px
,我们使用1px 1px
来拥有更细的线条,我们将大小除以 5。这将给予我们一个更大的正方形内的小正方形(5x5 网格)的逻辑结果。
使用 CSS 变量的优化代码:
三角形图案
在这三个简单的图案之后,我们可以使用相同的技术来处理更复杂的图案效果,接下来创建一些三角形图案。
![](https://static001.geekbang.org/infoq/76/76c75fb053636da3d1486fe60a63a78c.png)
对于这个图案效果可以分解以下的渐变代码:
![](https://static001.geekbang.org/infoq/f9/f9957c8b0e9d9fdd8922f8869b4a7ba0.png)
与 Z 字形图案类似,我们使用background-position
的第二个梯度的偏移,以获得以下代码:
以下还有两个三角形的图案。这里就不一一解析详细的代码实现过程,有兴趣的可以尝试实现看看。
![](https://static001.geekbang.org/infoq/73/731c20084a502390ce1c804b7ecab25b.png)
![](https://static001.geekbang.org/infoq/d8/d8d01c46511b1e3293dd685b854a608d.png)
代码可能看起来很复杂,但如果你遵循上面的实现过程,你可以很容易地理解它。
星型图案
为什么不尝试星星的图案呢!
![](https://static001.geekbang.org/infoq/72/72fc2b98c6cd2bfa9935d63c709aee48.png)
下面是一个逐步演示来说明不同的梯度
![](https://static001.geekbang.org/infoq/79/79a36980340d4d5f4fc384c3481f4c3e.png)
正如你所看到的,每一个梯度都很容易理解,所有的组合给了我们一个很好的结果。这就是渐变的力量,我们将基本形状组合在一起,得到一个复杂的图案。
更多的图案效果
在我们结束之前,我们来看看其他的图案效果例子,向你展示conic-gradient()
在创建花哨的图案时是多么强大!
![](https://static001.geekbang.org/infoq/05/0544e74ae8f1e76a3b4180ef9d6e226e.png)
![](https://static001.geekbang.org/infoq/32/32bcca813df49292e116927e1e00faf5.png)
![](https://static001.geekbang.org/infoq/bb/bbb3cc6b1c2df5163e52bf2950715e84.png)
![](https://static001.geekbang.org/infoq/dc/dc0b78cdec8b0bd4dda8e50eb41c96d4.png)
![](https://static001.geekbang.org/infoq/86/86e0c4208417d38593d9f5e06dbcce99.png)
结论
在我们看到不同的例子之后,你应该能够使用conic-gradient()
创建很酷的模式。你可能会发现这很难,但通过一些练习你会对不同的技术感到舒服,你可以很容易地创建你的图案。
组合不同的渐变是获得更多图案的另一种方法。我做了很多例子,你可以在这个网站css-pattern.com
上发现更多有趣的图案效果。
看完本文如果觉得有用,记得点个赞支持,收藏起来说不定哪天就用上啦~
专注前端开发,分享前端相关技术干货,公众号:南城大前端(ID: nanchengfe)
版权声明: 本文为 InfoQ 作者【南城FE】的原创文章。
原文链接:【http://xie.infoq.cn/article/05ec3e8c613cca3b6082858c7】。文章转载请联系作者。
评论