条纹绝对是永恒的经典,不管是装修还是服装,条纹元素总是会若有若无的穿插其中。当条纹和妹子们在一起的时候,就不是单纯的可爱那么简单了,有时候甚至隐隐约约中透露着一种性感和诱惑。
条纹袜的诱惑如果你看的很仔细会发现其实上图是个充气娃娃,嘿嘿~先收收口水,我在《漂亮条纹炼成笔记入门篇》中,简单介绍了关于如何使用CSS来实现条纹的方法。今天在进阶篇里面我会根据自己经验来介绍更复杂的条纹实现方法。装B开始……
装B开始通过上篇文章,介绍了水平条纹和垂直条纹了实现方式。在文章的末尾我还提出了一个问题,就是用什么方法实现不同角度的斜向条纹。可能你觉得很简单,其实我也是这么认为。我们可以通过linear-gradient
的参数来设置条纹的方向。参数可以是关键字也可以是自定义角度(deg)。既然如此就着手来修改代码,首先是修改倾斜角度,然后修改background-size
的值来使条纹出现在固定的区间内。然后所有的小区间就能汇总成一个大大的斜向条纹(假设如此)。
/*斜向条纹CSS代码*/
background:linear-gradient(45deg, #19C 50%,#c60 50%);
background-size:30px 30px;
看看结果是不是和我们的想象是一致的。
什么鬼?说好的斜向条纹怎么变成这个样子了?原因就是旋转的目标是background-size
控制的小区域旋转了45°,而不是整个重复的背景旋转了45°。如果来解决这个问题,我们打开Photoshop来做个试验。通过添加条纹然后进行旋转,我们仔细观察。如果需要在一个单位内包含所有条纹的状态,那么在这个单位内必须有四条,而非上面我们设置的两条。
既然已经知道了错误出现的原因,那么我们来改造代码:
/*改造后斜向条纹CSS代码*/
background:linear-gradient(45deg,
#eee 25%, #111 0,
#111 50%,#eee 0,
#eee 75%,#111 0);
background-size:30px 30px;
斜向45度条纹
这种情况下条纹的实际宽度比我们预想的宽度会细一些,原因是我们设置的条纹高度变成了background-size
控制区域的边长的一半。而我们条纹的宽度实际上是所处三角形的高。这样我们必须通过“勾股定理”来计算出三角形两条斜边的长,然后乘以2之后的结果才是background-size
的需要具体设置的值。
我们可以用四条纹转方向之后再拼接小区块来实现整体的斜向条纹,如果我们需要的不是45°的斜向条纹,而是60°、75°或者是5.12°的时候,使用这种方法看看能不能满足我们的需求。
/*不定角度的斜向条纹CSS代码*/
background:linear-gradient(72deg,
#eee 25%, #111 0,
#111 50%,#eee 0,
#eee 75%,#111 0);
background-size:30px 30px;
结果大失所望
失败的72°斜向条纹 哭死
完全不是我们想要的样子啊,怎么办难道还需要Photoshop的协助,然后看看具体旋转的角度需要用多大的区块来包裹。还要进行头晕的数学计算。不对这不是我想要的,我是一个喜欢偷懒的懒人,这么复杂的东西我看一眼都觉得累。天无绝人之路,非常幸运的是还有一个隐藏了很深的CSS属性可以帮我们解决这个“任意角度斜向条纹”的问题。
linear-gradient
线性渐变和radial-gradient
径向渐变都有一个循环加强版:repeating-linear-gradient
和repeating-radial-gradient
。这俩货可是了不得啊,它们的使用方法和“低配版”类似,不同的是:色标是无限循环重复,直到填满整个背景。
“循环加强版”的色标无限循环重复代表的是什么意思呢?看下列代码:
/*repeating-linear-gradient代表的渐变*/
background:repeating-linear-gradient(72deg,
#eee 0, #111 30px);
/*linear-gradient代表的渐变*/
background:linear-gradient(72deg,
#eee 0, #111 30px,
#eee 30px, #111 60px,
#eee 60px, #111 90px,
#eee 90px, #111 120px,
#eee 120px, #111 150px,……); /*循环直到铺满背景*/
//两者是一样的
重复线性渐变repeating-linear-gradient
的无限循环“技能”,可以让一个渐变图案自动重复并铺满整个背景,这样可以完美的帮我们实现任意角度斜向条纹。我们不用再去考虑如何无缝拼接的小区域贴片了。对于渐变来说是以整个元素的范围进行填充,在这种情况下background-size
就可以下场休息了。
我们只需简单的在色标中指定长度即可,什么“勾股定理”根号计算都见鬼去吧。如果代码需要修改我们只需修改寥寥几处即可,而不是以前那种需要修改许多处。最大的好处就是可以随心所欲的指定任意角度的斜向条纹。下面来感受下这货的威力吧:
/*循环加强版的线性渐变*/
background:repeating-linear-gradient(72deg,#eee 0,#eee 15px,#111 0,#111 30px);
重复渐变生产斜向条纹
还真是轻松加easy啊,我们还可以试验下其他的奇葩角度:
重复线性渐变实现奇葩角度条纹指哪打哪啊,这感觉爽的不要不要的。不过需要注意的是通过这种方法来创建双色条纹,至少需要四个色标。如果我们需要的是水平和垂直条纹,那么就可以用前面的方法;需要任意角度的斜向条纹就用这种方法;需要的是特殊角度的斜向条纹,就需要本篇开头的方法或是将重复线性渐变和“贴片区块”混合使用。
如果想要把我喜欢的黑白条纹换成红色和玫红,或是蓝色和浅蓝,还要改4个色标的色值。修改四处地方,头疼啊~有没有办法让我们修改一处就能全部都修改了呢?估计在你脑海中已经冒出来了Sass/Less/Stylus
或CSS变量等等方法。
打住一下,在我的文章《你真的理解CSS属性简写的意义吗》中,对于可以“设置多重”效果的属性,例如:background
、box-shadow
有一个很重要的规则,叫做“列表扩散”。我们可以利用这个来让我们的代码变成只需要修改一处地方,就能修改全部颜色的强壮CSS代码。当然这里面还需要一点关于颜色的知识,这里我权当你已经掌握这些知识了。
/*利用列表扩散来让代码更具可读性*/
background:#000; /*设置背景颜色*/
background-image:repeating-linear-gradient(30deg,
hsla(0,0%,100%,.8) 0,
hsla(0,0%,100%,.8) 15px,
transparent 0,
transparent 30px); /*覆盖属性*/
利用列表扩散来让代码更具可读性
嘿嘿,来看看修改最开始处的颜色,全部条纹都发生变化的威力吧。不过这里要了解一点hsla
颜色的知识才行。其实也可以用rgba
颜色来控制。
这一刻我的内心是这样的↓↓↓↓
得意的笑啊
最后插播一句关于重复线性渐变属性的“民意支持率”。
image
建议还是做好“平稳退化”的措施。实在不行就用图片来解决吧,关于一些知识不理解的可以百度或是出门右转,看《漂亮条纹炼成笔记入门篇》。完了-bye~
(报告完毕!)
网友评论