看看上面的文字漸變效果，還不錯吧。不會用Photoshop? NO,NO,NO!這不需要你使用photoshop,甚至不需要任何Javascript，它完全是純CSS的。
這是來自Nick La的最新的一個非常具創(chuàng)意的設計－CSS-gradient-text-effect。僅僅是使用了一張PNG格式的透明圖片，它能正常工作于Firefox, Safari, Opera, 和 Internet Explorer 6(需要進行小小的hack).
你可以用它來樣式化你的文章標題，博客名稱，側邊欄的大標題或其它任何你想要達到漸變效果的文本。而且要達到這一效果非常簡單，僅僅需要的只是一張1px的透明漸變PNG圖片覆蓋在文本上，請看過程:
下面是HTML代碼:
<h1><span></span>CSS Gradient Text</h1>下面是CSS樣式代碼:
比較關鍵的地方是: 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;
}這樣就完成了。但是如果要讓它在IE6下也能正常工作，還需要進行小小的Hack，把下面的代碼放到<head>和</head>之間:
<!--[if lt IE 7]><style>
h1 span {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘gradient.png‘, sizingMethod=‘scale‘);
}
</style>
jQuery prepend 的方法
<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>如果你不想在標題里面有空白內容的標簽，那可以用jQuery來實現(xiàn)標簽的插入:
