李东的技术博客

文章内容Content

漂亮条纹炼成笔记进阶篇

2016/09/16 423 ℃ 抢个沙发

by LiDong from https://www.lidongtech.com/pretty-stripes-introduction-make-notes-advanced.html
本文可全文转载,但需得到原作者书面许可,同时保留原作者和出处。如果只是引流,请随意~

条纹绝对是永恒的经典,不管是装修还是服装,条纹元素总是会若有若无的穿插其中。当条纹和妹子们在一起的时候,就不是单纯的可爱那么简单了,有时候甚至隐隐约约中透露着一种性感和诱惑。

条纹袜的诱惑

条纹袜的诱惑

如果你看的很仔细会发现其实上图是个充气娃娃,嘿嘿~先收收口水,我在《漂亮条纹炼成笔记入门篇》中,简单介绍了关于如何使用CSS来实现条纹的方法。今天在进阶篇里面我会根据自己经验来介绍更复杂的条纹实现方法。装逼开始……

通过上篇文章,介绍了水平条纹和垂直条纹了实现方式。在文章的末尾我还提出了一个问题,就是用什么方法实现不同角度的斜向条纹。可能你觉得很简单,其实我也是这么认为。我们可以通过linear-gradient的参数来设置条纹的方向。参数可以是关键字也可以是自定义角度(deg)。既然如此就着手来修改代码,首先是修改倾斜角度,然后修改background-size的值来使条纹出现在固定的区间内。然后所有的小区间就能汇总成一个大大的斜向条纹(假设如此)。

看看结果是不是和我们的想象是一致的。

说好的斜向条纹怎么变成这个样子了?原因就是旋转的目标是background-size控制的小区域旋转了45°,而不是整个重复的背景旋转了45°。如果来解决这个问题,我们打开Photoshop来做个试验。通过添加条纹然后进行旋转,我们仔细观察。如果需要在一个单位内包含所有条纹的状态,那么在这个单位内必须有四条,而非上面我们设置的两条。

平铺斜向条纹单位面积包含所有状态条纹需要四条

平铺斜向条纹单位面积包含所有状态条纹需要四条

既然已经知道了错误出现的原因,那么我们来改造代码:

斜向45度条纹

斜向45度条纹

这种情况下条纹的实际宽度比我们预想的宽度会细一些,原因是我们设置的条纹高度变成了background-size控制区域的边长的一半。而我们条纹的宽度实际上是所处三角形的高。这样我们必须通过“勾股定理”来计算出三角形两条斜边的长,然后乘以2之后的结果才是background-size的需要具体设置的值。

我们可以用四条纹转方向之后再拼接小区块来实现整体的斜向条纹,如果我们需要的不是45°的斜向条纹,而是60°、75°或者是5.12°的时候,使用这种方法看看能不能满足我们的需求。

失败的72°斜向条纹

失败的72°斜向条纹

完全不是我们想要的样子啊,怎么办难道还需要Photoshop的协助,然后看看具体旋转的角度需要用多大的区块来包裹。还要进行头晕的数学计算。不对这不是我想要的,我是一个喜欢偷懒的懒人,这么复杂的东西我看一眼都觉得累。天无绝人之路,非常幸运的是还有一个隐藏了很深的CSS属性可以帮我们解决这个“任意角度斜向条纹”的问题。

linear-gradient线性渐变和radial-gradient径向渐变都有一个循环加强版:repeating-linear-gradientrepeating-radial-gradient。这俩货可是了不得啊,它们的使用方法和“低配版”类似,不同的是:色标是无限循环重复,直到填满整个背景。

“循环加强版”的色标无限循环重复代表的是什么意思呢?看下列代码:

重复线性渐变repeating-linear-gradient的无限循环“技能”,可以让一个渐变图案自动重复并铺满整个背景,这样可以完美的帮我们实现任意角度斜向条纹。我们不用再去考虑如何无缝拼接的小区域贴片了。对于渐变来说是以整个元素的范围进行填充,在这种情况下background-size就可以下场休息了。我们只需简单的在色标中指定长度即可,什么“勾股定理”根号计算都见鬼去吧。如果代码需要修改我们只需修改寥寥几处即可,而不是以前那种需要修改许多处。最大的好处就是可以随心所欲的指定任意角度的斜向条纹。下面来感受下这货的威力吧:

重复渐变生产斜向条纹

重复渐变生产斜向条纹

还真是轻松加easy啊,我们还可以试验下其他的奇葩角度:

重复线性渐变实现奇葩角度条纹

重复线性渐变实现奇葩角度条纹

指哪打哪啊,这感觉爽的不要不要的。不过需要注意的是通过这种方法来创建双色条纹,至少需要四个色标。如果我们需要的是水平和垂直条纹,那么就可以用前面的方法;需要任意角度的斜向条纹就用这种方法;需要的是特殊角度的斜向条纹,就需要本篇开头的方法或是将重复线性渐变和“贴片区块”混合使用。

如果想要把我喜欢的黑白条纹换成红色和玫红,或是蓝色和浅蓝,还要改4个色标的色值。修改四处地方,头疼啊~有没有办法让我们修改一处就能全部都修改了呢?估计在你脑海中已经冒出来了Sass/Less/Stylus或CSS变量等等方法。打住一下,在我的文章《你真的理解CSS属性简写的意义吗》中,对于可以“设置多重”效果的属性,例如:backgroundbox-shadow有一个很重要的规则,叫做“列表扩散”。我们可以利用这个来让我们的代码变成只需要修改一处地方,就能修改全部颜色的强壮CSS代码。当然这里面还需要一点关于颜色的知识,这里我权当你已经掌握这些知识了。

利用列表扩散来让代码更具可读性

利用列表扩散来让代码更具可读性

嘿嘿,来看看修改一处颜色,全部条纹都发生变化的威力吧。不过这里要了解一点hsla颜色的知识才行。其实也可以用rgba颜色来控制。

这一刻我的内心是这样的↓↓↓↓

最后插播一句关于重复线性渐变属性的。

建议还是做好“平稳退化”的措施。实在不行就用图片来解决吧,关于一些知识不理解的可以百度或是出门右转,看《漂亮条纹炼成笔记入门篇》。完了-bye~

(报告完毕!)
本文标签:标签:, , ,