芒果小站

  1. 全球最具业界良心的主机 - DigitalOcean

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - DigitalOcean

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - DigitalOcean

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
9

纯 CSS 实现文本渐变效果

作者 芒果/分类 代码/发布于 2010-05-23 10:06

随着 CSS 的最新进展,我们现在能够获得强大的造型技术,包括容器阴影,圆角,背景渐变等等。但我们目前没有能力在文本上运用渐变效果。幸运的是,在这篇纯 CSS 实现文本渐变效果使用一些花招,我们可以迫使代码呈现这种效果 – 至少在 Webkit 引擎浏览器中如此!

芒果前天的文章 Google Font API,在网页上使用个性字体 谈到了 Google Font API,今天顺道试试手。

css-text-gradients

最终代码:

<!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 实现文本渐变效果 | 芒果

版权所有,转载请注明出处。
转载自 <a href="http://mangguo.org/pure-css-text-gradients-effect/" title="纯 CSS 实现文本渐变效果" rel="bookmark">纯 CSS 实现文本渐变效果 | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 9 条群众意见

  1. 万戈 /2010-05-23 11:37

    我的 FF 看不出啥效果,FF 还有待改进啊~ 回应

    #1
  2. ZhouQi /2010-05-23 14:25

    -webkit-mask-image 可以用 content 生成一个元素盖住来模拟~这样除了 ie6,7 都 ok 了。 回应

    #2
  3. BB霜 /2010-05-24 09:59

    可能浏览器问题,我 IE7 都不明显~ 回应

    #3
  4. microwii /2010-05-26 11:54

    呵呵,各个浏览器对 CSS3 的支持不太一样。 回应

    #4
  5. Jutoy /2010-05-27 16:38

    兼容性是个问题~ 回应

    #5
  6. 左旋肉碱品牌导购网 /2010-06-16 01:34

    我 IE7 都不明显~ 回应

    #6
  7. 苹果山寨手机 /2011-02-10 20:51

    汗,没搞出来,不知道怎么回事 回应

    #7
  8. ?
    纯 CSS 实现文本渐变效果 | zend实验室-java/php学习教程、web前端设计、网站建设、网页设计、网络SEO推广 /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 […] 回应

    #8
  9. 鼻炎治疗方法 /2011-10-24 14:46

    怎么没有效果图啊?~ 回应

    #9

下面我简单说几句