当前位置：首页 > 实用文档 > 其他范文> 玩转CSS3色彩网页设计

玩转CSS3色彩网页设计

时间：2022-05-06 21:47:13 其他范文收藏本文下载本文

玩转CSS3色彩网页设计(（集锦8篇））由网友“孤岛”投稿提供，下面小编给大家整理玩转CSS3色彩网页设计，希望大家喜欢！

玩转CSS3色彩网页设计

篇1：玩转CSS3色彩网页设计

传统来说，大家在CSS中使用的颜色要么是16进制格式，要么是rgb格式，就像rgb(171,205,239)，

CSS3带来了一些新的处理颜色的方法，比如使用HSL(Hue, Saturation, Light) 和opacity/alpha通道。不幸的是，现在只有Firefox 3+, Chrome 1.0+ 和Safari 3+ 以及一些衍生的浏览器完全支持它们。但是我们可以尽我们所能，而IE直到Internet Explorer 9才会开始支持一些CSS3属性。

Opacity

这其实是一个旧属性，令人惊奇的是，它被IE的当前版本支持——尽管是以一种比较复杂的方法。

Opacity将整个CSS 对象变透明，所有的子元素的透明度也会适当的继承。官方的语法如下：

opacity:[0-1的小数];

所以一个opacity: 0.5;设置会让对象50%透明。尽管较新的浏览器积极的支持它，老的浏览器还是需要一些定制的代码，就像IE浏览器一样。

目前较老的Firefox版本，我们需要使用-moz-前缀，而对于旧的Safari/Chrome版本，我们需要使用-webkit-前缀。而对于更老的还在使用KHTML内核而不是webkit内核的Safari版本来说，我们需要使用-khtml-。那么如果我们想支持每一个浏览器，我们的代码应该是这样的：

1234

opacity:0.5;-moz-opacity:0.5;-webkit-opacity:0.5;-khtml-opacity:0.5;

啊，稍等！IE怎么办？好吧，IE的确完全不支持这个，但是它使用了一个私有的滤镜。传统的方法简短扼要：

filter:alpha(opacity=50);

请注意对于IE我们需要使用从0到100的整数，而不是像opacity属性那样的小数。郁闷的是，Internet Explorer 8提供了一个新的方法来处理。不要尝试像另一个那样记住这个，这是很长的一个：

-ms-filter:“progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;

当然，如果你想支持旧的IE浏览器，你将不得不使用上面的那个短的，这也就意味着如果要兼容绝大部分浏览器，你需要总共六条CSS语句。

PS：事实上，Safari从1.2版本就开始支持opacity属性了，KHTML内核的Safai基本很难再找到了，而事实上，Konqueror从未支持过-khtml-opacity属性，所以请不要再使用它(我在翻译的时候考虑到原文的完整性，所以并没有对上面的代码作出修正)。Opera从9.0开始支持CSS3的opacity，而Firefox从Firefox 0.9开始就支持opacity，而到Firefox 3.5就不再支持-moz-opacity私有属性了。IE8的-ms-再加上filter真是微软的天才作品啊！不过请注意，如果你要同时使用filter和-ms-filter，请注意将-ms-filter写在filter的前面。——神飞

RGBa

下面让我们讨论一下RGBa。RGBa是对原始的RGB的扩展，它加入了第四个参数：alpha通道。alpha通道参数采用0 到1之间的小数，就像opacity那样。使用RGBa而不是opacity的优势是，当使用RGBa的时候，透明不会被应用到子元素。这也就一位着，你可以在一个透明对象里面使用一个完全不透明的子对象，而当你使用opacity的时候，透明对象的子元素也是透明的。

使用RGBa不能再简单了：

1234

div{background:rgb(255,0,0);/* The old one */background:rgba(255,0,0,0.5);/* The new one */}

正如你看到的那样，我们渐渐通过添加一个字母和另外一个参数就将一个实体的红色变为半透明的红色了，

RGBa被Firefox 3+、Safari 3+、Chrome 1.0+以及Opera 10支持。但IE还是不支持。CSS-Tricks 提供了一个使用私有滤镜的方法来让它在IE下也可以工作:

123456789

HSL

HSL是一个选择颜色的很直观的方法。如果你需要“再暗一点点儿” 或 “再亮一点点儿”，使用十六进制组合会颇麻烦吧。幸运的是，通过HSL，它就是仅仅一个简单的数字改变。

HSL代表Hue(色调、也称“色相”)、Saturation(饱和度)和Lightness(明度)。Hue就是一个色盘中的颜色(参考上图)。色彩选择通过度数来确定，0º 就是红色，120º 是绿色，而240º 就是蓝色。当然，你可以选择中间的不同的色彩组合，这样你就有这些：

0º – 红色

60º – 黄色

120º – 绿色

180º – 青色

240º – 蓝色

300º – 洋红

Saturation(饱和度)是该色彩被使用了多少。0%表示灰度，也就是我们并没有使用这个颜色，而100%表示该颜色很饱满。通俗的讲，饱和度就是颜色的深浅程程度，鲜艳程度

Lightness(明度)也就是该色彩有多亮。较低设置意味着暗，较高设置意味着亮，0% 和100%意味着分别为黑和白。

所以，一个使用橙色的50%饱和度+50%名都的背景的对象看起来就像这样：

div{background:hsl(30,50%,80%);}

如果想让它更亮一些或者暗一些，只需要调整最后一个参数就可以了。

HSL被大部分浏览数支持，包括Safari 3.2+、Chrome、Firefox、Opera 9.6+，IE不支持。

HSLA

当然，HSLA 就是HSL 的扩展，就像RGBa一样，添加了第四个透明参数。使用HSLA就像RGBa一样简单，仅仅在那里贴上额外的参数就OK了：

div{background:hsla(30,50%,80%,0.5);}

这个例子也是使用了橙色，但是添加了50%透明。

HSLA被大部分浏览器支持，包括Safari 3.2+、Chrome、Firefox，IE不支持，和HSL不同的是，Opera9.6并不支持HSLA，直到Opera 10才开始支持HSLA。

总结

显然，HSL 和HSLA 只被Firefox、Safari、Chrome和Opera等浏览器的较新的版本支持。而对已IE却没有想opacity和RGBa那样对应的私有属性支持它们两个。然而，这从来不会阻止你尝试或以它们做实验。

译自：Playing Around with CSS3 Colors

中文：玩转CSS3色彩

篇2：快乐CSS3之旅网页设计

Hello！everybody！对于CSS3的应用一直是前端的痛，因为国内浏览器IE、IE内核浏览器市场份额实在是太大，对于既想优雅的使用CSS3来实现复杂的页面效果，又不得不考虑国内的情况。苦逼的前端开发人员只能继续使用古老的图片来实现圆角、背景、渐变的效果。

如果你是一个具有探索性的前端攻城师，那么就用CSS3来实现吧！既能锻炼CSS3新的属性，同时对自己的技术不断提高，帮助CSS3应用的推广；也能够实现IE系列的兼容。不过这个过程很痛苦。你得和PM一顿解释为什么这样实现，又得折腾更多的代码！这太苦逼了！可是我们是一群经得起的前端攻城师！！哈哈~！

对了！本文的一些实例是我做项目中运用到的！主要针对Chrome内核制作开发。故我很幸福哦….而且很是兴奋兴奋滴说！

CSS3 Transition的应用

语法：

transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]。

