纯CSS3文字渐变内发光投影效果

mseed · 发表于 2011-12-11 23:36:33

今天群上面同志们在讨论css3内发光效果，自己也就研究一下，写了个效果出来，涉及css3投影，渐变，蒙版，伪类等知识点，现在写下设计思路，仅供参考。发个效果图大家看先：

一般我们都是用css3的box-shadow来实现盒投影，用text-shadow来实现文字投影，box-shadow设置方型盒子投影，用raidus的话可以让盒子产生圆角，看起来就很圆滑舒服，一般的写法是这样的：

-moz-box-shadow:1px 1px 5px #000;

1px(水平方向偏移) 1px(垂直方向偏移) 5px(阴影羽化) #000(颜色);
当偏移量为负数时就向反方向偏移，试试就明白了，这里不贴图。
这个是一般的投影效果，如果是内阴影，那么就加个“inset”属性，写法如下：

-moz-box-shadow:inset 1px 1px 5px #000;

这样就变成了PS里面的内阴影，效果很赞，很实用，如果需要内发光效果，则背景底色深，投影颜色浅，这样就会感觉是发光，而背景颜色深，投影颜色浅，这样看起来就是投影了；
不过群里面讨论的是文字的投影内发光，上面的是顺便提提而已，下面才是正题：
文字是用text-shadow来产生阴影，而且产生的时候能跟随文字的轮廓投影，如下所示：

text-shadow:2px 2px 1px #000;

如果用box-shadow的话效果是这样的：

