重构之美－浴火重生的火凤凰CSS3

光明使者

叮叮叮，铛铛铛，上课了上课了，同学们挨个坐好，爆老师要点名啦！
　　额，在上课之前先说一下，本套课程所有图例或示例包括以后涉及到的动画，我都将使用CSS3来设计，不采用一张图片，所以请使用Chrome浏览器。否则你看到乱七八糟的东西或一片空白，I Don't Care！
　　一、Gradient是什么东西？
　　这个问题比较初级，不过初级也能有高级的说法和理解，且听我的忽悠～
　　我记得曾经在读《硅谷革命》的时候，乔帮主说圆角矩形无处不在，然后在那个技术尚不成熟的年代，追求完美的帮主定义下圆角矩形，并运用到了苹果的所有设计上。是的，圆角确实很普及，但是直角矩形的设计依然存在，且不说1%幅度的视觉直角矩形，就是0幅度的纯直角矩形也是大量存在的，而且还不少，随便就能找出例子来，比如书本。比如，三角形，额，你能给三角形加一点圆角上去么？
　　但是色彩，却是没有纯色的存在。也许你会说纯色的设计无处不在。是，纯色设计确实普遍，但是真正进入你的眼睛，你看见的，你感受到的，你体验到的，却不会是纯色，为什么？？？
　　光啊！你生活在一个漫射光的世界里，只要有光，色彩就不会纯净，最多无限的接近纯净。如果你要说没有光的时候就是纯色了，纯黑。呵呵，是这样吗？真正没有光的时候，你根本都不存在对色彩的感知。没有白色，何为黑色？
　　所以，我要说：真正无处不在的，是渐变，因为，光，无处不在。
　　网页设计，我们经常使用到光使用到渐变，长久以来这些都处理为图片，而图片天生的弊端使得我们非常小心谨慎的使用。我们大量使用水平或垂直的规则渐变而回避掉圆形的斜线的合成的不规则渐变，因为只有规则渐变才能平铺，因为不规则渐变存为8bit的png会产生色阶，存为24bit的png文件很大，而存为jpg则因失去精度而模糊，找不到平衡点。于是充斥在页面上的是大量的垂直的规则的渐变，但这显然和真实情况下光的漫射、叠加、混合相去甚远。
　　而CSS3的Gradient，就是这个平衡点，尽管它仍不够完美。
　　二、Linear Gradient【线性渐变——点到点的渐变】
　　这很简单也很容易理解，就是从起点到终点的直线渐变。在这条线上你可以加入色彩的断点。代码为：
　　-webkit-gradient(linear,0% 0%,0% 100%,from(#FFF),color-stop(0.5,#999),to(#000));
　　绿色为起点坐标，蓝色为终点坐标，橙色为断点位置（0.5表示50%）与色彩。以下为几种线性渐变示例：
左上（0% 0%）到右上（0% 100%）即从左到右水平渐变：
background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));
左上到左下即从上到下垂直渐变：
background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(#2A8BBE),to(#FE280E));
左上到右下即斜线渐变：
background-image:-webkit-gradient(linear,0% 0%,100% 100%,from(#2A8BBE),to(#FE280E));
水平渐变，33%处为绿色，66%处为橙色：
background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),color-stop(0.33,#AAD010),color-stop(0.33,#FF7F00),to(#FE280E));
　　留意没？渐变是作为background-image存在，那么就可以做一些通用处理，比如同样的渐变光加不同的背景色：
background:-webkit-gradient(linear,0% 0%,100% 0%,from(rgba(255,255,255,0.7)),color-stop(0.5,rgba(255,255,255,0.2),color-stop(0.5,rgba(255,255,255,0)),to(rgba(255,255,255,0.1))) #2A8BBE;
background:-webkit-gradient(linear,0% 0%,100% 0%,from(rgba(255,255,255,0.7)),color-stop(0.5,rgba(255,255,255,0.2),color-stop(0.5,rgba(255,255,255,0)),to(rgba(255,255,255,0.1))) #AAD010;
background:-webkit-gradient(linear,0% 0%,100% 0%,from(rgba(255,255,255,0.7)),color-stop(0.5,rgba(255,255,255,0.2),color-stop(0.5,rgba(255,255,255,0)),to(rgba(255,255,255,0.1))) #FF7F00;
background:-webkit-gradient(linear,0% 0%,100% 0%,from(rgba(255,255,255,0.7)),color-stop(0.5,rgba(255,255,255,0.2),color-stop(0.5,rgba(255,255,255,0)),to(rgba(255,255,255,0.1))) #FE280E;
　　试试拉伸浏览器的宽度，渐变不错吧，色彩不错吧，嘿嘿，那可是英来网的CI色彩体系。线性渐变很简单，本不打算说的，算热热身吧，今天的重头戏是接下来的硬骨头：Radial Gradient。
　　三、Radial Gradient【径向渐变——圆到圆的渐变】
　　在讲解这个属性前，先要咬文嚼字一下，Radial是什么意思？这很关键！
　　相关的中文翻译有两种：1、径向。2、放射。我不用Photoshop，所以不清楚Photoshop中Radial是如何翻译的，又是如何设置的。在Firework中，Radial被译为放射，其设置也是放射，一根线为半径，从圆心到圆周渐变。为什么我要特意这样咬文嚼字一下？很长一段时间我都没搞清楚这种渐变该怎么设置，前天我给我们的手绘妹妹讲解这个属性的时候，在她的提示下，我才发现为什么我一直搞不清楚这种渐变是怎么实现的即便我已经使用多次了，她反过来给我上了一课，让我明白了原理。美术专业的敏感是不一样，当我给她说两个圆的渐变时，她一下就理解了。最后我发现我搞不清楚的根本原因就在于这个词的理解上，我是按照Firework的放射渐变在理解，按照圆心到圆周这样的起点终点渐变方式在理解，这是一个天大的错误。
　　So，记住了，这不是从一个点到一个点的渐变，而从一个圆到一个圆的渐变。不是放射渐变而是径向渐变。好了，下面我说说什么叫圆到圆的渐变，你现在可以先自己想象一下再接着往下看。其实只要不陷在点到点的渐变上，这个看起来复杂的属性其实很好理解的，当我从该死的点到点跳出来后一下就理解了。
　　首先来看代码，从一个圆到另一个圆的渐变，同样你可以在过程中加入色彩断点，代码为：
　　-webkit-gradient(radial,50 50,50,50 50,0,from(black),color-stop(0.5,red),to(blue))
　　绿色是起始圆的圆心坐标和半径，蓝色是目标圆的圆心坐标和半径，红色是断点的位置和色彩。这里我提醒一下，和放射由内至外不一样，径向由外到内的渐变，刚好相反。好了，就这段代码你能想象出来这是一个什么渐变吗？首先这是两个同心圆，外圆半径为50px，内圆半径为0，那么就是从黑色到红色再到蓝色的正圆形渐变。下面就是这段代码的效果：
backgroud:-webkit-gradient(radial,50 50,50,50 50,0,from(black),color-stop(0.5,red),to(blue));
　　同心圆是最简单的，也是最容易产生点到点误解，因为一看就是从黑色到红色再从红色到蓝色，一条直线。实际上不是这样的，现在我小改一下，仍是同心圆，不过内圆半径改为10px。
backgroud:-webkit-gradient(radial,50 50,50,50 50,10,from(black),color-stop(0.5,red),to(blue));
　　有没有问题？我问一个：为什么中间有一片纯蓝色？如果你疑惑，那么你仍是用放射思路去看的。现在我用纯色来指明，渐变的范围在哪里。
background:-webkit-gradient(radial,50 50,50,50 50,10,from(black),color-stop(0.1,white),color-stop(0.5,white),color-stop(0.5,red),color-stop(0.6,white),color-stop(0.9,white),to(blue));
　　白色区域是Radial的渐变范围，红色断点在白色的50%间。有没有搞清楚？现在我再改变一下，不再是同心圆了，内圆圆心向右20px偏移。
backgroud:-webkit-gradient(radial,50 50,50,70 50,10,from(black),color-stop(0.5,red),to(blue));
　　明白没？如果还没明白，回到白色示例来看：
background:-webkit-gradient(radial,50 50,50,70 50,10,from(black),color-stop(0.1,white),color-stop(0.5,white),color-stop(0.5,red),color-stop(0.6,white),color-stop(0.9,white),to(blue));
　　再不明白，我就没辙啦！一句话总结：所谓径向渐变，所谓圆到圆的渐变，就是指外圆周到内圆周的渐变。如果这个明白了，那么下面这个图就应该明白为什么会产生了：
backgroud:-webkit-gradient(radial,50 50,50,89 50,10,from(black),color-stop(0.5,red),to(blue));
外圆与内圆几乎内切，1px。
backgroud:-webkit-gradient(radial,50 50,50,90 50,10,from(black),color-stop(0.5,red),to(blue));
外圆与内圆内切。
backgroud:-webkit-gradient(radial,50 50,50,91 50,10,from(black),color-stop(0.5,red),to(blue));
内圆刚刚超出外圆1px，产生了两个交点和切线。
backgroud:-webkit-gradient(radial,50 50,50,150 50,10,from(black),color-stop(0.5,red),to(blue));
内圆已经离开外圆。
　　看看当内圆离开外圆时的白色范围：
background:-webkit-gradient(radial,50 50,50,70 50,10,from(black),color-stop(0.1,white),color-stop(0.5,white),color-stop(0.5,red),color-stop(0.6,white),color-stop(0.9,white),to(blue));
　　好了，更多的情况我就不继续了，自己可以去试验。了解了原理，我们来做一个来自顶部的漫射光，开盏灯，嘿嘿：
backgroud:-webkit-gradient(radial,50 50,50,50 1,0,from(black),to(white));
　　贴一张我的设计，你懂得，只有一个div，没有任何图片，一个月前做的，当时还是稀里糊涂，效果现在看来并不好：

　　再贴一个实际应用场所，半个月前做的，有很多进步了：

　　额，绝密的英来网正式版界面发生泄漏事件鸟……So，不能继续了，下课下课！稍等，下课前还有两件事：1、布置家庭作业。2、口水不能忘了喷。
　　四、家庭作业
　　实现一个椭圆形的径向渐变。
　　五、口水话
　　目前渐变还没有完全成熟，最麻烦的是Firefox和Webkit的实现写法差别太大，IE9 Beta也尚未提供支持。渐变类型也仅仅限于线性和径向，且径向渐变不能使用百分比来定义。还有一个问题，在没有GPU的情况下，大面积径向渐变（比如500X500）对渲染性能的影响极其大，甚至大过多个页面内容的叠加！这是我国庆节才发现的，当大面积使用径向渐变的时候，我们的所有交互动画都变得不流畅了。但是当GPU打开的时候，就没任何问题，这也从另外一个角度说明了GPU的重要性和它在可见的未来里所拥有的地位：那是必须的！但是目前Chrome的GPU在渲染上问题相当多，我正在就GPU的各种CSS3渲染问题和Chrome团队联系和沟通。
　　虽然还有很多很多问题，还有很多很多不足，还有很多很多限制，但是它已经可以解决很多问题了，尤其在减少图片的使用下，尤其在显示速度上，没有等待图片下载的过程，没有闪烁，直接渲染呈现，体验相当好。而且代码矢量，维护性通用性那根本不是图片能比拟的。
　　由于忙于英来网正式版的开发，所以根本没有时间来对自己围绕在HTML5上的技术应用和探索和经验心得进行整理成文。国庆期间花了一天时间把这篇文章整理出来了，算是个先行版，所谓前传。之后我又将扑到产品的开发上，离上线不远了，而英来网正式版上线之时就是《重构之美》第四部正式提笔连载之时。
　　下课！

猫性男孩

。。有的字是白色的，是让刮开再看的吗

光明使者

猫性男孩 发表于 2013-3-27 16:13
。。有的字是白色的，是让刮开再看的吗

呵呵~~~~~~~~~~