用CSS渐变来创建你所想要的任何几何背景图案吧

 2016-09-27 14:55

之前的文章中,我们提起了用CSS来创建基础的条纹背景图案。但我们是不满足的生物,用CSS还能找到其他不同的图案,比如说网格、波点、棋盘等。

网格

网格的创建也是基于条纹线条来做的。当我们把多个渐变团组合起来,让他们透过彼此的透明区域呈现时,神奇的事情就发生了:


background:white;
background-image:linear-gradient(90deg,
    rgba(200,0,0,.5) 50%,transparent 0),
    linear-gradient(rgba(200,0,0,.5) 50%,transparent 0);
background-size:30px 30px;

有些时候,我们希望网格中间的每个格子的大小可以调整,而网格线条粗细同时保存固定的话,那可以通过使用长度而不是百分比来作为色标的场景。

background:white;
background-image:linear-gradient(90deg,
    rgba(200,0,0,.5) 15px,transparent 0),
    linear-gradient(rgba(200,0,0,.5) 15px,transparent 0);
background-size:30px 30px;

我们甚至还可以搞大点,把不同线宽、不同颜色的网格图案叠加起来,得到一个更加逼真的效果:


background:white;
background-image:
    linear-gradient(90deg,rgba(200,0,100,.5) 15px,transparent 0),
    linear-gradient(rgba(100,100,0,.5) 50%,transparent 0),
    linear-gradient(90deg,rgba(60,60,10,.5) 20px,transparent 0),
    linear-gradient(90deg,transparent 0,rgba(160,160,160,.2) 40%);
background-size:30px 30px,20px 20px,
                40px 40px,30px 30px;

波点

到上面这里,我们一直使用的是条线渐变的原理,如果你属性PS,那应该知道还有一个渐变叫做径向渐变。通过它,我们可以创建圆形、椭圆,或者圆点的整列:


坦白说。这样不是很实用,我们应该把这个错开会更好点,于是我们改变下结构就是:


background:#58a;
background-image:
    radial-gradient(#fff 30%,transparent 0),
    radial-gradient(#fff 30%,transparent 0);
background-size:40px 40px;
background-position:0 0,20px 20px;

这里的20px是取的40px值的一半,如果我们需要修改这个数字,那就要同时修改4个地方。显然,这很痛苦。于是我们使用了SCSS预处理器,这样就方便多了:

@mixin polka($size,$dot,$base,$accent){
    background:$base;
    background-image:
        radial-gradient($accent $dot,transparent 0),
        radial-gradient($accent $dot,transparent 0);
    background-size:$size $size;
    background-position:0 0,$size/2 $size/2;
}

在使用时,我们就可以直接这样调用它了:

@include polka(40px,30%,#fff,#58a);

棋盘

棋盘图案很多情况下都会用到,photoshop里面,这种格式通常来说是透明的意思。棋盘图案似乎可以通过平铺的方式来制作,只要两种不同颜色的方格,且相互间隔就能做出这种效果。

但在技术上,我们用CSS渐变来创建的平铺方块时会发现,仅用一层CSS渐变无法创建四周有空隙的方块。如果你有疑惑,欢迎尝试下。


那么我们是不是可以通过其他图形来拼合成所需的形状呢?答案肯定的三角形*2

我们先来创建一个三角形吧:


background:#eee;
background-image:linear-gradient(45deg,#bbb 50%,transparent 0);
background-size:30px 30px;

额,好像三角形大了点。没事,我们把50%调整为25%就缩小了,顺便把另外那个也创建下:

background:#eee;
background-image:linear-gradient(45deg,#bbb 25%,transparent 0),
                linear-gradient(45deg,transparent 75%,#bbb 0);
background-size:30px 30px;


我了个去,怎么变成这样了,额。应该把两个渐变错开点放的:

background:#eee;
background-image:linear-gradient(45deg,#bbb 25%,transparent 0),
                linear-gradient(45deg,transparent 75%,#bbb 0);
background-position:0 0,15px 15px;
background-size:30px 30px;


好了,到现在为止,棋盘布局的一班我们就创建好了,下面只要再调整下数值,我们就可以很容易的搞出另外一个方形了:

background:#eee;
background-image:linear-gradient(45deg,#bbb 25%,transparent 0),
                linear-gradient(45deg,transparent 75%,#bbb 0),
                linear-gradient(45deg,#bbb 25%,transparent 0),
                linear-gradient(45deg,transparent 75%,#bbb 0);
background-position:0 0,15px 15px,15px 15px,30px 30px;
background-size:30px 30px;

和上面波点一样,如果你嫌麻烦,也可以转换成预处理器再调用。另外,《CSS揭秘》书中还提到SVG的方法,也比较实用,有兴趣的朋友可以查看下。

作者头像

作者:紫铜炉

自由博主,网页设计师。我关注科技产品和个人博客发展,注重用户体验和界面优化。

 发表评论: