|
內發(fā)光基本解釋完畢，下面講下漸變，其實我在之前的博客里面有提及CSS3漸變http://blog.sina.com.cn/s/blog_74d6cedd0100q9o3.html以及css3畫水晶質感按鈕http://blog.sina.com.cn/s/blog_74d6cedd0100qcdn.html里面主要記漸變的基本寫法，蒙版的用法，有興趣的可以鏈接過去看看。
但是漸變顏色一般只是適用于背景色，就是方方框框那些，對文字不起作用，網上有很多文章講解CSS3文字漸變的，這里寫的是我原創(chuàng)的，等我整理好再另起一篇文章寫《CSS3漸變》，買個預告篇先哈.....
假如用單單用蒙版來做，顏色會比較單調，比較只有黑白的調節(jié)，這樣漸變的過渡比較生硬，所以我采用層疊的方式，用蒙版遮擋一部分實現層之間顏色融合的方式來實現漸變，于是我連:before都用上了，不過這樣就有3個層給我用，依舊還是用.text打底色，.text:after蒙版實現漸變，.text:before提升漸變效果，同時實現內發(fā)光，具體代碼如下：
<!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);透明因為要做內發(fā)光，然后設置投影為text-shadow:0px 0px 5px rgba(110,0,0,0.8);更深的一個顏色#6e0000，帶點透明這樣融合起來效果會好些，調節(jié)內發(fā)光效果，其中你會發(fā)現各個層都有寫text-shadow，但是半徑很小，因為網頁文字是帶鋸齒的，這樣處理的話，文字周圍有了些許投影羽化了邊界，看起來就柔和了，有起到消除鋸齒的作用，最終效果也就出來了，不過因為FF不支持蒙版mask所以只能在webkit內核下的瀏覽器才能看到漸變效果，FF看起來有點那個..如圖：
沒有蒙版效果，所以是最上面.text:before的顏色，不過內發(fā)光，投影這些都還在，效果還勉強可以接受，接著就是傳說中的IE，在IE看起來更那個驚天地泣鬼神，這里就不截圖，自己回去看效果啦....哇咔咔....
雖然現在用不到真正的項目上面去，但是可以看出這樣一個效果，節(jié)省了很多圖片資源，幾個字的標題當然節(jié)省不多，但是如果一個網站下來所有標題都能用css來寫，這樣就可觀了，并且擴展性也強，要修改文字只需要在DW中更改文字即可，很方便。
本文鏈接：http://www.95time.cn/tech/web/2011/8555.asp 
出處：藍色理想
責任編輯：bluehearts
上一頁 純CSS3文字漸變內發(fā)光投影效果 [2] 下一頁
◎進入論壇網頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 3 頁 純CSS3文字漸變內發(fā)光投影效果 [3]
