正在加载...

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

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+

: http://www.ha97.com/1874.html

本文相关评论 - 1条评论都没有呢

No comments yet.