纯CSS实现的文本渐变效果
重要提示:谢谢Gloridea的留言，如果要让此文本渐变效果正常工作于IE6下，需要一个Hack，大家可以查看这个英文的Webfx的Hack方法，或是搜索一些中文的相关Hack。
看看上面的文字渐变效果，还不错吧。不会用Photoshop? NO,NO,NO!这不需要你使用photoshop,甚至不需要任何Javascript，它完全是纯CSS的。
这是来自Nick La的最新的一个非常具创意的设计－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>
<![endif]–>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来实现标签的插入:
如果有什么不明白，欢迎在这里或到Nick La那里留言咨询。
你可能还会感兴趣
你可能还会感兴趣的文章...你还能做些什么？
- 查看前一篇文章 网页设计者必备的10000多个免费icon图标资源下载或是下一篇文章 Design Police:Bring bad Design to justice
- 本文标签: Tags: CSS, Design Tips, Tutorial
- 本文分类:CSS
关于作者
- 作者名称: paran
- 作者网址: http://parandroid.com
- 一句话简介:I Am kEy tO ThE lOcK yOUr HOusE.
奇技淫巧啊，呵呵。
你最近的更新速度实在太火箭了，阅读速度跟不上了。
佩服，这个佩服，做记号
老帕 最近这个井喷的速度 需要注意呀
实在是跟不了 2天没上google reader 就。。。
老帕，IE6下好象还是不行哦；FF下没有问题
@gloridea
这需要一个IE6的Hack，你可以看一下这篇http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html，或是搜索其它中文的Hack方法。
谢谢，学习一下先！