使用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的文章。