CSS3网页制作实例:实现网页文字渐变内发光投影
| bsp; 来实现效果，写在.text的话就是隐藏掉.text的 文字本身颜色层，同时.text：after也会继承这隐藏属性，如果你单单想隐藏掉.text：after的话，那就在.text：after里面写，这样.text本身的颜色层就会保留；然后再在.text用text-shadow: 0px 0px 0px #000000; 投影出一个不偏移不羽化的实体投影打底色；
对于.text：after的投影层，需要涉及到ps羽化选区的知识，在羽化图像的时候，是根据选区边界为中心，向两边羽化，如果羽化值为10px，那么就是左右各5px，那么以选区边界为中心的10px像素范围会减缓的从不透明过渡到全透明，如图：
中心是红色，背景是黄色，羽化的时候原来不透明的红色区域也出现了半透明状态与背景黄色相融呈橙色，然而说这么多羽化的东西有什么用呢? 有用的，如果我们把背景色定死一个区域，上面的层羽化的话，会出现什么情况呢? 看下面这个ps图片你就应该明白了：
下面是一个“广州”的黑色纯文本文字，然后我复制多一个图层出来栅格化然后高斯模糊它，结果模糊层透过下面看到部分黑色纯文本文字与上面的红色半透明区域融合，视觉上有点内阴影的感觉。这个就是我实现 纯css3内发光的原理：一个.text纯文字层，一个.text:after层叠在上面投影产生内发光视觉错觉，这个也就是为什么要设置文字颜色透明的 原因，假如文字本身有颜色，那么就会挡住半透明，这样背景色就给挡住了，跟普通投影没区别。不过这个方法有瑕疵，而且很致命，就是羽化多出边界的会有羽化 的红色，如果投影红色换成白色，这样跟背景融合，效果没话说，但是如果用与底色区别太明显的颜色，这样就恶心了，不过可以调节成为“外发光”效果，事在人为。 渐变gradient内发光基本解释完毕，下面说下渐变，其实我在之前的博客里面有提及 CSS3渐变http://blog.sina.com.cn/s/blog_74d6cedd0100q9o3.html以及 css3画水晶质感按钮http://blog.sina.com.cn/s/blog_74d6cedd0100qcdn.html 里面主要记渐变的基本写法，蒙版的用法，有兴趣的可以通过链接看看。 但是渐变颜色一般只是适用于背景色，就是方方框框那些，对文字不起作用，网上有很多关于渐变的文章，而我这里是用蒙版来做渐变，但是假如用单单用蒙版来做，颜色会比较单调，只有黑白的调节，这样渐变的过渡比较生硬，所以我采用层叠的方式，用蒙版遮挡一部分实现层之间颜色融合的方式来实现渐变，于是我连:before都用上了，依旧还是用.text打底色，.text:after蒙版实现渐变， |
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢! |
