论坛首页 → Web前端技术论坛 →

CSS文本渐变效果

浏览 12518 次
锁定老帖子 主题：CSS文本渐变效果
精华帖 (3) :: 良好帖 (2) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • jsntghf
  • 等级: 三星会员
  • 性别:
  • 文章: 60
  • 积分: 320
  • 来自: 苏州
   发表时间：2009-12-22   最后修改：2010-12-01
CSS

你不想打开PhotoShop制作每一张标题文字图片的渐变效果吧，这次是一个简单的技巧——仅仅使用一张图片来实现所有的标题文本的渐变效果。

 

仅仅使用一个空的<span>，运用背景图片设置position：absolute覆盖在文本上。

 

这个技巧几乎在所有浏览器上都工作得很好：FireFox，Safari，Opera，就连IE6也很好。

 

特点：

1.纯CSS实现，很好的兼容性
2.绝佳的美化标题的技巧，不用PS每张标题图片
3.可运用于任何web字体，并且文本是可以缩放的

 

想知道如何做的么，继续阅读吧。

 

html代码：

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>CSS Gradient Text</title>

    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        $(".jquery h1").prepend("<span></span>");
      });
    </script>

    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <div class="gradient1">
      <h1><span></span>CSS Gradient Text</h1>
      <h1 style="font-family: Georgia, 'Times New Roman', Times, serif;"><span></span>How about Georgia?</h1>
    </div>

    <div class="gradient2">
      <h1><a href="http://www.webdesignerwall.com"><span></span>Black Glossy Link</a></h1>
    </div>

    <div class="gradient3">
      <h1><span></span>Dark on Light Sample</h1>
    </div>

    <div class="gradient4">
      <h1><span></span>Metallic shine</h1>
      <h2>Doesn't this look cooler than Web 2.0?</h2>
    </div>

    <div class="gradient5">
      <h1><span></span>Hello, I'm Shinely</h1>
    </div>

    <div class="gradient6">
      <h1><span></span>Vertical Stripe</h1>
    </div>

    <div class="gradient7">
      <h1><span></span>Horizontal Stripe</h1>
    </div>

    <div class="pattern">
      <h1><span></span>Wow, Zebra</h1>
    </div>

    <div class="gradient-ie">
      <h1><span></span>It works on IE6 too!</h1>
    </div>

    <div class="gradient1 jquery">
      <h1>jQuery prepend version</h1>
    </div>

  </body>
</html>

 

css代码：

 

body {
	font: 75%/160% Arial, Helvetica, sans-serif;
	width: 700px;
	margin: 20px auto;
}

.gradient1 h1 {
	font: bold 330%/100% "Lucida Grande", Arial, sans-serif;
	position: relative;
	margin: 30px 0 50px;
	color: #464646;
}
.gradient1 h1 span {
	background: url(images/gradient-white.png) repeat-x;
	position: absolute;
	display: block;
	width: 100%;
	height: 31px;
}

.gradient2 h1 {
	font: bold 310%/100% "Lucida Grande", Arial, sans-serif;
	position: relative;
	margin: 30px 0 50px;
	color: #464646;
	text-transform: uppercase;
	letter-spacing: -2px;
}
.gradient2 h1 span {
	background: url(images/gradient-glossy.png) repeat-x;
	position: absolute;
	display: block;
	width: 100%;
	height: 18px;
}
.gradient2 a {
	color: #000;
	text-decoration: none;
}
.gradient2 a:visited {
	color: #000;
}
.gradient2 a:hover {
	color: #555;
}

.gradient3 {
	background: #d7e1e3;
	padding: 30px 10px;
	padding: 30px 0 30px 30px;
}
.gradient3 h1 {
	font: bold 280%/100% "Lucida Grande", Arial, sans-serif;
	position: relative;
	margin: 0;
	color: #000;
	letter-spacing: -2px
}
.gradient3 span {
	background: url(images/gradient-grey.png) repeat-x;
	position: absolute;
	display: block;
	width: 100%;
	height: 29px;
}

.gradient4 {
	background: #000 url(images/gradient4-bg.png) repeat-x left bottom;
	padding: 30px 0 60px 30px;
	margin: 30px 0 50px;
}
.gradient4 h1 {
	font: normal 340%/100% "Lucida Grande", Arial, sans-serif;
	position: relative;
	margin: 0;
	color: #fff;
}
.gradient4 h2 {
	font: normal 150%/100% "Lucida Grande", Arial, sans-serif;
	margin: 10px 0 0;
	color: #b7b7b7;
}
.gradient4 span {
	background: url(images/gradient-dark.png) repeat-x;
	position: absolute;
	bottom: -0.1em;
	display: block;
	width: 100%;
	height: 29px;
}

.gradient5 {
	background: #000;
	padding: 30px 0 30px 30px;
	margin: 30px 0 50px;
}
.gradient5 h1 {
	font: normal 330%/100% "Lucida Grande", Arial, sans-serif;
	position: relative;
	margin: 0;
	color: #fff;
	letter-spacing: -1px;
}
.gradient5 h1 span {
	background: url(images/gradient-shine.png) repeat-x;
	position: absolute;
	display: block;
	width: 100%;
	height: 64px;
}

.gradient6 {
	background: #000;
	padding: 30px 0 30px 30px;
	margin: 30px 0 50px;
}
.gradient6 h1 {
	font: bold 310%/100% "Lucida Grande", Arial, sans-serif;
	position: relative;
	margin: 0;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: -2px;
}
.gradient6 h1 span {
	background: url(images/gradient-dark-stripe.png) repeat-x;
	position: absolute;
	bottom: -0.1em;
	display: block;
	width: 100%;
	height: 29px;
}