取值：

[ transition-property ]：检索或设置对象中的参与过渡的属性

[ transition-duration ]：检索或设置对象过渡的持续时间

[ transition-timing-function ]：检索或设置对象中过渡的动画类型

[ transition-delay ]：检索或设置对象延迟过渡的时间

复合属性。检索或设置对象变换时的过渡。

PS:摘自CSS参考手册

想更多的了解，去看手册吧！这是最好学习的地方哦！

好啦~我们来看个运用实例吧！

首先，看到这个设计图稿时，可能一些人，这个有什么地方可用到transition？童鞋！看到那个红框向上的箭头么？这个是要有交互效果滴！

即:滑进时，图片向上走，显示右边图片的所展示的部分。

嗯，现在看代码了哦~！

这是结构代码

CSS3主要代码：

.ext-block { position:relative; top:0; margin-top:0; transition:0.2s linear 0.2s; -webkit-transition:margin-top 0.25s ease-in-out 0.1s;/*针对webkit内核CSS3的的私有属性,chorme在transition上还属于实验性。*/}.ext-block:hover { margin-top:-95px; }

其中触发的动作就是.ext-block:hover { top:-95px;}

这两句就能实现鼠标滑入时，图片上滑，然后显示其他的。这个省了好多js吧！哈哈！可能有些人说：语法是四个参数，为什么你就写了三个？这个…看手册吧！

CSS3 Box-shadow的应用

语法：

box-shadow：none | [ , ]*

= inset? && [ {2,4} && ? ]

默认值： none

取值：

none：无阴影

①：第1个长度值用来设置对象的阴影水平偏移值。可以为负值

②：第2个长度值用来设置对象的阴影垂直偏移值。可以为负值

③：如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值

④：如果提供了第4个长度值则用来设置对象的阴影外延值。不允许负值

：设置对象的阴影的颜色。

inset：设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影

PS:摘自CSS参考手册

同样以Transition里的图片为例。

当滑入时，显示阴影。

结构代码一样，主要来看下CSS代码：

