首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

运用CSS3创建文字颜色渐变(CSS3 Text Gradient)

2012-12-23 
使用CSS3创建文字颜色渐变(CSS3 Text Gradient)考虑一下,如何在网页中达到类似以下文字渐变的效果?h1a

使用CSS3创建文字颜色渐变(CSS3 Text Gradient)

考虑一下,如何在网页中达到类似以下文字渐变的效果?

<h1><a href="#" mce_href="#">Jiangyujie</a></h1>

?

h1 { font-family: Segoe UI, Verdana, sans-serif; font-size: 100px; line-height: 100px; text-shadow: -3px 0 4px #006;}h1 a:link,h1 a:visited,h1 a:hover,h1 a:active { color: #d12; text-decoration: none;}

?

h1 a:link,h1 a:visited,h1 a:hover,h1 a:active { color: #d12; text-decoration: none; -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));}

?

h1:after { content: "Jiangyujie"; color: #000; text-shadow: 3px 3px 1px #600;}

?

h1 { position: relative; font-family: Segoe, Verdana, sans-serif; font-size: 100px; line-height: 100px; text-shadow: -3px 0 4px #006; }h1 a:link,h1 a:visited,h1 a:hover,h1 a:active { position: absolute; text-decoration: none; top: 0; z-index: 2; color: #d12; -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));}

?

?? ? ? ??很棒的效果,不是吗:)

?? ? ? ??5、? 其他:

?? ? ? ??CSS3 mask的详细信息可以参考Webkit.org的文章。

热点排行