位置：首页>> 网络编程>> 网页设计>> 纯CSS3文字渐变内发光投影效果（3）

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

作者：a287019674　　发布时间：2011-08-24 20:15:10　

标签：css3,文字,发光,投影

内发光基本解释完毕，下面讲下渐变，其实我在之前的博客里面有提及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>cidianwang.com</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看起来有点那个..如图：

<IMG height=95 alt="纯CSS3文字

没有蒙版效果，所以是最上面.text:before的颜色，不过内发光，投影这些都还在，效果还勉强可以接受，接着就是传说中的IE，在IE看起来更那个惊天地泣鬼神，这里就不截图，自己回去看效果啦....哇咔咔....

虽然现在用不到真正的项目上面去，但是可以看出这样一个效果，节省了很多图片资源，几个字的标题当然节省不多，但是如果一个网站下来所有标题都能用css来写，这样就可观了，并且扩展性也强，要修改文字只需要在DW中更改文字即可，很方便。

第一页上一页 1 2

投稿

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

猜你喜欢