.gradient7 {
	background: #000;
	padding: 30px 0 30px 30px;
	margin: 30px 0 50px;
}
.gradient7 h1 {
	font: bold 310%/100% "Lucida Grande", Arial, sans-serif;
	position: relative;
	margin: 0;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: -2px;
}
.gradient7 h1 span {
	background: url(images/gradient-dark-stripe-hz.png) repeat-x;
	position: absolute;
	bottom: -0.1em;
	display: block;
	width: 100%;
	height: 29px;
}

.pattern {
	background: #000;
	padding: 30px 0 30px 30px;
	margin: 30px 0 50px;
}
.pattern h1 {
	font: bold 600%/100% "Lucida Grande", Arial, sans-serif;
	position: relative;
	margin: 0;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: -6px;
}
.pattern h1 span {
	background: url(images/pattern-zebra.png);
	position: absolute;
	display: block;
	width: 100%;
	height: 100px;
}

.gradient-ie h1 {
	font: bold 320%/100% "Lucida Grande", Arial, sans-serif;
	position: relative;
	margin: 30px 0 50px;
	color: #464646;
}
.gradient-ie h1 span {
	background: url(images/gradient-white.png) repeat-x;
	position: absolute;
	display: block;
	width: 100%;
	height: 31px;
}

.jquery h1 {
	font: bold 280%/100% "Lucida Grande", Arial, sans-serif;
	position: relative;
	margin: 30px 0 0;
	color: #464646;
}
.jquery h1 span {
	background: url(images/gradient-white.png) repeat-x;
	position: absolute;
	display: block;
	width: 100%;
	height: 31px;
}

 

效果如图所示：

 
返回顶楼
         
  • wr123
  • 等级: 初级会员
  • 性别:
  • 文章: 3
  • 积分: 30
  • 来自: 北京
   发表时间：2009-12-23  
好像在傲游和IE6出现不了这个效果
返回顶楼
          回帖地址
0 请登录后投票
  • jsntghf
  • 等级: 三星会员
  • 性别:
  • 文章: 60
  • 积分: 320
  • 来自: 苏州
   发表时间：2009-12-23  
IE6下可以在head中添加
<style> 
h1 span { 
   background: none; 
   filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale'); 
} 
</style> 
试试
返回顶楼
          回帖地址
0 请登录后投票
  • qinglintan
  • 等级: 初级会员
  • 性别:
  • 文章: 107
  • 积分: 10
  • 来自: 湖南
   发表时间：2009-12-23  
使用JQuery效果确实的不错
返回顶楼
          回帖地址
0 请登录后投票
  • daxiong921
  • 等级: 初级会员
  • 性别:
  • 文章: 40
  • 积分: 0
  • 来自: 龙岩
   发表时间：2009-12-23   最后修改：2009-12-23 
.gradient1 h1 {
	font: bold 330%/100% "Lucida Grande", Arial, sans-serif;
	position: relative;
	margin: 30px 0 50px;
	color: #464646;
}
.gradient1 h1 span {
	background: url(images/gradient-white.png) repeat-x;
	position: absolute;
	display: block;
	width: 100%;
	height: 31px;
}


<h1><span></span>CSS Gradient Text</h1>

请教作者，为什么 <span></span>加在CSS Gradient Text前面就可以整行都充满图片呀？
CSS Gradient Text<span></span> 这样就不行呢？ 

font: bold 330%/100% "Lucida Grande", Arial, sans-serif;

这里字体 330%/100% 这样表示字体大小该怎么理解呀？
返回顶楼
          回帖地址
0 请登录后投票
  • jsntghf
  • 等级: 三星会员
  • 性别:
  • 文章: 60
  • 积分: 320
  • 来自: 苏州
   发表时间：2009-12-24  
daxiong921 写道
.gradient1 h1 {
	font: bold 330%/100% "Lucida Grande", Arial, sans-serif;
	position: relative;
	margin: 30px 0 50px;
	color: #464646;
}
.gradient1 h1 span {
	background: url(images/gradient-white.png) repeat-x;
	position: absolute;
	display: block;
	width: 100%;
	height: 31px;
}


<h1><span></span>CSS Gradient Text</h1>

请教作者，为什么 <span></span>加在CSS Gradient Text前面就可以整行都充满图片呀？
CSS Gradient Text<span></span> 这样就不行呢？ 

font: bold 330%/100% "Lucida Grande", Arial, sans-serif;

这里字体 330%/100% 这样表示字体大小该怎么理解呀？

这里只是简单的使用了1px宽的透明png覆盖在了文本上。
330%/100%等价于font-size: 330%;line-height: 100%;
返回顶楼
          回帖地址
0 请登录后投票
  • 蓝之月
  • 等级: 初级会员
  • 性别:
  • 文章: 5
  • 积分: 60
  • 来自: 银川
   发表时间：2009-12-24  
我这边ie6和firefox都不能正常显示呀
返回顶楼
          回帖地址
0 请登录后投票
  • wpskl
  • 等级: 初级会员
  • 性别:
  • 文章: 3
  • 积分: 0
  • 来自: 北京
   发表时间：2009-12-24  
这篇文章跟http://www.cnblogs.com/island205/archive/2009/12/21/1628845.html的好像啊。
返回顶楼
          回帖地址
0 请登录后投票
  • jinrey
  • 等级: 初级会员
  • 性别:
  • 文章: 2
  • 积分: 30
  • 来自: 杭州
   发表时间：2010-12-22  
不错，照这个思路可以做点特效
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics