/* 336x280*/
随着 CSS 的最新进展，我们现在能够获得强大的造型技术，包括容器阴影，圆角，背景渐变等等。但我们目前没有能力在文本上运用渐变效果。幸运的是，在这篇纯 CSS 实现文本渐变效果使用一些花招，我们可以迫使代码呈现这种效果 – 至少在 Webkit 引擎浏览器中如此！
芒果前天的文章 Google Font API，在网页上使用个性字体 谈到了 Google Font API，今天顺道试试手。
最终代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Text Gradients</title>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<style>
body {
background: #292929;
padding: 1em;
}
h1 {
position: relative;
font-size: 70px;
margin-top: 0;
font-family: 'Lobster', helvetica, arial;
}
h1 a {
text-decoration: none;
color: #666;
position: absolute;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.5)), to(rgba(0,0,0,1)));
}
h1:after {
content : 'Hello World';
color: #d6d6d6;
text-shadow: 0 1px 0 white;
}
</style>
</head>
<body>
<h1> <a href="#"> Hello World </a> </h1>
</body>
</html>
这个方法来自 NiceWebType.com 网站，你可以访问它学习更多东西。
英文原稿：Quick Tip: Pure CSS Text Gradients | Nettuts+
翻译整理：纯 CSS 实现文本渐变效果 | 芒果
/* 336x280*/
版权所有，转载请注明出处。
转载自 <a href="http://www.mangguo.org/pure-css-text-gradients-effect/" title="纯 CSS 实现文本渐变效果" rel="bookmark">纯 CSS 实现文本渐变效果 | 芒果小站</a>
已经有 9 条群众意见
- 万戈
#1/2010-05-23 11:37我的 FF 看不出啥效果，FF 还有待改进啊~ 回应
- ZhouQi
#2/2010-05-23 14:25-webkit-mask-image 可以用 content 生成一个元素盖住来模拟～这样除了 ie6，7 都 ok 了。 回应
- BB霜
#3/2010-05-24 09:59可能浏览器问题，我 IE7 都不明显~ 回应
- microwii
#4/2010-05-26 11:54呵呵，各个浏览器对 CSS3 的支持不太一样。 回应
- Jutoy
#5/2010-05-27 16:38兼容性是个问题~ 回应
- 左旋肉碱品牌导购网
#6/2010-06-16 01:34我 IE7 都不明显～ 回应
- 苹果山寨手机
#7/2011-02-10 20:51汗，没搞出来，不知道怎么回事 回应
- 纯 CSS 实现文本渐变效果 | zend实验室-java/php学习教程、web前端设计、网站建设、网页设计、网络SEO推广
#8/2011-05-03 23:05[...] 转载至：纯 CSS 实现文本渐变效果 | 芒果小站 分类: css, 其它 标签: 临时 5 个简单实用的 CSS 属性CSS 的外联，内联和嵌入芒果教你清除浮动CSS 有序列表 ol 和无序列表 ul用 JavaScript 实现 HTML 代码运行框你真的认识 window.location 吗？使用 <hr> 标签创建水平分隔线用 CSS 实现段落首行缩进YUI 2: Event Utility多层元素嵌套的圆角按钮 评论 (0) Trackbacks (0) 发表评论 Trackback [...] 回应
- 鼻炎治疗方法
#9/2011-10-24 14:46怎么没有效果图啊？~ 回应
我简单说几句