美文网首页
漂亮条纹炼成笔记进阶篇

漂亮条纹炼成笔记进阶篇

作者: thisDong | 来源:发表于2018-04-21 22:33 被阅读0次

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

    条纹袜的诱惑

    如果你看的很仔细会发现其实上图是个充气娃娃,嘿嘿~先收收口水,我在《漂亮条纹炼成笔记入门篇》中,简单介绍了关于如何使用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-gradientrepeating-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属性简写的意义吗》中,对于可以“设置多重”效果的属性,例如:backgroundbox-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~

    (报告完毕!)

    相关文章

      网友评论

          本文标题:漂亮条纹炼成笔记进阶篇

          本文链接:https://www.haomeiwen.com/subject/fvwflftx.html