纯CSS实现的文本渐变效果


  来源: | 作者: | 浏览: | 发送给好友 | 添加到收藏夹

重要提示:谢谢Gloridea的留言,如果要让此文本渐变效果正常工作于IE6下,需要一个Hack,大家可以查看这个英文的Webfx的Hack方法,或是搜索一些中文的相关Hack。

纯CSS实现的文本渐变效果

看看上面的文字渐变效果,还不错吧。不会用Photoshop? NO,NO,NO!这不需要你使用photoshop,甚至不需要任何Javascript,它完全是纯CSS的。

这是来自Nick La的最新的一个非常具创意的设计-CSS-gradient-text-effect。仅仅是使用了一张PNG格式的透明图片,它能正常工作于Firefox, Safari, Opera, 和 Internet Explorer 6(需要进行小小的hack).

你可以用它来样式化你的文章标题,博客名称,侧边栏的大标题或其它任何你想要达到渐变效果的文本。而且要达到这一效果非常简单,仅仅需要的只是一张1px的透明渐变PNG图片覆盖在文本上,请看过程:

下面是HTML代码:

CSS Gradient Text

下面是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,把下面的代码放到和之间:

jQuery prepend 的方法

如果你不想在标题里面有空白内容的标签,那可以用jQuery来实现标签的插入:

查看演示&下载地址

如果有什么不明白,欢迎在这里或到Nick La那里留言咨询。

上一篇
闪动论坛 打印此页 发送给好友 返回顶部