5个CSS3设计增强功能

It is not clear to us what you meant. 我们不清楚您到底是怎么想的。开关>>

5个CSS3设计增强功能

八月 10th, 2009 x t

层叠样式表（ CSS ）是网站美化设计的语言，下一代的CSS3设计的属性即将被公布出来。你是不是现在就渴望尝试下css3的新鲜属性，但不知道从哪里开始呢？虽然许多新的属性还不是“官方”的，一些准从w3c的浏览器已经开始支持未来CSS 3的许多属性。现在的问题是，许多浏览器，最主要的是Internet Explorer中，还没有对css3的支持。可以把使用这些新的CSS3特点的诀窍当作设计改进，放弃学习各种对待ie6的hack技巧吧。

设计增强一方面将css3技术添加到您的网站设计，增加视觉吸引力，另一方面，如果不提供css3并不会减少其可用性。

对于任何网站设计人员，这可能是一个棘手的要求，我们需要在设计增强和可用性方面达到一种平衡：

增强设计示例 ：利用border-radius制作圆角效果，创造一个更具吸引力的设计。但是，如果不使用圆角效果，该网站仍是一样使用。

降低可用性的设计实例：将一个RGBA颜色值用在两个都需要可见的重叠的元素背景上，期望上面的元素是半透明（semi-transparent）的。这将使得一些人无法使用本网站，从而降低了网页的可用性。

让我们来看看5种新的CSS3属性 ，您现在就可以开始试试这些css3属性，只要你始终牢记，需要在设计增强和可用性方面达到一种平衡。

这是在应用任何CSS3设计改进前的原始设计：

1 。透明的颜色

支持的浏览器 ：苹果的Safari 4、Firefox 3.0.5 、谷歌chrome 1

RGBA可以让您控制文字，背景，边框或阴影颜色的不透明性（opacity）。

设置颜色的透明度，您需要指定使用RGB颜色值（不能用十六进制HEX值）另外附加一个表示透明度的属性，属性值从0 （透明）到1 （不透明）。

  rgba （ 0-255,0-255,0-255,0-1 ）

您还应该包括一个简单的RGB ，或十六进制颜色值作为在IE等其他不支持css3的浏览器中使用：


.topbox {
color: rgb(235,235,235);
color: rgba(255,255,255,0.75);
background-color: rgb(153,153,153);
background-color: rgba(0,0,0,0.5);
border-color: rgb(235,235,235);
border-color: rgba(255,255,255,0.65);
}

不过，在Internet Explorer中还有一个备用的解决方案（至少在背景颜色方面），它支持透明的颜色使用过滤器和conditional styles，shuil不太懂这个。

2 。圆角

支持的浏览器 ：苹果的Safari 3 ， Firefox 1 ，谷歌chrome 1

四个角全部产生以r为半径的圆角：

border-radius: r;

虽然border-radius将成为未来CSS3规范的一部分，无论是Mozilla项目（火狐）还是Webkit （ Safari和chrome），为了最大的跨浏览器兼容都补充了自己的版本：

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

您也可以特定的每个角设定圆角样式半径：





CSS3


Mozilla


WebKit




border-top-right-radius


-moz-border-radius-topright


-webkit-border-top-right-radius




border-bottom-right-radius


-moz-border-radius-bottomright


-webkit-border-bottom-right-radius




border-bottom-left-radius


-moz-border-radius-bottomleft


-webkit-border-bottom-left-radius




border-top-left-radius


-moz-border-radius-topleft


-webkit-border-top-left-radius




border-radius


-moz-border-radius

3 。文字阴影

支持浏览器 ：苹果的Safari 3 ， Firefox的3.0.5 ，谷歌Chrome 1

为任何文字添加一层阴影，控制左/右和上/下的偏移量以及颜色：

 text-shadow: x y blur color;

 您可以将文本的阴影结合透明的颜色来控制阴影的灰度：

text-shadow: -2px 2px 10px rgba(0,0,0,.5);

您也可以包括多个文字阴影值，只需用逗号（commas）分隔：

text-shadow:   0 0 10px rgba(0,255,0,.5), -10px 5px 4px rgba(0,0,255,.45), 
15px -4px 3px rgba(255,0,0,.75);


明天再写后两个。
英文原文:5 CSS3 Design Enhancements That You Can Use Today
复习英文单词

OK。下面和我一起来复习本文的英文单词。
semi-transparent

opacity

commas

人家还要...

分类目录:电子编程标签: css x t

已有3 条评论

shuil, on 八月 11th, 2009 at 11:44 上午 Said:

另外你还可以使用逗号为一个元素添加多个背景图片（Apple Safari 1.3, Google Chrome 1），使用box-shadow: x y blur color;添加边框阴影（Apple Safari 4, Firefox 3, Google Chrome 1），使用-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
来旋转（Apple Safari 4, Firefox 3.5, Chrome 1）
==============
不在原文写啦。懒了。

[回复]
yaugle, on 八月 13th, 2009 at 12:46 下午 Said:

你的文章很精彩，欢迎到feerbook.com提交你的文章与更多网友分享！

[回复]
CSS3伪类nth-of-type(n)用法详解 | shuilog, on 一月 18th, 2010 at 10:11 上午 Said:

[...] 之前，我曾写过“5个CSS3设计增强功能”一文，介绍了如何使用CSS3制作圆角、透明和文字阴影等效果。今天，我再介绍一下CSS3中nth-of-type(n)这个特殊的类选择符的用法。 [...]

shuilog