纯css文本渐变

王朝学院·作者佚名  2009-06-30
窄屏简体版  字體: |||超大  

<!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=gbk" />

<title>Css Trick - Pure Css Text Gradients</title>

</meta>

<style>

body {

margin:0;

padding:2em 4em;

background:#fff;

font:90% Arial, Helvetica, sans-serif;

color:#555;

line-height:180%;

}

h1 {

font-size:300%;

line-height:1em;

color:#8bb544;

font-weight:bold;

text-transform:uppercase;

letter-spacing:-.05em;

position:relative;

}

h2 {

font-size:260%;

color:#0079b6;

font-weight:bold;

letter-spacing:-.05em;

position:relative;

margin:.6em 0;

padding-top:1px; /* use top padding to adjust the start of the gradient */

width:100%;

}

h3 {

font-size:240%;

color:#7365a0;

font-weight:bold;

text-transform:uppercase;

letter-spacing:-.05em;

padding-top:3px;

position:relative;

margin:.6em 0;

width:100%;

}

h4 {

font-size:220%;

color:#dc5b24;

font-weight:normal;

letter-spacing:-.05em;

position:relative;

margin:.6em 0;

padding-top:1px;

width:100%;

}

h1 span, h2 span, h3 span, h4 span{

position:absolute;

display:block;

top:0;

left:0;

height:100%;

width:100%;

background:url(gradient_1.png) repeat-x;

}

h1 span, h3 span{background:url(gradient_2.png) repeat-x;}

* html h1 span, * html h3 span{

background-color:#fff;

back\ground-color:transparent;

background-image: url(none.gif);

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="gradient_2.png", sizingMethod="scale");

} http://bizhi.knowsky.com/

* html h2 span, * html h4 span{

background-color:#fff;

back\ground-color:transparent;

background-image: url(none.gif);

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="gradient_1.png", sizingMethod="scale");

}

</style>

</head>

<body>

<h1>纯净的CSS渐变文本<span></span></h1>

<h2>CSSRAIN DEMO<span></span></h2>

<h4>国外收集过来的.<span></span></h4>

<h5>IE6.7,FF2通过.<span></span></h5>

<h5>更多精彩 请关注 CSSRAIN.CN<span></span></h5>

</body>

</html>

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航