只用CSS做出漸變字體的效果
這種利用CSS技術(shù)來制作出漸變或特殊的文字效果并不少見，好處就是可以在一些大標(biāo)題中為字體添加漸變效果，而不需要每次都用圖片替代，比如本文的最后這些案例。
你想制作漂亮的標(biāo)題而不用將每個(gè)標(biāo)題都做成圖片嗎？這里是一個(gè)簡單的CSS技巧，它將向你展示使用一個(gè)png圖片制作漸變文字的方法(純CSS、無Javascript或Flash)。而你所需要的僅僅是在標(biāo)題里面的一個(gè)空<span>標(biāo)簽，它使用背景圖片和position:absolute屬性將標(biāo)題覆蓋。該技巧經(jīng)主流瀏覽器測試：Firefox, Safari, Opera, 以及Internet Explorer 6。
好處
這是一個(gè)純CSS技巧，無需JS或Flash。它兼容主流瀏覽器包括IE6 (需要使用PNG hack)。
它對于設(shè)計(jì)標(biāo)題是很完美的。你無需使用Photoshop制作每一個(gè)標(biāo)題。這也顯然能夠節(jié)省你的時(shí)間和帶寬。
你當(dāng)然可以是用任何網(wǎng)絡(luò)字體和字體型號(hào)。
它是如何工作的?
這個(gè)小技巧很簡單?；旧衔覀冎皇窃谖淖稚厦嫣砑恿艘粋€(gè)1px的漸變PNG圖片(使用alpha透明)
HTML代碼
<h1><span></span>CSS Gradient Text</h1> |
CSS代碼
這里的關(guān)鍵點(diǎn)是h1 { position: relative } 和h1 span { position: absolute }
h1 {
font: bold 330%/100% "Lucida Grande";
position: relative;
color: #464646;}h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;} |
是的，就這些，你已經(jīng)搞定了。點(diǎn)擊此處查看演示頁面。
讓它在IE6中可用
因?yàn)镮E6不能正確渲染24位PNG圖片，為了顯示透明的png圖片，下面的hack是必須的。(使用HTML條件注釋的方法)在head部分的任何一個(gè)地方添加以下代碼：
<!--[if lt IE 7]><style>h1 span { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale');}</style><![endif]--> |
這正式我們?yōu)槭裁丛鲪篒E6的原因之一！
jQuery動(dòng)態(tài)加入版本(對語義愛好者有用)
如果你不想在標(biāo)題里面有個(gè)空的<span>標(biāo)簽，你可以使用Javascript動(dòng)態(tài)加入<span>標(biāo)簽。使用jQuery的prepend 方法可以很容易的實(shí)現(xiàn)：
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">$(document).ready(function(){ //prepend span tag to H1
$("h1").prepend("<span></span>"); });</script> |
更多的例子
想要實(shí)現(xiàn)Web 2.0的光滑文字？
如此類推，你可以將此技巧用于任何固定背景色的情況(漸變色和背景色一樣)
圖案/紋理
你也可以用一個(gè)磚瓦背景圖片?？囱?，這就是這就是一個(gè)斑馬圖案?！敲矗S意發(fā)揮吧!
局限性…
這個(gè)技巧只適用于固定背景色的元素。你的漸變色(PNG 圖片) 必須與背景色是同一個(gè)顏色。
如果你想兼容IE6，就需要使用IE6的PNG hack(比如濾鏡或JS方法)
如果你的漸變圖片比標(biāo)題要高，那么這個(gè)文字將是不能被選擇的。
更多建議：