纯CSS实现的文本渐变效果

gaofrank 2008-10-29

展开全文

看看上面的文字渐变效果，还不错吧。不会用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>

jQuery prepend 的方法


<script type="text/javascript" src="jquery.js"></script>

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

本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。

转藏分享

QQ空间 QQ好友新浪微博微信

献花（0） +1

来自： gaofrank > 《技术学习》

举报/认领

0条评论

发表

请遵守用户评论公约

类似文章 更多