网络编程
位置:首页>> 网络编程>> 网页设计>> 提升你设计水平的CSS3新技术[译](7)

提升你设计水平的CSS3新技术[译](7)

作者:暴风彬彬 来源:彬go 发布时间:2009-08-02 20:51:00 

标签:设计,浏览器,CSS3,新技术

6. 文字阴影

尽管在CSS2中就已经存在,text-shadow是一个未被广泛应用的CSS属性。但是它将在CSS3中被广泛采用。这个属性给设计师一个新的跨浏览器的工具来为设计添加一个维度以使文字醒目。

尽管这样,你需要确认,你的设计中的文字是可读的,以防用户的浏览器不支持CSS3高级属性。给文字和背景色彩足够的对比度以防text-shadow 属性不能被浏览器正确渲染或理解。


Beakapp 在它的网站中使用了text-shadow 属性:内容区域.

BeakApp.com 为内容区域使用了text-shadow 属性,为文字添加深度和维度 并让它变得醒目——而不是使用某种图片替换技术。该属性目前只在Safari和Chrome中可用。

该网站的主菜单使用的CSS如下:

.signup_area p {
    text-shadow: rgba(0,0,0,.8) 0 1px 0;
}

这里我们使用阴影颜色(使用了RGBA,前面有描述), 然后是右(x 坐标) 和底部(y 坐标) 偏移,最后是模糊半径

如果要在一个文字上使用多阴影,可以使用逗号分开。比如:

p {
    text-shadow: red 4px 4px 2px,
        yellow -4px -4px 2px,
        green -4px 4px 2px;
    }

浏览器支持: Webkit核心浏览器和Opera 9.5 支持text-shadow。Internet Explorer 不支持它,Firefox 将在即将发行的3.5版本中支持。

扩展阅读:

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com