前面99在W3cplus上发表了两篇有关于CSS3质感的分析《CSS3质感分析——表面线性渐变》和《CSS3质感分析——牌匾与盒子》，今天继续为大家介绍一篇有关于CSS3的纹理制作教程。说起CSS3纹理制作，主要是通过gradient和background-size两个属性来实现，前段时间在《Web页面的纹理背景设计与资源》提供了各种纹理制作的资源，其中最有吸引力的是CSS3制作的纹理效果，说细的点击《37个CSS3 Patterns Gallery》。可能有很多同学不太清楚，这37个效果是怎么来得？那么今天由99为大家详细介绍一下其制作原理，如果你对这个感兴趣，那就继续往下阅读吧。
今天我将从原理到实现的来讲解 css3纹理背景的制作方法。我们将制作出几个碉堡了的效果~
当然更多效果可以狠狠点这里。
为了准备今天的讲解，首先要温习两个知识点
1、线性渐变：
详细的介绍点击《CSS3 Gradient》。
2、填充效果
虽然今天讲的是css3，但如果没有photoshop帮助理解，我相信大部分人会听不懂。
首先我们打开ps，新建一个4px*4px的小格子 （无视那张截图。。。写错了。。）
打开后，我们选择 铅笔工具，选择1px 画笔大小，按我的示意图画个斜线（画之前按住alt键放大！！）
之后我们选择 编辑- 定义图案，点击确定。
之后我们再新建一个 1000*1000的画布，选择编辑-填充，选择使用图案 ，选择自定义图案，之后会发现我们刚才定义的那个图片赫然出现了，点击确定，结果。。。。
为什么要先讲解这个例子呢?古人云。。。不积跬步，无以至千里。。。。。。。。。。我们制作这一类渐变的核心，就是要制作出 “跬步”来，之后利用背景平铺技术，配合背景大小技术，在整个页面进行平铺。
我们的跬步代码
-webkit-background-size: 10px 10px; -moz-background-size: 10px 10px; background-size: 10px 10px; /* 控制条纹的大小 */
表示一个10px的“跬步”
思路1 线性渐变叠加
这份渐变图表达了我们绘制渐变的另一个思想。
从透明开始，到50% 突然突变为 50%透明度，同时带上色。如下图所示：
大家发现了么，同样的颜色，在50%透明度部分产生了渐变的叠加，这就是我们的核心思路。
background-image: -webkit-linear-gradient(top, rgba(200, 0, 0, 0) 50% ,rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5) 100%), -webkit-linear-gradient(left, rgba(200, 0, 0, 0) 50% ,rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5) 100%);
解释一下，我们利用top left来控制渐变的方向。利用rgb 0 来控制透明度，利用百分比来控制进度，从左到右与从上到下的图案叠加后，即完成我们的效果。之后，加上“跬步”
body{
background-color:white;
background-image: -webkit-linear-gradient(top, rgba(200, 0, 0, 0) 50% ,rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5) 100%),
-webkit-linear-gradient(left, rgba(200, 0, 0, 0) 50% ,rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5) 100%);
-webkit-background-size: 10px 10px;
-moz-background-size: 10px 10px;
background-size: 10px 10px; /* 控制条纹的大小 */
}
效果如下：
第一个效果ok
思路2 斜方向渐变法
我们首先来看一张图片
注意渐变的起点，当渐变起点设置为 left top时，渐变从左上角一直到右下角，以此类推，利用这种技巧我们可以制作出斜向的渐变
-webkit-linear-gradient(left top, rgba(200, 0, 0, 0) 50% ,rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5) 100%); -webkit-linear-gradient(left bottom, rgba(200, 0, 0, 0) 50% ,rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5) 100%)
这样的透明50%渐变来完成效果。之后我们观察
发现了没，我们可以用刚才的 left top方法，只需要让空白部分多一点，就可以用四个小三角形组成了！ 我们把断点设置为 75%，之后利用四个渐变叠加：
left top ;left bottom;right top;right,bottom 略微调整下颜色让他有点立体感
background-color:white; background-image: -webkit-linear-gradient(left top, rgba(200, 0, 0, 0) 75% ,rgba(99, 99, 99, .5) 75%, rgba(99, 99, 99, .5) 100%), -webkit-linear-gradient(right top, rgba(200, 0, 0, 0) 75% ,rgba(0, 0, 0, .5) 75%, rgba(0, 0, 0, .5) 100%), -webkit-linear-gradient(right bottom, rgba(200, 0, 0, 0) 75% ,rgba(99, 99, 99, .5) 75%, rgba(99, 99, 99, .5) 100%), -webkit-linear-gradient(left bottom, rgba(200, 0, 0, 0) 75% ,rgba(0, 0, 0, .5) 75%, rgba(0, 0, 0, .5) 100%); -webkit-background-size: 16px 16px; -moz-background-size: 16px 16px; background-size: 16px 16px; /* 控制条纹的大小 */
接下来看径向渐变的几个效果：
径向渐变的参数其实非常复杂，但是实际我们只需要了解一部分就可以。具体可以查阅径向渐变的api.
radial-gradient(circle,#f00,#ff0,#080); radial-gradient(center,circle,#f00,#ff0,#080); radial-gradient(50%,circle,#f00,#ff0,#080); radial-gradient(circle,#f00 0%,#ff0 50%,#080 100%); radial-gradient(circle cover,#f00,#ff0,#080);
以上的代码均可以制作出上述效果。
径向渐变其实有两个要点：
- 渐变的中心
- 渐变的颜色断点。
上述写法大家可以看到有三个断点
#f00 0%,#ff0 50%,#080 100%
在实际应用中，径向渐变一般由圆心出发，经过断点的渐变，扩展到整个背景。我们先做两个简单的例子。
div{
background-color:white;
background-image: -webkit-radial-gradient(#f00 0%,#ff0 50%,#080 100%);
-webkit-background-size: 16px 16px;
-moz-background-size: 16px 16px;
background-size: 16px 16px; /* 控制条纹的大小 */
}
以上例子配合background-size 使径向渐变的效果均匀的平铺在画布上。同样，径向渐变背景也有叠加的功效，甚至可以跟线性渐变一起叠加
首先观察这张图，很明显看到中心是径向渐变，外层两个三角是线性渐变。
div{
background-color:white;
background-image: -webkit-radial-gradient(white 7%, #111 30%, transparent 40%),
-webkit-linear-gradient(left top, black 5%, #111 20%, transparent 20%, transparent 80%, black 80%);
-webkit-background-size: 16px 16px;
-moz-background-size: 16px 16px;
background-size: 16px 16px; /* 控制条纹的大小 */
}
这个效果是线性渐变跟径向渐变的叠加效果
前面说明了 三角形的做法是用 渐变起始位置+颜色突变组成，而球体效果，可以用 高光部分（white）+ 阴影轮廓（由灰到黑）+透明外圈的组合。之后我们考虑以下效果
在之前的质感文章分析中，我们分析过这一类的质感，他其实是由box-shadow 1px Y 轴的偏移来制作而成的。而渐变怎样用box-shadow呢？
答案很简单，我们可以利用渐变叠加，配合background-position来控制。
1、我们绘制出一个“点”。常用的写法即单色突变到透明色，不必写0%与100%。
background-image:-webkit-radial-gradient(black 15%, transparent 16%)
2、我们利用浅一点的颜色来做“微光”
background-image:-webkit-radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%);
如图所示
之后就是渐变叠加效果了。background-position同样拥有操纵x,y轴坐标的威力，只需要对每个图像分别调整即可~让背景偏离1px，即可达到我们想要的效果。
background-position: 8px 8px, 8px 9px;
完整代码:
div{
background-color:#282828;
background-image:-webkit-radial-gradient(black 15%, transparent 16%),
-webkit-radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%);
background-position: 8px 8px, 8px 9px;
-webkit-background-size: 16px 16px;
-moz-background-size: 16px 16px;
background-size: 16px 16px; /* 控制条纹的大小 */
}
以上我们可以看出，transparent颜色在径向渐变中是非常的常见的，再举个例子
-webkit-radial-gradient(black 70%, white 100%, white)
中心black 之后渐变到白色，在区域内这个样子我们可以想象一下，应该是一个黑色点外层发光的效果。但配合背景重复，又可以组合成新的。
div{
background-image: -webkit-radial-gradient(black 70%, white 100%, white);
-webkit-background-size: 16px 16px;
background-size: 16px 16px; /* 控制条纹的大小 */
}
是不是非常神奇。。。接下来看两个demo的制作方法：
根据前面介绍的知识点，只需要起点黄色-到达黄色边界-起点绿色-到达绿色边界-透明的写法即可。
background-image: -webkit-radial-gradient(50% 50% , circle , #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0));
下面我们调整圆心X轴到100%，很容易理解，图形的圆心会跑到最右边，Y轴不变
background-image: -webkit-radial-gradient(50% 100% , circle , #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0))
大家注意，这里有个非常重要的现象，下面残缺了一部分，出现了一个半圆。这就是半圆的画法，再次记住，下面是 残缺的 我们同样可以尝试 Y轴到100% x轴也到100% 那么现象应该是图形在右下角的1/4圆;
注意 background-position 只改变的是图案整体的位置！不会破坏图案本身，最多会出现 “穿透”的现象，注意，这与圆心变化是截然不同的
div{
width:100px;
height:100px;
margin-top:10px;
border:1px solid #ddd;
}
div{
background-color: #63773F;
background-image: -webkit-radial-gradient(50% 50% , circle , #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0));
background-position:50px 0px;
background-size: 100px 100px;
}
大家注意，仍然是在中心的渐变，但是向右平移了50px，图案从左边穿透出来了！ 一定不要跟圆心变化混淆！ 3 渐变叠加性。我们可以尝试
div{
width:100px;
height:100px;
margin-top:10px;
border:1px solid #ddd;
}
div{
background-color: #63773F;
background-image: -webkit-radial-gradient(50% 50% , circle , #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0)),
-webkit-radial-gradient(50% 60% , circle , red 3%, black 4%, black 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0));
background-position:50px 0px;
background-size: 100px 100px;
}
注意上面的把下面的黑色圈子遮住了！！！ 即，渐变写在上面的会遮住下面的 3个重要的原则了解完毕后，我们开始做一个非常牛逼的效果。 第一次看到这图，很多人都有种 “吓尿了”的感觉。。其实我也是。。
为了降低难度，我们先分析一个“跬步” 在进行渐变重复。
根据渐变的叠加性，拆分一下
其实怎么拆分都可以，这只是我个人理解而已、 我们配合上面的文章分析一下图片的位置 1号图 中心渐变Y轴略靠下（因为图片无损，圆心在边缘）- position X在最右边（总宽度的一半） 2号图 中心渐变Y轴略靠上（因为图片无损，圆心在边缘）- position X在最右边（总宽度的一半） 上两张position最右最左都是一样的。 3号图 这张图可以有两个理解，一是position Y在最下面，圆心在边缘，之后圆心调整位置，Y轴略增大，靠下 或者是 直接position定位到最上面也可以。 4号图类似 5号跟六号我们已经讲过了，一个半圆，所以不需要调整background-position 只需要圆心X轴 100% 或0即可 7号跟八号也很明显，一个半圆，圆心X轴100%或者0 ，跟5号6号类似，之后用background-position X轴，Y轴各调整50px即可。 我们记录下刚才的分析，然后把顺序排列好，注意小圆写在大圆前面即可~
background-image: -webkit-radial-gradient(50% 59% , circle , #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0)),//1号 -webkit-radial-gradient(50% 41% , circle , #364E27 3%, #D2CAAB 4%, #D2CAAB 11%, rgba(210, 202, 171, 0) 12%, rgba(210, 202, 171, 0)),//2号 -webkit-radial-gradient(50% 59% , circle , #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0)),//3号 -webkit-radial-gradient(50% 41% , circle , #364E27 3%, #D2CAAB 4%, #D2CAAB 11%, rgba(210, 202, 171, 0) 12%, rgba(210, 202, 171, 0)),//4号 -webkit-radial-gradient(100% 50% , circle , #D2CAAB 16%, rgba(210, 202, 171, 0) 17%),//5号 -webkit-radial-gradient(0% 50% , circle , #364E27 16%, rgba(54, 78, 39, 0) 17%),//6号 -webkit-radial-gradient(100% 50% , circle , #D2CAAB 16%, rgba(210, 202, 171, 0) 17%), //7号 -webkit-radial-gradient(0% 50% , circle , #364E27 16%, rgba(54, 78, 39, 0) 17%); //8号
之后写好位置（1-8）
background-position: 50px 0px,50px 0px,0 50px,0 50px,0 0%, 0 0%,50px 50px,50px 50px;
之后配好“跬步” 大小
background-size: 100px 100px;
完整代码
div{
width:300px;
height:300px;
margin-top:10px;
border:1px solid #ddd;
}
div{
background-color: #63773F;
background-image: -webkit-radial-gradient(50% 59% , circle , #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0)),
-webkit-radial-gradient(50% 41% , circle , #364E27 3%, #D2CAAB 4%, #D2CAAB 11%, rgba(210, 202, 171, 0) 12%, rgba(210, 202, 171, 0)),
-webkit-radial-gradient(50% 59% , circle , #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0)),
-webkit-radial-gradient(50% 41% , circle , #364E27 3%, #D2CAAB 4%, #D2CAAB 11%, rgba(210, 202, 171, 0) 12%, rgba(210, 202, 171, 0)),
-webkit-radial-gradient(100% 50% , circle , #D2CAAB 16%, rgba(210, 202, 171, 0) 17%),
-webkit-radial-gradient(0% 50% , circle , #364E27 16%, rgba(54, 78, 39, 0) 17%),
-webkit-radial-gradient(100% 50% , circle , #D2CAAB 16%, rgba(210, 202, 171, 0) 17%),
-webkit-radial-gradient(0% 50% , circle , #364E27 16%, rgba(54, 78, 39, 0) 17%);
background-position: 50px 0px,50px 0px,0 50px,0 50px,0 0%, 0 0%,50px 50px,50px 50px;
background-size: 100px 100px;
}
最复杂的过去了，我们分析几个简单的例子~
我们一眼就可以看出来 重复的图像是
根据我们的分析，他有四个重复的1/4圆，这个时候先不要考虑渐变叠加1/4圆，虽然我们也可以很容易的写出来，但是代码较多 这明显是背景一个大圆+ 一个大圆，上移一个半径，左移一个半径，之后上面跟左边都冲开了背景而已。 因此我们的核心代码只有两句 background-position: 0 0px, 0px 40px; background-size: 80px 80px; 至于渐变的写法，就不用说了。。。一个圆而已。。 另一个技巧 画线。这个还是蛮常用的，写法很简单 透明起点（像素）+ 线1px +透明 即可
background-image: -webkit-radial-gradient(50% 50%, circle, rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px)
效果：
配合我们讲解的渐变叠加，大家可以考虑一下动手做做这37个效果：
最后希望这篇文章能帮你更好的理解渐变如何制作纹理。同时非常感谢99的整理。
如需转载，烦请注明出处：http://www.w3cplus.com/css3/surface-linear-gradient-with-css3-part3.html