会根据放文字容器的盒子来投影(我设定了容器的宽度200px，背景未设定颜色透明)，不会跟随文字轮廓投影，效果不是我们所要的；
然而text-shadow没有inset属性，这个就比较棘手了，怎么才能实现文字内投影，同时还有文字渐变？
一层一层来，一般ps处理文字效果都是一层层的剥离，先从文字内发光入手：
我写了这么一个页面试内发光，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body{ background:#CCCCCC;}
.text{ font-size:100px; font-family:"微软雅黑"; color:rgba(0,0,0,0); font-weight:bold; position:relative;text-shadow: 0px 0px 0px #000000;}
.text:after{ content:"广州-龙"; position:absolute; left:0px; text-shadow:0px 0px 3px #fff;}
</style>
</head>

<body>
<div class="text">广州-龙</div>
</body>
</html>
效果图如下：

内投影效果很明显，很正吧，只要稍加改造就是内发光了，啊哈哈.....笑归笑，分析下实现原理先：
既然在一个div层上面实现不了内投影，那么就用多几个层，但是不要在html中添加多余的标签，所以自然而然的就想到用伪类，于是我用了个:after, content里面写上跟div里面一样的文字，结果居然样式一模一样（之前都是写空格什么的，没有写过文字）；
我把.text层相对定位，.text:after绝对定位叠在它上面，因为样式一样，所以说完全重叠的，然后就试着用text-shadow来做效果，但是文字自身的颜色比投影的高，如图：

本身的文字颜色是实体的，感觉处理起来会比较麻烦，所以我下意识的用rgba隐藏它，设置了文字的alpha为0，这里用rgba是因为我只想隐藏文字本身的颜色层，如果用opacity的话，整个层都会消失；所以我用color:rgba(0,0,0,0);来实现效果，写在.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层叠在上面投影产生内发光视觉错觉，这个也就是为什么要设置文字颜色透明的原因，假如文字本身有颜色，那么就会挡住半透明，这样背景色就给挡住了，给普通投影没区别。不过这个方法有瑕疵，而且很致命，就是羽化多出边界的会有羽化的红色，如果投影红色换成白色，这样跟背景融合，效果没话说，但是如果用与底色区别太明显的颜色，这样就恶心了，不过可以调节成为“外发光”效果，事在人为。
内发光基本解释完毕，下面讲下渐变，其实我在之前的博客里面有提及CSS3渐变http://blog.sina.com.cn/s/blog_74d6cedd0100q9o3.html以及css3画水晶质感按钮http://blog.sina.com.cn/s/blog_74d6cedd0100qcdn.html里面主要记渐变的基本写法，蒙版的用法，有兴趣的可以链接过去看看。
但是渐变颜色一般只是适用于背景色，就是方方框框那些，对文字不起作用，网上有很多文章讲解CSS3文字渐变的，这里写的是我原创的，等我整理好再另起一篇文章写《CSS3渐变》，买个预告篇先哈.....
假如用单单用蒙版来做，颜色会比较单调，比较只有黑白的调节，这样渐变的过渡比较生硬，所以我采用层叠的方式，用蒙版遮挡一部分实现层之间颜色融合的方式来实现渐变，于是我连:before都用上了，不过这样就有3个层给我用，依旧还是用.text打底色，.text:after蒙版实现渐变，.text:before提升渐变效果，同时实现内发光，具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body{ background:#CCCCCC;}
.text{ font-size:100px; font-family:"微软雅黑"; font-weight:bold; position:relative;text-shadow: 1px 2px 3px rgba(67,8,7,0.8); color:#c60000;}
.text:after{ position:absolute; left:0px; content:"ONLY $169.99"; color:#ea0000; -webkit-mask-image:-webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.9)), color-stop(40%, rgba(0, 0, 0, 0.5)),to(rgba(0, 0, 0, 0))); text-shadow:0px 0px 2px rgba(234,0,0,1);}
.text:before{content:"ONLY $169.99";text-shadow:0px 0px 5px rgba(110,0,0,0.8); position:absolute; left:0px; color:rgba(0,0,0,0);-webkit-mask-image:-webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0)), color-stop(50%, rgba(0, 0, 0, 0.4)), color-stop(70%, rgba(0, 0, 0, 0.7)),to(rgba(0, 0, 0, 0.9))); z-index:99;}
</style>
</head>

<body>
<div class="text">ONLY $169.99</div>
<div style="-moz-box-shadow:2px 2px 1px #000; width:200px; font-size:40px; height:40px; color:#000; padding:5px;">adfasdf</div>
</body>
</html>
或者你可以点击这个链接下载代码页面看看：http://dl.dbank.com/c00ya6av4u
具体做法是.text设置好高光底色#c60000，.text:after用蒙版，由上至下从透明到不透明拉垂直渐变蒙版，颜色设置深色点的#ea0000，然后.text:before设置color:rgba(0,0,0,0);透明因为要做内发光，然后设置投影为text-shadow:0px 0px 5px rgba(110,0,0,0.8);更深的一个颜色#6e0000，带点透明这样融合起来效果会好些，调节内发光效果，其中你会发现各个层都有写text-shadow，但是半径很小，因为网页文字是带锯齿的，这样处理的话，文字周围有了些许投影羽化了边界，看起来就柔和了，有起到消除锯齿的作用，最终效果也就出来了，不过因为FF不支持蒙版mask所以只能在webkit内核下的浏览器才能看到渐变效果，FF看起来有点那个..如图：

没有蒙版效果，所以是最上面.text:before的颜色，不过内发光，投影这些都还在，效果还勉强可以接受，接着就是传说中的IE，在IE看起来更那个惊天地泣鬼神，这里就不截图，自己回去看效果啦....哇咔咔....
虽然现在用不到真正的项目上面去，但是可以看出这样一个效果，节省了很多图片资源，几个字的标题当然节省不多，但是如果一个网站下来所有标题都能用css来写，这样就可观了，并且扩展性也强，要修改文字只需要在DW中更改文字即可，很方便。

大侠一枝葱 · 发表于 2011-12-17 10:04:35

很棒啊赞一个

		自动登录	找回密码
密码			立即注册

[教程] 纯CSS3文字渐变内发光投影效果

评分

站长推荐 /1