Tagged

文字渐变

A collection of 2 posts

文字渐变

CSS3 文字渐变

之前,我们有发表过CSS文字渐变效果,但是其实那并不是纯粹的基于CSS的渐变,它需要一张半透明渐变的png图片。今天我们将介绍两种使用CSS3实现实现文字的方法。嗯,只有webkit浏览器支持,请暂时无视其它浏览器。 1.-webkit-mask 在《CSS的未来:一些试验性CSS属性》中,我们提到了这个属性,相对于Firefox只能用svg做mask,webkit则灵活很多,图片和css3渐变均可。最初注意到这种效果是在舜子的PJblog中: .textGradient1{ -webkit-mask: -webkit-gradient(linear,0% 0%,0% 100%,from(rgba(222,187,71,0.8)),to(rgba(36,142,36,0.2))); } 不足:这个方法是利用蒙板的透明度来实现的,而蒙板的颜色并不能用于渐变中,从例子中可以看到设置的渐变色被无视了,有用的只是alpha值。那么这里的渐变要依赖字体的颜色——也就是说,只支持单色渐变。 2.

文字渐变

网站设计中漂亮的文字渐变效果

原文:[网站设计中漂亮的文字渐变效果](http://www.qianduan.net/web-design-beautiful-text-gradient-effect-of.html) 译自:[Beautiful Gradient Typography in Web Design](http://sixrevisions.com/design-showcase-inspiration/beautiful-gradient-typography-in-web-design/) 版权所有,转载请注明出处,多谢!- - - - - - 使用**色彩渐变**作为一种处理类型是在网站设计中制作迷人的文字的一种非常流行的技术。它们用于多种情况:网站logo、介绍性文字、视觉元素等等。但是请特别小心:造成时尚或俗气的只是在Photoshop设置里面的一些小错误,一点细微的差别就可能适得其反。 如果你正好在寻找网页设计中的渐变文字类的实例和灵感,这里是一些很不错的例子。希望能为你的设计提供些参考。 虽然用Photoshop/Fireworks等制图软件可以很容易的创建漂亮的文字渐变效果,但是我们同样也可以用CSS创建漂亮的文字渐变效果,而用CSS的方法的好处是灵活和重用度高。 1. Bainbridge Studios 2.