.app-list li:hover { box-shadow:0 0 3px #ddd;}

Box-shadow:0 0 3px #ddd;这里为什么不用私有属性，因为chrome已经完全支持啦。

其中第四个参数值基本用不到。

这样就实现了滑入时，显示阴影。而不用苦逼的切背景图了。有时可能IE6用PNG24位的透明图片来处理时，苦逼的出现灰色色块。

CSS3 Border-radius的应用

语法：

border-radius：[ |

]{1,4} [ / [ |

]{1,4} ]?

默认值：0

取值：

：用长度值设置对象的圆角半径长度。不允许负值

：用百分比设置对象的圆角半径长度。不允许负值

说明：

设置或检索对象使用圆角边框。提供2个参数，2个参数以“/”分隔，每个参数允许设置1~4个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数

水平半径：如果提供全部四个参数值，将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角，

如果只提供一个，将用于全部的于四个角。

如果提供两个，第一个用于上左(top-left)、下右(bottom-right)，第二个用于上右(top-right)、下左(bottom-left)。

如果提供三个，第一个用于上左(top-left)，第二个用于上右(top-right)、下左(bottom-left)，第三个用于下右(bottom-right)。

垂直半径也遵循以上4点。

PS:摘自CSS参考手册

这张截图，按钮的圆角用的border-radius来实现的，不用苦逼的用图片做拼合了。

以下为实现的结构代码和CSS3代码：

border-radius:2px；这个是实现了四个角是圆角啦！简单吧？

顺便说下，这张图的三态，完全可以用CSS3来解决。其中的圆角，阴影，文字阴影，内阴影，背景渐变等都是用CSS3来实现的。这块的CSS代码已经给出了哦！自己可以看下！其中文字阴影和box-shadow类似。

CSS3 Background渐变的应用

语法：

background-image： [ , ]*

默认值：none

取值：

none：无背景图。

：使用绝对或相对地址指定背景图像。

：使用线性渐变创建背景图像。（CSS3）

：使用径向(放射性)渐变创建背景图像。（CSS3）

：使用重复的线性渐变创建背景图像。（CSS3）

：使用重复的径向(放射性)渐变创建背景图像。（CSS3）

说明：

设置或检索对象的背景图像。

如果设置了background-image，同时也建议作者设置background-color用于当背景图像不可见时保持与文本一定的对比。

PS:摘自CSS参考手册

同样以上面按钮图片来做实例。给的样式代码是简写了。没有用background-image，而用background，效果是一样滴！只是这个是用于线性渐变。具体的语法规则请参考手册吧！

.download-btn { position:absolute; right:10px; top:50%; margin-top:-13px; width:138px; height:26px; line-height:26px; border:1px solid #2d53af; border-radius:2px; box-shadow:inset 0 1px 1px #6e9ae0, 0 1px 2px rgba(0,0,0,0.3); background:-webkit-linear-gradient(#5588da,#4d7bd6); color:#fff; font-size:14px; font-weight:700; text-shadow:1px 1px 0 rgba(0,0,0,0.3); text-align:center;}.download-btn:hover { text-decoration:none; border:1px solid #4076ff; background:-webkit-linear-gradient(#649aff,#5286ff);box-shadow:inset 0 1px 1px #83afff, 0 1px 2px rgba(0,0,0,0.3); text-shadow:1px 1px 0 rgba(0,0,0,0.3);}.download-btn:active { background:-webkit-linear-gradient(#649aff,#5286ff);box-shadow:inset 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);text-shadow:1px 1px 0 rgba(0,0,0,0.3);}

这就是三态时，不同的渐变背景色的运用！只是这用了webkit的私有属性。这个就不用我解释了吧？类似transition。

以上这些是比较基本而且常用到的一些CSS3新的特性来开发项目。在CSS3的运用上，我们还有很长的路要走，毕竟现在国内市场做前端的很痛苦！

忘记说了，这个是项目是我在360极速浏览器扩展中心运用到的一些效果，上线后我去看了下，其中的Transition效果去掉了，采用js来实现。这个具体情况不清楚，可能他们考虑的更多吧！毕竟极速现在是两个内核（IE内核）哦！按钮的也弄成图片，这个我能理解。因为在里面增加了个“+”号！这个东西用文本来控制确实不好实现，在不同系统下、不同字体下会变形。不过好多地方的一些运用还是存留滴，像阴影什么还在。顺带说句，里面也用到了CSS3的display:box；布局！这个很有意思！有兴趣的可以去了解下。

篇3：六个的CSS3工具网页设计

CSS3广受欢迎，越来越多的网站开始使用，不过，人们还在不断地研究和探索CSS3之奥秘，这可能是因为它还不完全支持所有浏览器。不过，如果你是CSS3初学者，或者CSS3专家但希望工作更加便捷简单，以下的6个CSS3小工具会对你有所帮助：

CSS3 Button Maker

CSS3 Button Maker提供一些滑块和颜色选取器让你自定义CSS3风格按钮，获取生成的代码即可用于你的项目。

CSS3 Generator

在CSS3 Generator，只要选择相关CSS3属性，填写适合你需求的一些参数，以适应您的需求（即时预览可以让你调整到合你意的效果），即可生成代码。

CSS3 Please!

CSS3 Please!是一个生成跨浏览器的CSS3代码的在线工具，直观方便。它允许你对CSS3进行各种各样的调整直至获得你认可的效果，

最后将生成的代码复制并粘贴到您自己的文件即可。

CSS3 Gradient Generator

CSS3 Gradient Generator是一款适合开发人员和设计师在CSS创建某种梯度（比如颜色梯度）的工具。

CSS3 Transforms

CSS3 Transforms提供一系列的滑动选项以便测试如位置、旋转、倾斜和其他更多的各种不同的位置变换。它还可以生成飞行效果的相关代码。

CSS3 Selectors Test

CSS3 Selectors Test自动运行大量小测试，查看CSS选择器是否与你的浏览器兼容。如果不兼容，该工具将会标注出来。你可以选择其中一个CSS选择器查看结果，那会包括举例和每一个测试的分析。

MK 编译 via webdesignledger.com

本文链接:www.x-berry.com/six-useful-css3-tools

篇4：网页设计与色彩心理学

网页设计与色彩心理学

21世纪是互联网经济的时代.随着信息社会的来临,人们的生活方式发生了一系列带有根本性的变化,由此带来的营销方式也发生了根本的.变化,产生了诸如EDI、EFT、eAD、网上采购等一系列全新的营销方式,对传统的企业营销方式和理念提出了挑战.

作者：苏梅作者单位：天津渤海职业技术学院刊名：企业经济 PKU英文刊名：ENTERPRISE ECONOMY 年，卷(期)： “”(7) 分类号：B84 关键词：

篇5：五大浏览器CSS3和HTML5兼容速查表网页设计

支持 CSS3 和 HTML5 的浏览器越来越多，甚至包括最新版的 IE，当然，所谓支持仅仅是部分支持，因为 CSS3 和 HTML5 的W3C 规范都尚未形成，如果你现在就希望使用 CSS3 和 HTML5 创建你的站点，至少要对各个浏览器对这两种新技术的支持情况有一个全面了解。

需要指出的是，即使同一个浏览器的同一个版本，在 Mac 和 Windows 两个平台，它们对 CSS3 和 HTML5 的支持也并不一致。本文是一份 Chrome， Safari， Firefox， Opera， IE 5 大浏览器，在 Mac 和 Windows 两个平台，对 CSS3 和 HTML5 各种功能的详细支持情况清单。

CSS3 属性

可以看出，全盘支持 CSS3 属性的浏览器有 Chrome 和 Safari，而且不管是 Mac平台还是 Windows平台全支持。

CSS3 选择器

除了 IE 家族和 Firefox 3，其它几乎全部支持。Chrome，Safari，Firefox 3.6，Opera 10.5 成绩最好。

HTML5 Web 应用

Safari 对 HTML5 Web 应用的支持最好，除了地理定位功能，其它都支持。

HTML5 网页内嵌对象

这应该是 HTML5 最令人期待的东西，内置的画布，视频，音频等对象，

全部支持的有 Chrome，Safari，Firefox 3.6，Opera 10.5。IE家族则全军覆没。

HTML5 音频编码

Opera 10.5 支持的最全面，IE 家族又是颗粒无收。

HTML5 视频编码

H.264 任重道远。

HTML5 各种表单对象

Mac平台下的 Chrome 成绩最佳。这些表单对象让人想起了桌面程序。

HTML5 表单对象属性与行为

又一次想到了桌面程序。

结论

目前，对 CSS3 和 HTML5 支持最好的是 Safari，Chrome 次之，Firefox 3.6 和 Opera 10.5 旗鼓相当，IE家族最差。鉴于这种情况，假如你想使用这两项新技术创建一个先锋体验式站点，现在的 CSS3 和 HTML5 可以让你实现，假如你希望这个站点能被绝大多数人正常访问，现在还为时过早，折中的方案是，为不支持 CSS3 和 HTML5 某些功能的浏览器提供降级方案，当然，其中要涉及到很多问题，包括浏览器，版本，平台的探测，CSS Hack 等等大量工作，相信是得不偿失的。

本文来自：bjnahan.net/five-css3-and-html5-compliant-browser-cheat/

篇6：详解CSS3中的属性选择符网页设计

[译者注]本文写于1月，当时IE7、IE8和Firefox3还未发行，文中所有说的浏览器支持均未包括这三个版本的浏览器，在IE8和Firefox3中，文中的大部分选择符已经被支持

在的9月和10月，我先后发表了几篇关于CSS2.1中选择符的介绍文章。大体看来那几篇文章中介绍过的大部分选择符都已经可以在像Mozilla/Firefox，Safari和Opera等现代浏览器中使用了。我们现在要做的就是等待Internet Explorer尽快赶上来，那我们就可以尽情地使用CSS2.1中的选择符了。好在Internet Explorer在其第7个版本中已经在尽力追赶了，至少在某些扩展方面。

如果我们再向前看一点，在CSS3中还有功能更加强大的选择符等待我们去发掘和使用。CSS3中的很多选择符已经在现代浏览器中得到很好的应用（IE8.0中也已经部分地支持了CSS3，译者），但是这些基本功能上的支持还远远不能满足开发者使用的要求。但是在某些情况下使用他们可以带来很好的超前体验，因此我认为了解一下CSS 3新增选择符是如何使用还是有益处的。

本文中对选择符描述主要是参考了《月15日W3C制定的选择符草稿》。草稿中讲到的新的选择符可能会在CSS的第3个版本中出现，但是也可能会出现在其他语言中。如果你是几个月前甚至是几年前读过这篇草稿，那么现在你应该再去看一下是不是已经出现了最新版本了。

这里我不打算去解释CSS选择符工作的基本原理。如果你想重要复习一下的话，最好从《细说CSS2.1中的选择符》开始。

首先，快速浏览一下CSS3中新增的选择符：

CSS3选择符语法概览：

选择符类型______________表达式__________________描述

子串匹配的属性选择符_____E[att^=“val”]___________匹配具有att属性、且值以val开头的E元素

子串匹配的属性选择符_____E[att$=“val”]___________匹配具有att属性、且值以val结尾的E元素

子串匹配的属性选择符_____E[att*=“val”]___________匹配具有att属性、且值中含有val的E元素

结构性伪类_____________E:root_________________匹配文档的根元素。在HTML中，根元素永远是HTML

结构性伪类______________E:nth-child(n)__________匹配父元素中的第n个子元素E

结构性伪类______________E:nth-last-child(n)_______匹配父元素中的倒数第n个结构子元素E

结构性伪类______________E:nth-of-type(n)________匹配同类型中的第n个同级兄弟元素E

结构性伪类______________E:nth-last-of-type(n)_____匹配同类型中的倒数第n个同级兄弟元素E

结构性伪类______________E:last-child_____________匹配父元素中最后一个E元素

结构性伪类______________E:first-of-type__________匹配同级兄弟元素中的第一个E元素

结构性伪类______________E:only-child____________匹配属于父元素中唯一子元素的E

结构性伪类______________E:only-of-type__________匹配属于同类型中唯一兄弟元素的E

结构性伪类______________E:empty______________匹配没有任何子元素（包括text节点）的元素E

目标伪类________________E:target______________匹配相关URL指向的E元素

UI元素状态伪类__________E:enabled______________匹配所有用户界面（form表单）中处于可用状态的E元素

UI元素状态伪类__________E:disabled______________匹配所有用户界面（form表单）中处于不可用状态的E元素

UI元素状态伪类__________E:checked_______________匹配所有用户界面（form表单）中处于选中状态的元素E

UI元素状态伪类__________E::selection____________匹配E元素中被用户选中或处于高亮状态的部分

否定伪类________________E:not(s)________________匹配所有不匹配简单选择符s的元素E

通用兄弟元素选择器______E ~ F___________________匹配E元素之后的F元素

如果对上面的描述还不是很清楚的，请不要担心。本文下面的部分将会对他们进行更加详细的讲解，并且提供例子来演示他们是怎么使用的。

子串匹配的属性选择符

这一组的选择符都新加的，他允许开发者对属性中的子字符串来进行匹配。

假设HTML文档中包含下面的代码结构：

id=“nav-primary”>id=“content-primary”>id=“content-secondary”>id=“tertiary-content”>id=“nav-secondary”>

通过使用子串匹配的属性选择符就可以找到文档中这些结构性的特定组合。

下面的规则将为id以“nav”开头的div元素设定背景颜色：

div[id^=“nav”] {background:#ff0; }

div[id^=“nav”] { background:#ff0; }

上例中选择符会匹配div#nav-primary和div#nav-secondary。

要找到id以primary结尾的div元素，可以使用下面的规则：

div[id$=“primary”] {background:#ff0; }

div[id$=“primary”] { background:#ff0; }

这时选择符将匹配div#nav-primary和div#content-primary。

下面的规则将会匹配到id中含有content子字符串的的div中：

div[id*=“content”] {background:#ff0; }

div[id*=“content”] { background:#ff0; }

受影响的元素有：div#content-primary、div#content-secondary和div#tertiary-content。

子串匹配的属性选择符已经在最新版本的Mozilla、Firefox、Flock、Camino、Safari、OmniWeb以及Opera中可以使用，但是如果IE中还不支持的话，我们最好还是先不要使用他们（作者在写这篇文章时IE还在开发中，如今IE7、IE8都支持这些选择符，译者注）。

目标伪类

含有识别标识的url（一个#后面紧跟锚点名称或者元素的id）指向的是文档中的特定元素。链向其他目标元素的这些元素就可以使用:target伪类来修饰它。如果当前的URL中没有任何的片断识别标识，:target伪类将不会匹配任何元素。

还是以上面提到的代码结构为例，如果URL中包含content-primary标识时，现在的规则将会在他外围增加一个边框：

div#content-primary:target {outline:1pxsolid#300; }

div#content-primary:target { outline:1px solid #300; }

URL是类似这样的形式的：

www.example.com/#content-primary。

基于Mozilla和Safari的浏览器已经支持:target伪类。

UI元素状态伪类

:ENABLED伪类和:DISABLED伪类

在浏览器允许改变表单控件外观的前提下，:enabled伪类和:disable伪类允许开发者指定用户界面中可用和不可用元素（表单元素）的显示样式。下面的规则将会根据单行输入框是否可用设定不同的背景颜色：

input[type=“text”]:enabled {background:#ffc; }

input[type=“text”]:disabled {background:#ddd; }

input[type=“text”]:enabled { background:#ffc; }

input[type=“text”]:disabled { background:#ddd; }

:CHECKED伪类

:checked伪类允许开发者为处于选中状态的checkbox和radio设定样式。当然这也要在浏览器允许改变表单控件外观的条件下。下面的CSS规则将会使选中的radio和checkbox元素显示一个绿色边框：

input:checked {border:1pxsolid#090; }

input:checked { border:1px solid #090; }

UI元素状态伪类目前可以在Opera和基于Mozilla的浏览器中使用。

要注意的是，许多浏览器对于开发者对表单控件样式的改变有着严格的限制。

结构性伪类

结构性伪类允许开发者根据文档树中表明的结构来指定元素，而这些使用简单选择符或者是混合选择符都无法做到。结构性伪类功能十分强大，但是不幸的是现代浏览器仅提供了有限的支持。

:ROOT伪类

:root伪类指向的是文档的根元素。在HTML中，文档的根元素始终是HTML，也就是说现在的两条规则其实是一样的（大体上说来:root要比html更专业点）。

:root {background:#ff0; }

html {background:#ff0; }

:root { background:#ff0; }

html { background:#ff0; }

:NTH-CHILD伪类

:nth-child()伪类指向的元素在文档树中有一定数量的兄弟元素存在。其中括号内的参数，可以是一个数字，也可以一个关键字或者一个公式。

数字b指是的第b个子元素。下面的规则将会应用到父元素下所有p元素中的第三个中：

p:nth-child(3) {color:#f00; }

p:nth-child(3) { color:#f00; }

关键字odd（奇数）和even（偶数）可以用来匹配序号为奇数或者是偶数的子元素。第一个元素的序号为1，因为下面的规则将会匹配第1、3、5...了子元素p：

p:nth-child(odd) {color:#f00; }

p:nth-child(odd) { color:#f00; }

下面的规则则匹配第2、4、6...个字元素p：

p:nth-child(even) {color:#f00; }

p:nth-child(even) { color:#f00; }

表达式an+b可以用来创建更加复杂的循环模式。在表达式中，a代表步长，n是一个从0开始的计数器，b代表偏移量。其中，所有的数值都必须是整数（这里，n是从0开始的，和js等中的循环不同的是，至于到多少结束取决于元素的个数决定，如文档中有20个元素，3n(n=1,2...)就会分别选择第3、6、9、...18个元素，n此时为6 ，译者）。为了更好理解如何使用表达式我们先看几个代码实例：

下面的规则将会匹配序号数为3的倍数的所有p元素。在第一行中，b等于0，因此可以忽略不写（见第二行）：

p:nth-child(3n+0) {color:#f00; }

p:nth-child(3n) {color:#f00; }

p:nth-child(3n+0) { color:#f00; }

p:nth-child(3n) { color:#f00; }

偏移量可以用来指定样式的循环是从哪个元素开始应用的，

如果有一个20行的表格，我们希望从第10行以后的奇数行开始使用不同的背景颜色，就可以使用下面这条规则：

tr:nth-child(2n+11) {background:#ff0; }

tr:nth-child(2n+11) { background:#ff0; }

由于n是从为开始的，因此第一个受影响的tr元素的序号是11（2*0+11＝11,译者注）。接下来就是第13行（2*1+11=13）再接下来就第15行（2*2+11＝15），以此类推。

那么，对于这样有用的一个选择符又有哪些浏览器支持它呢？很糟糕，据我所知，没有一个浏览器支持这个选择符甚至没有浏览器支持nth类的选择符。如果有的话请帮我指正（Firefox3和IE8目前是否支持？dudo）

:nth-of-type()

:nth-of-type()伪类和nth-child()伪类找使用方法十分相似，只不过他匹配的是规则中指明类型的元素。下面的规则将会匹配每个属于父元素中第三个子元素的p元素（属于第3个子元素的p在一个该当中可能会有很多，只不过他们位于不同的父元素下，译者）：

p:nth-of-type(3) {background:#ff0; }

p:nth-of-type(3) { background:#ff0; }

当你想确定是否已经指向了第三个p元素，这种方法会很有用。开始你可能觉得这和使用nth-child效果是一样的，但是nth-child(3)会把所有的子元素都计算进来，因此结果可能就会不一样，除非p所有的所有兄弟元素也都是p元素。

:nth-of-type伪类目前还没有浏览器支持。

:nth-last-of-type伪类

:nth-last-of-type伪类指向的元素在其后还有若干同类型的元素。和:nth－last-child伪类一样，它是从最后一个子元素向回数的。下面的规则将会匹配到倒数第二个兄弟元素p中（注意：是兄弟、同级别的节点）：

p:nth-last-of-type(2) {background:#ff0; }

p:nth-last-of-type(2) { background:#ff0; }

:nth-last-of-type()目前还没有浏览器支持。

:last-child伪类

:last伪类指向的是父元素中最后一个子元素。它和:nth-last-child(1)效果是一样的。下面的规则匹配所有属于父元素中最后一个子元素的p：

p:last-child {background:#ff0; }

p:last-child { background:#ff0; }

:last-childe伪类可以在基于Mozilla的浏览器中使用。Opera不支持:last-childe伪类，在Safri中存在bug（上面的规则会匹配到所有的p元素）。令人稀奇是的它可以在OmniWeb（测试版本5.1.1）中正常使用，尽管这个浏览器是基于Safari的。这可能是因为Apple WebKit最新版本的回归，因为OmniWeb使用的WebKit通常要比Safari版本稍微低一点。

:first-of-type伪类

:first-of-type伪类指向同类型元素中的第一个元素。它和:nth-of-type(1)是一样的。

p:first-of-type {background:#ff0; }

p:first-of-type { background:#ff0; }

:first-of-type伪类目前还没有浏览器支持。

:last-of-type伪类

:last-of-type伪类指向同类型元素中的最后一个元素。它和nth-last－of-type(1)是一样的。

p:last-of-type {background:#ff0; }

p:last-of-type { background:#ff0; }

:last-of-type伪类目前还没有浏览器支持。

:only-child伪类

:only-childe伪类指向的是那些父元素中再没有其他任何子元素的元素。它和:first-child:last-child或者:nth-child(1):nth-last-child(1)是一样的（后者不够专业、简明）。

p:only-child { backgound:#ff0; }

:only-childe伪类目前可以在基于Mozilla的浏览器中使用。在Safari似乎被解释成了:first-child（上面的规则会被匹配到文档中所有第一个子元素p中）。

:only-of-type伪类

:only-of-type伪类指向的是那些父元素中再也没有与之类型相同的子元素。这和:first-of-type:last-of-type或者:nth-of-type(1):nth-last-of-type(1)相同（后者专业性不够）。

p:only-of-type {background:#ff0; }

p:only-of-type { background:#ff0; }

:only-of-type伪类目前还没有浏览器支持。

:empty伪类

:empty伪类指向没有任何子元素的元素。其中包括text节点，因此下面的示例只有第一行是空元素。

text

下面的规则只匹配第一行的p元素：

p:empty {background:#ff0}

p:empty { background:#ff0 }

:empty伪类目前被基于Mozilla的浏览器支持。Safari会错误地把样式应用到所有指定的元素中去。

否定伪类

否定伪类写成:not(s)，参数s为简单选择符。它指向的是除简单选择所指向的元素以外的所有元素。例如，下面的CSS将会指向所有不是p的元素：

:not(p) {border:1pxsolid#ccc; }

:not(p) { border:1px solid #ccc; }

否定伪类目前只有基于Mozilla的浏览器支持。

::selection伪类

::selection伪类匹配指定元素中处于选中或者高亮状态的部分。其中一个应用就是用它来控制选中文本的样式。

下面的规则会使选中的文本颜色变为红色：

::select {color:#f00; }

::select { color:#f00; }

::selection伪类目前可能基于Safari的浏览器支持。但是在使用上会出现不可预料的情况，因此Safari还需要一点改进。基于Mozilla的浏览器要使用-moz-prefix: ::-mozi-selection来实现。这种prefix可能最终会被去掉。

通用兄弟元素选择器

通用兄弟元素选择器通过两个简单选择符通过波浪号（~）分隔组成。它匹配第二个简单选择符中所匹配的元素，而且与第一个简单选择符中匹配的元素要出现在他的前面。这两个元素必须具有同一个父元素，但是第二个元素不一定必须紧跟在第一个元素之后。这条CSS规则将会匹配所有p元素之后ul元素：

p ~ ul {background:#ff0; }

p ~ ul { background:#ff0; }

通用兄弟元素选择器目前有Opera和基于Mozilla的浏览器支持。

亟需更好的浏览器支持

部分CSS 3选择符已经被广泛支持。但是，大部分非常有用的选择符在现代浏览器中或者未被支持或者使用受到限制。这就使得本文中介绍的很多选择符在今天的Web或多或少失去了用武之地。但是不必害怕去尝试它，你仍然可以在支持他们的带来超前体验的高级浏览器中使用他们。

[附件]CSS3选择符在现在浏览器（Firefox 2、Firefox 3、InternetExplorer 7、Internet Explorer 8、Oper9.27）中的支持程度（译者验证，请指正！）

_________________IE 7________IE8________FF2_________FF3______Opera9.27

E[foo^=“bar”]______Y__________Y__________Y__________Y__________Y

E[foo$=“bar”] ______Y__________Y__________Y__________Y__________Y

E[foo*=“bar”] ______Y__________Y__________Y__________Y__________Y

E:root____________ N__________N__________Y__________Y__________Y

E:nth-child()_______ N__________N__________N__________N__________N

E:nth-last-child()____ N__________N__________N__________N__________N

E:nth-of-type()_____ N__________N__________N__________N__________N

E:nth-last-of-type()__ N__________N__________N__________N__________N

E:last-child_________ N__________N__________Y__________Y__________N

E:first-of-type______ N__________N__________N__________N__________N

E:only-child________ N__________N__________Y__________Y__________Y

E:only-of-type______N__________N__________N__________N__________N

E:empty__________ N__________N__________Y__________Y__________N

E:target___________N__________N__________Y__________Y__________N

E:enabled_________ N__________N__________Y__________Y__________Y

E:disabled_________ N__________N__________Y__________Y__________Y

E:checked_________N__________N__________N__________N__________Y

::selection_________N__________N__________N__________N__________N

not()_____________N__________N__________Y__________Y__________Y

E ~ F_____________Y__________Y__________Y__________Y__________Y

英文原文 www.456bereastreet.com/archive/01/css_3_selectors_explained/

中文翻译 www.blueidea.com/tech/web//5708.asp

篇7：22个超级的HTML5和CSS3表单教程网页设计

利用HTML5和CSS3，还有一些出色的说明文档，你可以做些有创造力的网页表单，因此，在本文综述22个CSS3表单教程。

点击各个小标题下方图片，即可进入相应英文教程。

Slick login form. with HTML5 & CSS3

HTML5 & CSS3 envelope contact form

Build a Neat HTML5 Powered Contact Form

Create a Stylish Contact Form. with HTML5 & CSS3

Fun with HTML5 Forms

Design a Prettier Web Form. with CSS 3

Create A Clean and Stylish CSS3 Contact Form

Create a Slick CSS3 Login Form. NO IMAGES ALLOWED

Fancy Forms: HTML5 + CSS3 – JS

How to Create A Multi-Step Signup Form. With CSS3 and jQuery

Glowform. CSS3 Image-less Glowing Form. Tech

A jQuery & CSS3 Drop-Down Menu With Integrated Forms

Create a Clean and Stylish Login Form. With HTML5 and CSS3

How to Create a Contact Form. using HTML5, CSS3 and PHP

Carbon Fiber Signup Form. With PHP, jQuery and CSS3

Designing Modern Web Forms with HTML 5 and CSS3

HTML5/CSS3 Contact Form. Tutorial

Beautiful CSS3 Search Form

Clean and Stylish CSS3 Form

How To Create A HTML5 Contact Form

How To Create An Ajax-Based HTML5/CSS3 Contact Form

Free slick css form

篇8：你需要知道的CSS3动画技术网页设计

随着网络的发展，浏览器具有更强的渲染更高级代码的能力，我们正逐步实现跨越所有平台和浏览器的目标，我们不但可以要花费更少的时间来确保我们的盒模型在IE6中看起来正常，而且形成了鼓励创新、避免hack、重前端脚本的氛围。

网络是一个非常好的环境，也是一个有丰富的知识来分享的协作社区。我们想要有圆角，我们就实现了它；我们想要多背景图片，我们实现了它；我们想要边框图片，我们也让它实现了。所以需求从来不是问题，否则，我们可能还都仍然在使用table来布局页面而且使用过多的代码呢。我们都知道，网络无所不能。

为网络而生

CSS 3的属性比如border-radius、box-shadow和 text-shadow在webkit(Safari、Chrome等)和Gecko(Firefox)等先进的浏览器中的使用开始出现增长的势头。它们(这些CSS属性)已经为用户创建更轻量的页面和更丰富的体验，而且它们可以优雅的降级。然而，这些只是CSS 3能为我们做的众多事情中的一小部分。

在本文中，我们将走的更远，看一看变形(transformation)、转换(transition)和动画(animation)等更高级的CSS3技术。我们将涉及代码本身、浏览器支持以及一些可以正确地展示这些新属性是如何即提升你的设计又增强整体用户体验的例子。

CSS 变形(Transformation)

CSS transformation是W3C的一个草案。但当我第一次坐下来阅读它的全部特性以了解一些东西的时候，它并没有让我感到开窍。你可以想象的到，这个文档是用技术术语的撰写的，而且它更关注变形的图形(比如绘图)元素和矩阵。大一学习微积分之后就没有碰过矩阵了，我必须为本章节做很多好的旧浏览器测试以及猜测和检验。

在看完我能找到的每一个教程和大量的浏览器测试之后，我总结出一些大家都能从中获益的有用的关于CSS变形的信息。

transform

transform属性实现了一些可用SVG实现的同样的功能。它可用于内联(inline)元素和块级(block)元素。它允许我们旋转、缩放和移动元素——只需要一行CSS代码。

一些前卫设计的最大诟病就是文字不可选(必须要使用切图的方法实现)。当你熟练使用transform属性来控制文字的时候，这就不再是问题了，因为这是个纯CSS方法，所以元素内的文字会保持可选。这是CSS相对于使用图片(或背景图片)的一个巨大优势。

一些有趣而有用的变形功能：

rotate

Rotate(旋转)允许你通过传递一个度数值来转动一个对象。

scale

Scale是一个缩放功能，可以让任一元素变的更大。它使用正数和负数以及小数作为参数。

translate

Translate就是基于X和Y 坐标重新定位元素

skew

顾名思义，skew就是要将对象倾斜，参数是度数

matrix

transform支持矩阵变换，就是基于X和Y 坐标重新定位元素

让我们更深入的了解每一个功能吧。

Rotate

transform属性有很多用法，其中一个就是translate(旋转)。translate就是基于角度转动一个对象并可用于内联元素和块级元素，它可以实现很酷的效果。

12345

#nav{-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}

请注意在IE8中(非标准模式)它需要你写成“-ms-filter”而不是“filter”。

浏览器支持

浏览器对translate的支持令人惊奇的广泛。在上面的CSS片段中，我们直接加上-webkit-和-moz-前缀然后将#nav元素旋转-90度。

相当简单吧？唯一的问题是对于一个相当重要的设计元素，如果IE不支持，很多设计师就会不情愿使用它。

幸运的是，IE有这方面的滤镜:图形旋转滤镜。它可以有4个旋转值：0, 1, 2,和3。你将不会获得和Webkit和Gecko一样的精密控制，但是至少在一定程度上保持统一(甚至IE6)。虽然这个滤镜只支持4个值，显得有些鸡肋，但是对于IE来说，聊胜于无吧。

scale

scale并不像你想象的那样工作：简单的缩小和放大一个元素。缩放功能同时采用宽和高两个值，这些值可以是正数、负数和小数。

正数值放大一个元素，正如你期望的那样，基于指定的宽度和高度。

负数值并不会缩小元素，而是翻转它(比如，文字被反转)然后相应的缩放它。然而，你可以使用小于1的小数(例如.5)来收缩或者缩小一个元素。

1234567891011121314

#nav{/* nav元素的宽和高都会被放大双倍 */-webkit-transform:scale(2);-moz-transform:scale(2);}#nav{/* nav元素的宽会是双倍，而高度保持不变 */-webkit-transform:scale(2,1);-moz-transform:scale(2,1);}#nav{/* nav的宽度将是双倍，并且水平翻转，但是高度保持不变 */-webkit-transform:scale(-2,1);-moz-transform:scale(-2,1);}

浏览器支持

scale属性目前只有Firefox, Safari 和Chrome支持，到目前为止没有一个IE版本支持。缩放一个对象是相当有意义的设计选择。它可以通过渐进增强来使用:hover，这可以在你的导航上添加一个小小的趣味。

1234

#navli a:hover{/* 这可以让你的导航链接在鼠标经过的时候轻微的放大 */-webkit-transform:scale(1.1);-moz-transform:scale(1.1);}

translate

这个名称“translate(转化)”有点容易误解。它事实上是一种使用X和Y坐标值定位元素的方法。

12345

#nav{/* 这会将nav元素向左移动10像素并向下移动20像素 */-moz-transform:translate(10px,20px);-webkit-transform:translate(10px,20px);}

浏览器支持

translate属性目前只被Firefox, Safari 和Chrome支持，而且还要使用浏览器的私有前缀-moz- 和-webkit-。

Skew

Skew也是一个很有用的transform功能，它可以将一个对象围绕着x和y轴按照一定的角度倾斜。这和rotate的旋转不一样，rotate只是旋转，而不会让元素的形状改变。skew会让一个元素的形状改变。skew有两个参数，分别代表x和y轴的倾斜度数。

12345

#nav{/* 这会将nav元素向左移动10像素并向下移动20像素 */-moz-transform:skew(30deg,-10deg);-webkit-transform:skew(30deg,-10deg);}

浏览器支持

Skew属性目前只被Firefox, Safari 和Chrome支持，而且还要使用浏览器的私有前缀-moz- 和-webkit-。

Matrix

没错，Matrix就是矩阵，矩阵是高等数学中非常基础的一个东东，而在CSS 3中确实一个相当高级的功能，CSS 3引入matrix函数，可以非常灵活的实现上述的各种效果。它有6个参数(a,b,c,d,e,f)，它事实上是一个3*3矩阵，经过该矩阵将旧的参数转换成新值：

| a b e |

| c d f |

| 0 0 1 |

如果你有兴趣深入研究，可以看一下这里www.w3.org/TR/SVG/coords.html#TransformMatrixDefined，这是SVG的一个文档，但是对于matrix变换的原理是通用的。

让我们来看一个例子吧：

12345

#nav{/* nav元素将会像右上角倾斜 */-moz-transform:matrix(1,-0.2,0,1,0,0);-webkit-transform:matrix(1,-0.2,0,1,0,0);}

浏览器支持

可喜的是，IE支持matrix滤镜，虽然它不支持大部分CSS3变形功能，但是使用它的这个滤镜，基本也可以实现相同的效果，不过，你要先搞明白矩阵运算再说。webkit和Firefox(3.5+)都支持该功能。

链式变形

变形常常是单独的，但是如果你想同时用到多种变形，代码也是可以快速整合的，特别是使用私有扩展。幸运的是，我们有一些内置的缩写：

12345678

#nav{-moz-transform:translate(10,25);-webkit-transform:translate(10,25);-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);-moz-transform:scale(2,1);-webkit-transform:scale(2,1);}

这些变形可以被链到一起，从而让你的代码更高效:

1234

#nav{-moz-transform:translate(10,25)rotate(90deg)scale(2,1);-webkit-transform:translate(10,25)rotate(90deg)scale(2,1);}

这些属性的真正的威力是合并到一起，

你可以移动、旋转、缩放并控制任何内联元素和块级元素而不使用JavaScript。一旦这些属性的支持变的更加广泛，我们就可以创建更丰富和更轻量的界面和应用。

transform-origin

transform-origin不是transform的一个子功能，但是和transform关系非常密切。它可以用来指定transform的起点，比如，rotate变形的默认起点是其中间，你可以将起点设置在左上角，或者左下角，这样rotate变形的结果就可能大不相同了。

transform-origin接受两个参数，它们可以是百分比，em，px等具体的值，也可以是left,center,right，或者 top,middle,bottom等描述性参数。几个例子：

12345678910

.class1{-moz-transform-origin:00;-webkit-transform-origin:00;...}.class2{-moz-transform-origin:100%100%;-webkit-transform-origin:100%100%;...}.class3{-moz-transform-origin:topleft;-webkit-transform-origin:topleft;...}

浏览器兼容性

该属性目前也只有webkit和firefox支持，而且需要添加各自的私有前缀。

transition(转换)

一个涉及到CSS属性的基本的转换就是定义和移动一个元素从它的静止状态(比如，深蓝色背景)到它的hover或者激活状态(比如，浅蓝色背景)。

转换可以和变形同时使用(以及引发诸如:hover 或:focus事件)以创建一些动画。淡出背景色彩，滑动一个元素以及让一个对象旋转都可以通过CSS转换实现。

12345678

#nava{background-color:red;}#nava:hover,#nava:focus{background-color:blue;/* 告诉转换去应用到background-color 属性(看起来像一个CSS 参数，不是吗？ #foreshadowing)*/-webkit-transition-property:background-color;/* 让它持续两秒钟*/-webkit-transition-duration:2s;}

转换的一些参数

transition-property

指定转换的CSS属性名称，比如，上面的例子中，将转换应用于background-color属性。

transition-duration

定义转换花费的时间（从旧属性换到新属性花费的时间）

transition-timing-function

可以理解为过度效果。指定转换过程中的中间值。可以用cubic-bezier指定。当然有几个常用的内置值：ease | linear | ease-in | ease-out | ease-in-out

transition-delay

这个比较容易理解，就是转换延迟的时间。时间可以为正整数、负整数和零，非零的时候必须设置单位是s(秒)或者ms(毫秒)，为负数的时候，转换的动作会从该时间点开始显示，之前的动作被截断。

注：参数部分为翻译时添加，原文中没有。

浏览器支持

像transform属性一样酷，但是目前只有WebKit浏览器支持。-moz-transition已经在最近的nightly-build版本的Firefox 3.7中可用。你也可以添加-moz-transition到你的CSS中以实现将来的增强。甚至可以添加一个不用私有前缀的属性，以防万一。

Animation

动画是CSS 3最有用的地方。你可以将我们在上面讨论的所有的元素与动画属性比如animation-duration、animation-name 和animation-timing-function整合以创建像Flash动画一样的效果——纯CSS。

123456789101112131415161718

#rotate{margin:0auto;width:600px;height:400px;/* 确保我们是在一个 3-D 空间 */-webkit-transform-style:preserve-3d;/*让整个行使用x-轴旋转、7秒中的动画、无限次播放以及线性 */-webkit-animation-name:x-spin;-webkit-animation-duration:7s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;}/* 定义要调用的动画 */@-webkit-keyframes x-spin {0%{-webkit-transform:rotateX(0deg);}50%{-webkit-transform:rotateX(180deg);}100%{-webkit-transform:rotateX(360deg);}}

这个梦幻的CSS动画代码和在线演示可以在webkit网站看到。该演示可以在任何网站看到，但是动画效果却只能在Mac os(雪豹)的WebKit的nightly build版本可见。它看起来就像上面的视频中的一样，如果你是在用mac os (雪豹版本)，我认为安装一个webkit以亲眼看看这个效果是很值得的(它真的很酷)。Windows系统用户暂时无法欣赏这个效果。