CSS Gradient文字效果

你想创建的标题没有渲染和Photoshop每个标题吗?这里是一个简单的CSS技巧向您展示如何创建渐变文字效果,PNG图像(纯CSS,没有Javascript或Flash)。你所需要的是一个空的< span >标记的标题和应用使用CSS背景图像叠加position:absolute。这种方法已经在大多数浏览器测试:Firefox、Safari、Opera,甚至Internet Explorer 6。继续阅读本文找出。
 

VIEWDemos

DOWNLOADDemo ZIP

 

好处
这是纯CSS技巧,没有Javascript或闪光。它可以工作在大多数浏览器包括IE6(PNG黑客需要)。
它是完美的设计标题。你不必用Photoshop呈现每个标题。这将节省你的时间和带宽。
您可以使用任何web字体和字体大小是可伸缩的。
 
这是如何工作的呢?
关键是非常简单的。基本上我们只是添加一个1 px梯度PNG(alpha透明度)在文本。
 

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上工作
自IE6 PNG-24呈现不正常,需要以下黑客为了显示透明PNG(添加<head>标记之间的任何地方):
!--[if lt IE 7]>

<style>
h1 span {
  background: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale');
}
</style>

<![endif]-->
jQuery预谋版本(语义爱好者)
如果你不想空< span >标记的标题,您可以使用Javascript预谋< span >标记。下面是一个示例使用jQuery预谋的方法:
<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>

原文地址：http://webdesignerwall.com/tutorials/css-gradient-text-effect

转载注明：http://www.cnblogs.com/leejersey/p/3478096.html

posted @ 2013-12-17 11:26  leejersey  阅读(753)  评论(0)  编辑  收藏  举报