看看上面的文字漸變效果，還不錯吧。不會(huì )用Photoshop? NO,NO,NO!這不需要你使用photoshop,甚至不需要任何Javascript，它完全是純CSS的。
這是來(lái)自Nick La的最新的一個(gè)非常具創(chuàng )意的設計－CSS-gradient-text-effect。僅僅是使用了一張PNG格式的透明圖片，它能正常工作于Firefox, Safari, Opera, 和 Internet Explorer 6(需要進(jìn)行小小的hack).
你可以用它來(lái)樣式化你的文章標題，博客名稱(chēng)，側邊欄的大標題或其它任何你想要達到漸變效果的文本。而且要達到這一效果非常簡(jiǎn)單，僅僅需要的只是一張1px的透明漸變PNG圖片覆蓋在文本上，請看過(guò)程:
下面是HTML代碼:
<h1><span></span>CSS Gradient Text</h1>下面是CSS樣式代碼:
比較關(guā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;
}這樣就完成了。但是如果要讓它在IE6下也能正常工作，還需要進(jìn)行小小的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來(lái)實(shí)現標簽的插入:
聯(lián)系客服
