css3给人最闹心的莫过于各个浏览器的前缀了，然后随着各个浏览器的给力升级，有些前缀已经默默的去掉了，我们还是写那么一大堆。下面介绍几个工具，来帮下我们。
第一个是prefix free，这是一个js文件，大小2kb，导入之后你根本都无须考虑前缀问题，直接写不需要任何浏览器的前缀；
第二个是css3 please，这个权当一个css3前缀参考吧，有注释说明的，一看就知道；
第三个就是prefix了，它的口号就是“Cross-Browser CSS in Seconds!”，顾名思义，除了能处理prefix之外，还能处理一些兼容问题。如opacity。你可以把你的代码贴进去，然后点击prefixize这个按钮，就ok了；
第四个就不是工具了，而是应用编辑器，运用各个编辑器的自动完成（目前我定义了editplus和sublime text的自动完成），可以事先定义好，然后写一个自动出来多个，当然也可以应用less或sass等来定义一些变量什么的。
首先给body添加preload这个class，然后给所有的元素执行transition为none，最后通过js判断，加载完毕把body上的preload这个class去掉
<body class="preload">
.preload * {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
}
$("window").load(function() {
$("body").removeClass("preload");
});更多请查看：http://css-tricks.com/transitions-only-after-page-load/
谷歌浏览器26版本已开始支持:before,:after生成元素的动画，如想了解，可查看以下两个demo，对比你的谷歌和火狐浏览器，如果你的谷歌浏览器是26版本以下的，那么你会发现明显动画效果不如火狐浏览器。
关于伪元素动画各个浏览器的支持请参考：http://css-tricks.com/transitions-and-animations-on-css-generated-content/
时间如流水，2012年12月21日并不是世界的末日，随之张开双臂迎来了新的一年2013年。回首往事，W3cplus从域名的注册开始到2012年的12月28日，也算是走过了两年的历程。
两年的时间对于人的一生来说是很短暂的，但对于一个刚学习走路的新生儿来说，这两年是非常宝贵的，因为这两年能让他慢慢的学着走路，慢慢的让他走的更稳。为了能更好的激励自己，为也这宝贵的两年光阴，我想回忆一下我和w3cplus之间的故事。
机缘巧合，我的工作中接触了Drupal，为了能实战，我开始使用Drupal制作网站，一个属于自己的个人网站，也就是今天的W3cplus。在创建w3cplus时我碰到了许多问题，有一些问题是我个人能力无法解决的（因为我只是一个CSSer），还好有很多热心朋友：@为之、Drupal中国的龙马、Lugir的@袁哥帮助，特别是@为之兄手把手的教我，让我从中受益良多。
短短的两年时间，w3cplus进行了三次的改版，第一次是一个典型的个人博客，记载的是我从事前端的学习笔记，随后在2011年五月份，为了能把CSS3实战，我进行了第二次改版，运用了一些人不敢使用的前端技术，同时也增加了一些新的版块，当然也删除了一些没有内容的版块。同时放弃了IE的兼容，也为此受到很多人的BS，但我无悔，我的天地我说了算，至此，我们都未考虑兼容IE系列。今年年初，好友@为之的加入，我们大刀阔斧的进行了第三次改版，从此也不在是个人博客的性质了，我们的目标是将w3cplus制作成web前端人员的学习乐园。我们追求的是，W3cplus除了记述前端那些事外，更希望w3cplus能引领Web的前沿，打造精品的CSS3教程。
在第三次改版中，@为之花费了很多的心血，我们将W3cplus分成了六大版块：
博客中心中放置了232篇有关于Web前端技术的分享文档，这些文档有基础部分、有提高部分、也有高级部分。涉及的范围有CSS、CSS3、jQuery以及一些前端工具等。其中有很多是大家平时头痛的一些问题，比如说，等高问题，垂直居中问题，还有浏览器兼容问题等等。而且在这些博文中，有老的知识点、也有最新的知识点，可以说适合每个阶段的从业人员学习。
在CSS3专栏中，整理了近102篇博文，这些都是与CSS3相关的教程，从最基础的CSS3属性开始，然后扩展开周边的应用，比如移动端的相关知识。这个专栏中的教程大部分是原创，同时也有很多是转译国外的一些优秀教程。可以说是一个学习CSS3相关知识的基地，也得到了很多同学的支持与宣传。借此我在感谢那些一直在默默支持W3cplus的同学们、朋友们。
在CSS3案例专栏中，整理了117个CSS3方面的案例，这些案例都提供了DEMO展示，源码下载。最难得的是，这些DEMO效果大部分都是根据国外的一设计网站下载来的UI设计图，然后我们将设计转换成CSS3代码，为大家展现。同时也搜集了一些国外优秀的CSS3 DEMO效果。
说起CSS3的案例专栏，我要特别感谢今年新加入W3cplus的美女成员@藤藤，她一直坚持在写有关于CSS3的案例，而且都是无尝的与大家分享，可以说，@藤藤写的案例都是原创，都是根据设计图，自己独立完成的一些案例，到今天为止，为大家提供了近42个不同类型的案例。为此，w3cplus特意为@藤藤美女开辟了一个专栏——藤藤每日一练，让更多的CSS3爱好者能跟着@藤藤一起学习和练习CSS3。
资源中心，是一个搜集国内外有关于Web前端方面的资源。在这个专栏中为大家搜集的资源涵盖了Web设计、Web开发、CSS3工具、jQuery插件、Web ICON以及一些优秀的国外网站。到目前为止共有47篇。在此希望同学们与我们一起分享，把你手中的好资源发给我们，我们会整理出来与大家一起分享。
代码片段中主要是搜集了一些Web前端开发中常用的代码片段。这些代码片段简单易懂，且实用。当然，其中或许有错误的地方，如果您发现了有错的地方，还烦请留言指点。
最后一个版块是问与答，但这个版块，我们还在开发，最主要的目的是为广大的前端爱好者，提供一个提问的平台，然后能找到问题的答案。
W3cplus除了上面几大版块之外，其实还有很多独特之处：
css解决方案是由@为之兄整理的，这个方案中都是Web制作中经常要处理的问题。比如说：css布局、清除浮动、项目列表解决方案、form表单解决方案等等。
在这里列出了CSS3常用的属性列表，对列出的属性做过详细的介绍，而且还列出了w3cplus中css3的一些案例介绍。对于初学CSS3有极大的帮助。
BootStrap中搜集了有关于Bootstrap方面的各种资源。包括Bootstrap在线生成器、Bootstrap工具、Bootstrap主题、Bootstrap的js库、Bootstrap教程等。
jQuery Slder一文中搜集整理了近七十种不同类型的幻灯片播放效果，每个效果都带有详细的API和DEMO效果，大家可以根据自己的项目需求，随时运用上。
Web设计涵盖了Web设计方面的相关资源、比如说国外优秀的设计网站、UI下载资源网站、免费PSD文件下载资源网站等。
Responsive设计，一种Web全新的设计概念。W3cplus也跟着这股风，整理了一系列关于Responsive设计的教程和相关资源。如果您花时间阅读了这一系列的教程，我可以肯定你对Responsive会有一个全新的概念，在实际运用中也能得心应用。
在这里你可以找到国外近40款不同的CSS网格系统，以及近20款不同的CSS框架，对于一个想系统学习和提高自己CSS水平的人来说，这是一个不错的选择。
Retina技术在Web中的运用，我想知道的人可能并不太多，因为她是Web运用中一个较新的知识点，W3cplus在这方面也涉猎了一些，同时整理了一些教程，感兴趣的同学不仿点击看看，或许对你有些许的帮助。
2012年优秀jQuery插件连载主要插集了各处jQuery插件，总共加起来有110个jQuery插件。
这里搜集了近九十个前端方面的工具，这些工具能帮助大家提高工作效果，快速实现自己需要的效果。
以上十块内容是W3cplus比较有吸引力，也是相对较全而又独立的知识点，这几块内容都是行业中具有较前卫的思想。对于你想了解Web新鲜事物会有较大的帮助。另外 这些东西有资源性的，也有教程性的。相对来说能帮助您涉猎更全面的知识点。
上面这些内容归纳起来，w3cplus的主力都显示出来了，两年的历程，让w3cplus更加成熟，也更加受欢迎。这次我也不脱俗，为大家展示一下，w3cplus上这两年来最具欢迎的十篇文章：
这是一篇有关于CSS3渐变属性的教程，里面从属性的语法，到实战，详细介绍了CSS3渐变属性的使用方法。
这篇文章详细介绍了CSS3实现11种经典的CSS技术，比如说：圆角、阴影、透明效果、多背景等。是一篇综合性较强的文章。从这种文章中能简单的学习到CSS3的11个属性，以及和CSS2.1实现同样效果的对比。
Transition是CSS3中的一个属性，这个属性能让你的Web元素具有细腻的动画效果。
text-shadow属性用来制作文本阴影效果，这篇文章详细介绍了text-shadow的运用，并且附有多个实例参考。
Bootstrap是twitter推出的一款前端框架利器，这篇文章简单的介绍了Bootstrap的使用方法，以及其包含的模块组件。
box-shadow一个实现盒子阴影的CSS3属性，文章中详细介绍了这个属性的使用方法，也附了一些简单的实例分析。
CSS3的圆角Border-radius是一个很实用的属性，有了这个属性我们制作圆角就不会那么的苦逼了。
Transform属性也越来越实用，文中详细介绍了transform的旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix使用规则。
Animation是CSS3的一个动画属性，这个属性能代替部分js脚本功能。
RGBA是CSS3的一个颜色属性，文章中详细介绍了rgba和opacity的使用方法。
上面是关于w3cplus的版块和优秀的内容，其实不只这些，因为@D姐、@99、@文人、@清风等同学加入。特别是@D姐、@99两位同学翻译的外文，都是一些优秀文章。在此我要特别感谢这几位同学为w3cplus付出的努力。同时我也希望有更多的同学参与到这个队伍中来，分享自己的心得，与大家共享。
如需转载，烦请注明出处：http://www.w3cplus.com/css/my-w3cplus.html
“Parallax Scrolling”这个词在2012年下半年的Web设计上越来越流行，一开始并不知道他是什么东东，只是字面上译为“视差滚动”，但对于实质上的东西，了解的并不是太多。随着2013年到来，国外很多专家预测“Parallax Scrolling”将会是2013年Web上的一个流行素。对于喜欢前沿的我来说，我觉得我有必要深入的了解他了。只有紧跟时代的Web人员，才会让你充满更多的新设计元素，新的设计理念，不至于那么容易淘汰。（至少我是这么想的(^_^)）。
度娘告诉我，“Parallax Scrolling”是指多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。近些年来，用户对视觉体验的要求不断提高，而设计师们也开始在网页中加入各种特效元素以满足用户的需求。这也是“Parallax Scrolling”具有吸引力，让很Web设计师亲眯的原因。而且现在很多网站已经开始在使用了，并且在今年将会更容易看到这样的网站诞生。
视差滚动效果简单点理解就是指用户让通过鼠标实现网页多层背景以不同的速度移动，从而形成立体的运动效果，带来非常出色的视觉和交互体验。这种特效最早是惊现在Nike 2011年的Nike Better World项目里，时至今日，这种视差滚动效果被越来越多的国外网站所应用，成为Web设计的热点趋势。这种网站通常通过鼠标滚轮滚动来实现，用超酷的视觉体验来取代枯燥的页面滚动，从而“吸引”用户走向自己的目标。
说了这么多，我想大家最关心的还是如何实现这样的效果？或者说这样的效果要怎么实现？这也是我很关心的问题，那么从今天开始，我们一起来观注“Parallax Scrolling”这个流行词。首先今天整理了一些有关于制作“Parallax Scrolling”Web效果的一些插件，希望对大家有所帮助。
Stella.js能很容易帮助创建一个视差滚动网站。他的文档也非常的简单。先给你的网站添加数据，然后通过“stallar()”函数来调用。
Super Scrollorama很牛的一个插件，鼠标滚动来控制Web元素显示或隐藏。
没有垂直滚动，通过jQuery scroll path插件，你可以定义很多路径，来实现滚动效果。
这个插件充许你使用多个固定面板来创建一个页面，而且这些面板可以实现类似于卷帘的效果。
Plax插件可以通过鼠标的悬浮或移动来触发视差滚动效果。
相当简单的一个插件，以每个div作为一个幻灯片，用来制作视差滚动效果。
jParallax通过鼠标移动来控制节点的定位层，实现移动的视差效果。
Spritely是一个轻量级插件，通过简单的方法制作动画的sprites和动态滚动背景图，从而达到视差效果。
Scrolling Parallax是一款通过滚动条或鼠标移动来实现视差效果的jQuery插件。它充许一张背景图片以不同的速度来移动，从而实现视差滚动效果。
Waypoints是一个简单的jQuery插件，通过一个简单的函数就能实现视差滚动效果。
上面是为大家搜集整理的有关于“视差滚动”的插件，希望这些插件能给你平时工作带来便利，我们也会在后面整理出更多有关于这方面的资料，比如说 step by step的教程，在线案例欣赏，优秀外文翻译等，希望后面的资料和教程能帮你更深一层的了解这个“视差滚动”，当然关键还是需要大家动手一试，不要感到害怕，要始终相信自己，你是最棒的。如果大家有这方面相关的资源，烦请在评论中跟贴，与大家共享。
如需转载，烦请注明出处：http://www.w3cplus.com/source/10-best-Parallax-Scrolling-plugin.html
Responsive在2012年铺天盖地，随处可见，而且在国外使用这种设计的站点也很多，W3cplus也一样，跟着这个趋势学习和总结了一些有关于Responsive方面的教程和资源。但这些教程和资源都是东一榔头西一棒，不够系统，大家学习起来相对较为困难。不过还好，在互联网上这方面的资源很多，我在Responsive Resources一文中发现了对Responsive做了系统的归纳。我也分成几篇文章把里面的链接移动W3cplus上来，与大家分享。希望这几期资源的转载，对大家学习Responsive能起到帮助。
今天要转载的资源是Responsive Resources中的第一部分“Responsive学习线路”，这里主要包括以下五个部分：
这里提供了一些关于Responsive基础教程，包括书籍方面的相关资源：
第二部分的资源主是要用来介绍Responsive的概念性的教程，通过这些教程的学习，能帮且大家更好的理解Responsive，对以后的深入学开和开发都会有极大的帮助。
学习每一样东西都是有一定的方法，方法对了，学习起来的速度就快。这里列出一些学习Responsive的方法。
以下几篇文章是详细介绍了学习Responsive过程方面的东东。
不管是个人学习，还是团队学习，都需要付出一定的成本，这里有一篇文章介绍了学习Responsive成本。
上面总共整理了31个有关于Responsive方面的资源（有教程、有案例、有PPT等），不过介绍Responsive方面肯定不只这些，如果大家平时也有观注这方面的内容，或者你那有更好的资源，也可以跟我们一起分享。
特别声明：以上资源都是外文，如果您碰到打不开的链接，不用着急，开启您的VPN您就可以正常的阅读。此文所列资源都来自于：Responsive Resources一文。
如果您喜欢这里面的资源，请您继续观注下一期，将为大家分享Responsive Design工具。
如需转载，烦请注明出处：http://www.w3cplus.com/source/responsive-resources-strategy.html
严格来说，目前各个浏览器都还不支持css3的渐变背景的动画，所以在制作的时候我们要灵活变通下，这里有两种方法可以曲折实现渐变背景的动画：
第一种：妙用background-color，有些是简单的颜色渐变，比喻由浅绿到深绿，那么你就可以把background-color设置为绿色，然后background-image设置为全透明色到半透明的黑色，这两者一合起来就是浅绿到深绿了哈哈，当然这个应用比较局限。
第二种：运用background-position，用定位来解决渐变背景的变化。
下次附上实例，有兴趣的同学可以自己试试。
Web上的颜色运用，对于设计师来说是小菜一碟，对于不是设计师来说还真是头痛的事情。打个比方说，Web的安全色是什么？或者说Web的安全色有多少？说实话，我以前只知道一个数字216，但我不知道具体是什么？今天为大家整理了216个web安全颜色，仅供大家参考。
不同的平台（Mac、PC等）有不同的调色板，不同的浏览器也有自己的调色板。这就意味着对于一幅图，显示在Mac上的Web浏览器中的图像，与它在PC上相同浏览器中显示的效果可能差别很大。选择特定的颜色时，浏览器会尽量使用[2]本身所用的调色板中最接近的颜色。如果浏览器中没有所选的颜色，就会通过抖动或者混合自身的颜色来尝试重新产生该颜色
为了解决Web调色板的问题，人们一致通过了一组在所有浏览器中都类似的Web安全颜色。这些颜色使用了一种颜色模型，在该模型中，可以用相应的16制进制值00、33、66、99、CC和FF来表达三原色（RGB）中的每一种。这种基本的Web调色板将作为所有的Web浏览器和平台的标准，它包括了这些16进制值的组合结果。这就意味着，我们潜在的输出结果包括6种红色调、6种绿色调、6种蓝色调。6*6*6的结果就给出了216种特定的颜色，这些颜色就可以安全的应用于所有的Web中，而不需要担心颜色在不同应用程序之间的变化。
对于我们来说，将某种颜色的10进制值转化为16进制值不是一件容易的事情，尽管我们可以学会将RGB颜色转化为16进制的数学原理。
但是我们使用大多数图像编辑或者绘画程序中提供的颜色转化工具进行转化更为容易。通过使用滴管工具，可以在任何所需的颜色上单击，然后再颜色的拾取器中查看该颜色的RGB、HSB、CMYK、LAB和最终16进制数值。
在HTML里，颜色有两种表示方式。一种是用颜色名称表示，比如blue表示蓝色。另外一种是用16进制的数值表示RGB的颜色值。RGB是Red，Green，Blue意思，RGB每个原色的最小值是0，最大值是255，如果换算成16进制表示，就是(#00)，(#FF)。比如白色的RGB(255,255,255)，就用#FFFFFF表示；还有黑色的RGB(0,0,0)，就用#000000表示。
注：在W3C制定的HTML 4.0标准中，只有16种颜色可以用颜色名称表示(aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow)，其它的颜色都要用16进制RGB颜色值表示。
以前，很多电脑显示器最多支持256色，因此出现了216种Web安全颜色，以保证网页的颜色能够正确显示。之所以不是256种Web安全颜色，是因为Microsoft和Mac操作系统有40种不同的系统保留颜色。
以下就是Web中216种安全颜色的信息示意图：
如需转载，烦请注明出处：http://www.w3cplus.com/css/216-web-safe-color-info.html
好久没有写案例了，今天邮件收到Team Dzyngiri 设计的Creating Beautiful Login Form。他这个案例用了很多CSS3效果，不过有些地方还是使用了图片和jQuery来实现。后来兴趣来了，我根据他的设计效果进行了一些修改。比如说，icon我使用了我们常用的@font-face来制作，icon显示与隐藏，他是通过jQuery来实现，我现在改了他的结构和样式，通过css来实现。感兴趣的同学可以对比一下两种方法的实现过程与区别。
<form name="login-form" class="login-form" action="" method="post">
<div class="header">
<h1>Login Form</h1>
<span>Please login by using this beautiful login form or if you dont have an account, you can Register!</span>
</div>
<div class="content">
<input name="username" type="text" class="input username" placeholder="Username" />
<div class="icon-user" id="user-icon"></div>
<input name="password" type="password" class="input password" placeholder="Password" />
<div class="icon-pass" id="user-pass"></div>
</div>
<div class="footer">
<input type="submit" name="submit" value="Login" class="button" />
<input type="submit" name="submit" value="Register" class="register" />
</div>
</form>
html{
height: 100%;
background-color: #252326;
background:
url('dots.png') center center fixed,
url('bg.jpg') center center no-repeat fixed;
background-size: auto, cover;
}
body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight:300;
text-align: left;
text-decoration: none;
overflow:hidden;
background:none;
}
@font-face {
font-family: 'broccolidry';
src:url('fonts/broccolidry.eot');
src:url('fonts/broccolidry.eot?#iefix') format('embedded-opentype'),
url('fonts/broccolidry.svg#broccolidry') format('svg'),
url('fonts/broccolidry.woff') format('woff'),
url('fonts/broccolidry.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
/* Use the following CSS code if you want to have a class per icon */
[class^="icon-"]:before,
[class*=" icon-"]:before {
font-family: 'broccolidry';
font-style: normal;
speak: none;
font-weight: normal;
line-height: 1;
font-smoothing: antialiased;
color: white;
font-size: 20px;
display: block;
height: 47px;
line-height: 47px;
text-align: center;
}
.icon-pass:before {
content: "\e000";
}
.icon-user:before {
content: "\e001";
}
/*******************
LOGIN FORM
*******************/
.login-form {
width: 300px;
margin: 50px auto;
position: relative;
background: #f3f3f3;
border: 1px solid #fff;
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
/*******************
HEADER
*******************/
.login-form .header {
padding: 40px 30px 30px 30px;
}
.login-form .header h1 {
font:300 28px/34px 'Denk One', sans-serif;
color: #414848;
text-shadow: 1px 1px 0 rgba(256,256,256,1.0);
margin-bottom: 10px;
}
.login-form .header span {
font-size: 11px;
line-height: 16px;
color: #678889;
text-shadow: 1px 1px 0 rgba(256,256,256,1.0);
}
/*******************
CONTENT
*******************/
.login-form .content {
padding: 0 30px 25px 30px;
}
.login-form .content .input {
width: 188px;
padding: 15px 25px;
font:400 14px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
color: #9d9e9e;
text-shadow: 1px 1px 0 rgba(256,256,256,1.0);
background: #fff;
border: 1px solid #fff;
border-radius: 5px;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
}
.login-form .content .password,
.login-form .content .icon-pass {
margin-top: 25px;
}
.login-form .content .input:hover {
background: #dfe9ec;
color: #414848;
}
.login-form .content .input:focus {
background: #dfe9ec;
color: #414848;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
}
[class^="icon-"] {
width: 46px;
height: 47px;
display: block;
position: absolute;
left: 2000px;
padding-right: 2px;
z-index: 3;
border-radius: 5px 0 0 5px;
background:rgba(65, 72, 72, 0.75);
}
.icon-user {
top:147px;
}
.icon-pass {
top:221px;
}
.input,
[class^="icon-"],
.button,
.register {
transition: all 0.5s;
}
input[type="text"]:focus ~ #user-icon,
input[type="password"]:focus ~ #user-pass {
left:-49px;
}
/*******************
FOOTER
*******************/
.login-form .footer {
padding: 25px 30px 40px 30px;
overflow: auto;
background: #d4dedf;
border-top: 1px solid #fff;
box-shadow: inset 0 1px 0 rgba(0,0,0,0.15);
}
/* Login button */
.login-form .footer .button {
float:right;
padding: 11px 25px;
font:300 18px 'Denk One', sans-serif;
color: #fff;
text-shadow: 0px 1px 0 rgba(0,0,0,0.25);
background: #56c2e1;
border: 1px solid #46b3d3;
border-radius: 5px;
cursor: pointer;
box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
}
.login-form .footer .button:hover {
background: #3f9db8;
border: 1px solid rgba(256,256,256,0.75);
box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}
.login-form .footer .button:focus {
position: relative;
bottom: -1px;
background: #56c2e1;
box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
}
/* Register button */
.login-form .footer .register {
display: block;
float: right;
padding: 10px;
margin-right: 20px;
background: none;
border: none;
cursor: pointer;
font:300 18px 'Denk One', sans-serif;
color: #414848;
text-shadow: 0px 1px 0 rgba(256,256,256,0.5);
}
.login-form .footer .register:hover {
color: #3f9db8;
}
.login-form .footer .register:focus {
position: relative;
bottom: -1px;
}
如需转载，烦请注明出处：http://www.w3cplus.com/demo/beautiful-login-form.html
随着移动端出现，Web上有很多问题出现，比如说触摸事件（Touch Event）。随着问题的出现，总是有很多解决方案的。通过jQuery插件为移动端解决触摸事件。我想你知道一些jQuery插件，或许会有其他更好的解决方案。
就算是你不知道也无防，现在只要你会运用你手中的互联网，什么资料你都能很方便得到。但有时候工作忙没时间查找，今天在Design Your Way站上看到一篇有关于这方面的文章，这里搜集了43个有关于jQuery Touch事件插件。希望对大家有所帮助。
以上43个有关于Touch事件的jQuery插件是由 Design Your Way整理提供，如果你要是转载的话，请注明出处：http://www.designyourway.net/blog/resources/jquery-plugins-that-handle-touch-events-43-items/。
这43个插件都带有API，而且大多数都在Git Hub开源了，如果你感兴趣可以选择你喜欢的，并且关注下去。最后希望这些插件能方便你的工作之需。
如需转载，烦请注明出处：http://www.w3cplus.com/source/jquery-plugins-that-handle-touch-events-43-items.html
特别声明：此篇文章由D姐根据Emily Lewis的英文文章原名《Be a CSS Team Player: CSS Best Practices for Team-Based Development》进行翻译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://msdn.microsoft.com/en-us/magazine/ff679957.aspx以及作者相关信息
作者：Emily Lewis
译者：D姐
你有过多少次接手别人开发过的项目，却发现作者的代码思路一团糟吗？或是你跟几个团队成员合作开发，他们每个人都有自己书写代码的方式吗？或是你重新回顾你多年前开发的项目，不记得当初是怎么想的？
我总是遇到这种事情。事实上，我最近在修复供应商提供facepalm-inducing的css上花费了将近300个小时。这300个小时，使我充满了挫败感，不仅是因为我自己，还有我的团队成员的原因。而且他占用了本应该花费在新项目上的宝贵时间和资源
如果供应商在他的css中已经遵循了一些基本的指导方针。那么将会为他节省宝贵的时间和金钱，更不用说我会已更好的状态去对待他。在本文中,你将学习书写CSS的最佳实践来帮助你避免不一致和冗余;实际上,这样制定标准,简化了团队开发的工作。
书写好的css的基础是有良好的结构。这样的css可以帮助我以及任何将来要更新这段代码的人，更好的理解并快速定位到要找的样式上。
在开始写样式前，我先定义了一个css文件结构，根据页面中不同内容部分划分的区块。通常，这些结构是每个网站通用的:
在我的样式文件里，我添加了必要的注释，以标明每个部分的样式从哪里开始
/*---GLOBAL---*/ /*---HEADER---*/ /*---NAV---*/ /*---CONTENT---*/ /*---SIDEBAR---*/ /*---FOOTER---*/
注意第一个注释global的部分，他不是针对于网站的特定内容，而是针对网站上的通用样式，例如布局结构，以及标题、段落、列表和链接等基础样式。
在样式头部设置通用的样式，有助于全站更好的继续共有样式，并在需要时覆盖即可。
在创建超大型的网站，处理相当多的css时，我就会给每个区块里添加二级注释。例如，在global里我定义这样的二级结构分类：
/*---GLOBAL---*/ /*--Structure--*/ /*--Typographic--*/ /*--Forms--*/ /*--Tables--*/ /*---HEADER---*/ /*---NAV---*/ /*--Primary--*/ /*--Secondary--*/ /*---CONTENT---*/ /*---SIDEBAR---*/ /*---FOOTER---*/
同样你也看到了我给NAV也添加了二级注释，分别为主导航和次导航。
事实上，对于很少css的小型网站，我通常是不使用二级注释的。但是对于大型的css文件，二级注释被证实是很管用的。
你使用的注释格式完全取决于你。以上你看到的例子是我和我的团队很钟爱的方式。也有些人喜欢用两行定义他们的注释格式：
/* HEADER ------------------------------*/
另一些人使用特殊字符如‘=’，作为搜索字符的标记:
/* =Header ------------------------------*/
一些人不使用二级注释，他们用一种完全不同的结构，不是根据页面内容划分，而是用元素的类型划分如：headers，images，lists等等。关键是用你喜欢的格式去定义并一直这么使用。
想根据内容元素划分？没问题。想要小写注释，那就去做。不想使用二级注释缩进？那就不用.不喜欢连字符想用时间？ok。你只需要做对于你和你的团队最有意义的事情就好。
我们已经了解了注释的结构，但是你应该就这如何使用注释的问题跟你团队的同事交流一下。
作为团队成员的一份子，很有必要在团队成员之间交流已经写好的css文件的相关细节。在我的团队里，我们在css文件的头部添加了一些css文件创建和更新信息的摘要注释。
/*----TITLE: Main screen styles | AUTHOR: EPL | UPDATED: 03/23/10 by EPL----*/
在处理多个样式表时，头部的信息是有用的。如一个屏幕，一个用于打印，一个用于移动甚至是关于ie的hack写法。作者的信息让团队成员知道一旦css出了问题应该去找谁。而更新信息让团队了解谁最后做的更新以及更新时间。
至于你的摘要注释，仅需要包含对你团队有用的信息。如果你不需要作者信息，跳过。如果想要版权声明加上。我甚至见过摘要里面有地址和联系信息的。
/*---- IE6 screen styles (ie6.css) Company ABC 1234 Avenue of the Americas New York, NY 10020 http://companyabc.com Updated: 03/23/10 by EPL ----*/
我遇到过的最有用的css注释之一是网站用到的颜色值。
/*---COLORS: Green #b3d88c | Blue #0075b2 | Light Gray #eee | Dark Gray #9b9e9e | Orange #f26522 | Teal #00a99d | Yellow #fbc112---*/
颜色值在开发阶段很有用，节省你测试颜色和从其他样式里查找的时间。你不需要知道这个十六进制值是不是蓝色，你只需要找到这个颜色值，然后复制粘贴即可。
在我的团队里，我们在css文件头部添加通用的颜色值，要在所有样式声明和注释前，摘要注释后面添加。我们也尝试保持关键字尽可能简单方便维护，但是他到底有多复杂完全取决于你。
格式也全取决于你。你可以让所有定义的颜色值放在一行显示，也可以把他们分成多行显示:
/*---COLORS Green #b3d88c Blue #0075b2 Light Gray #eee Dark Gray #9b9e9e Orange #f26522 Teal #00a99d Yellow #fbc112 ---*/
同样，找到一个最好的有利于你需要的格式，一旦定义好就要保持他的一致性。
有时候在我开发的过程中，不得不徘徊在我的css 和团队其他成员之间。而这时注释就派上用场了。当我有时冥思苦想为什么css在ie下会有这样的bug，我就只需要走开即可。
你或是你的同事做个笔记，包括可能的样式，和没有解决的困惑：
/*--//--Styling for link states is pending new changes from designer, please don't edit | EPL 03/23/10--\\--*/
a, a:link, a:visited {
color:#0075b2;
text-decoration:none;
}
a:hover, a:focus, a:active {
color:#b3d88c;
}
为了让他们与众不同，我通常用一种不同于其他注释的格式，同时让他们尽可能的详细。还是使用最适合你的格式。
不过记住，一旦你完成开发和调试工作，这些注释就没有用了。他们既不跟你的工作有关，也不跟你的css有关，他们的存在只会增大你的文件体积。
样式重置已经很流行。他们出现在样式文件的头部，用来设置html元素在跨浏览器显示的基本样式:
/*---RESET---*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
以上的例子摘自Eric Meyer的重置文档，这个我也经常用。但是我倾向于去掉我用不到的标签，我也建议你这样做。比如我的团队构建的网站里面几乎没有<kbd>,也没有<iframe>,<applet>或是包含以上的一些元素。
所以，我去掉这些元素选择器。虽然在页面加载或是文件体积上只有很小的不同，但是我感觉这样有助于，避免团队成员间对于不使用的标签的困扰。
如果我不想要覆盖浏览器的内置样式，我也可以编辑重置样式表，例如如何处理无序列表。在这种情况下，我确保这些元素不包含在样式表声明里。
不过，我应该澄清一下，css重置并不适用于所有人。你有很多不使用他的理由，这由你决定。如果你要重置样式，要保持你的重置样式表尽量干净和特殊。
最头疼的事情之一是，遇到其他人写的css，而且是定义的类名和id名毫无意义的那种。例如像下面这样：
.f23 {
background: #fff;
border: 1px solid #ff0;
font-weight: bold;
padding: 10px;
}
我根本不知道.f23是什么意思。甚至更糟的是都没有任何形式的注释。我不知道.f23代表什么内容。是标题？主要内容？还是导航？
这种情况，尤其是对于大型网站，就可能浪费大量的时间去查找出现这个类名的标签位置。如果作者用一个约定好的名字命名，如那些有意义的，那些基于内容的样式的：
.alert {
background: #fff;
border: 1px solid #ff0;
font-weight: bold;
padding: 10px;
}
如你所见，类名.alert提供的上下文信息要比用一个随机数组成的类名提供的信息多。
不仅仅是上下文，有语意的命名还可以节约时间。考虑到一个公司品牌的频繁更换，如果你开发的css使用表现的类名而不是语义化的类名和id名，那么在寻找、维护css时，你将比预期花费更多的时间。
例如，如果你给网站上一块内容，定义一个bluebox的类名，使用了公司logo的蓝色基调。然后公司重组了，他们现在用红色基调的logo，这时你的.blueBox就没有意义啦。所以你不仅需要更新样式表的十六进制颜色值，还需要修改标签中的所有引用到blueBox的地方。
相反如果你用callOut作为类名（或是同样有意义的名字），你会省去手头的很多工作量。
在css 的使用中，我倾向于能少则少的原则。不能因为你可以给每个元素指定类名，就意味着你就应该给每个元素指定类名。
在我修复供应商糟糕的css过程中，发现类名被滥用了，出现在许多本来不需要的地方。例如每一个lable标签就定义一个lable类名，每一个form就定义一个form。但是我们的设计和结构中只需要给一个form元素设置样式，它里面也只包含一个label元素。
form.form {
float: right;
margin: 0;
padding: 5px;
}
label.label {
clear: both;
float: left;
text-align: right;
width: 145px;
}
由此产生的css本身和他造成的冗余并不可怕，可怕的是他造成的困惑。作为一个设计师看到了这个form类，可能猜想是不是其他样式表里也定义了叫form的类名，然后去查找根本不存在的样式，这就是我时间浪费的原因。
上面只是一个简单的例子。一个我遇到的有关类名更疯狂的例子是渴望给予元素特殊性
<div id="feature" class="tabs">
<ul class="tabs">
<li class="tabs"><a href="#newServices">New Services</a></li>
<li class="tabs"><a href="#newProducts">New Products</a></li>
</ul>
</div>
注意到tabs的类名应用到了上面结构中的每一个标记？导致如下的css目录列表:
div.tabs ul.tabs li.tabs {
float: left;
font-weight: bold;
padding: 3px;
}
对于li最简便的解决方法应该是这样：
#feature li {
float: left;
font-weight: bold;
padding: 3px;
}
如果你的元素定义样式不需要类名，那就不要用。用的太多类名，不仅使你的结构和css很臃肿，也失去了他们在css 中的意义。
你也许注意到了在最后的例子中，我仅使用了# feature作为选择器而不是div#feature。只有在为了区别其他选择器的情况下，添加div才合适，否则只会给你的团队带来负担。而且尽量少用特殊的声明，也为日后覆盖任何样式提供方便。
最后一点，我不喜欢多类，你也许还有印象。虽然我不提倡使用不必要，多余的类名，但是对于通过多类保持元素表现的共用，我可是一个忠实的粉丝，然而可能有一些理解的不同之处：
.announcement {
background: #eee;
border: 1px solid #007b52;
color: #007b52;
font-weight: bold;
padding: 10px;
}
.newsAnnouncement {
background: #eee;
border: 1px solid #007b52;
color: #007b52;
float: right;
font-weight: bold;
padding: 10px;
}
上面的两个声明，除了.newsAnnouncement多了一个浮动外，都完全一样。所以我大可像下面这样而不是重复写相同的样式:
.announcement {
background: #eee;
border: 1px solid #007b52;
color: #007b52;
font-weight: bold;
padding: 10px;
}
.floatR {
float:right;
}
然后给我的新闻内容添加两个类名
<div class="announcement floatR">
但是且慢，我不是说过要根据约定好的名字而不是根据表现命名吗？没错，但是凡事总有个例外。
是的，.floatR是一个表现类名，但是他适用于这种情况，而且可以用于其他需要多类的情况，所以这是我的团队经常使用的方法。
在我的300个小时的折磨里，遇到的另一个问题是完全相同的样式出现在多个样式表里，而唯一的区别就是声明他们的选择器不同：
#productFeature {
background: #fff;
border: 1px solid #00752b;
float: left;
padding: 10px;
}
#contactFeature {
background: #fff;
border: 1px solid #00752b;
float: left;
padding: 10px;
}
#serviceFeature {
background: #fff;
border: 1px solid #00752b;
float: left;
padding: 10px;
}
这不仅使得css文件体积过于臃肿，也使维护成了噩梦。解决方法就是合并他们成一个样式声明：
#productFeature, #contactFeature, #serviceFeature {
background: #fff;
border: 1px solid #00752b;
float: left;
padding: 10px;
}
现在如果要更新样式只需要修改一个声明而不是三个。
本文中出现的所有css实例都是用的多行的格式，每一对属性和值占单独一行。这个是广泛使用的约定，不仅是在css文件中，也多出现在书里和文章里。许多人认为他的可读性很好，这也就是什么我在本文使用他的原因。
然而在和团队的工作中，尤其是大型的css文件，我是将样式写成一行:
.alert {background: #fff; border: 1px solid #ff0; font-weight: bold; padding: 10px;}
就我个人和我的团队而言，觉得单行的可读性更好。当你查找css时多行样式就变得很麻烦，相比较而言单行查找更容易。
对于你和你的团队，选择最合适你的团队的格式，并一直使用他。
一些人建议将每个声明按照字母表的顺序排列，方便快速查找一个属性。以前我对这样的事情并不在意，但是经过处理供应商混乱的css之后，我意识到将一些思想应用到样式声明的组织中是个很好的主意。
尽管我发现按照字母表排序很有用，但是我还是会根据上下文来组织哪些属性放在一起。比如，我喜欢将所有的盒模型属性放在一起。如果我使用了绝对定位，我就把这些属性放在一起:
#logo {
border: 1px solid #000;
margin: 0;
padding: 0;
position: absolute;
top: 5px;
right: 3px;
}
这里没有对错之分，仅仅是决定用哪种属性的排序并一直用它就好了。
使用css简写一直是认为可以提高你的css水平的方法。他同时也适用于团队，它不仅可以有助于浏览，而且可以方便设置大家遵守的标准。这样就减少了花费在思考和书写样式的时间。
如果你使用0值，没有必要给他指定单位:
margin: 2px 3px 0px 4px
变成
margin: 2px 3px 0 4px
十六进制颜色值如果是由三对数组成，可以从每组中抽出一个数组成该颜色值的简写:
color: #ff0000
写成
color: #f00
盒模型中的margin，padding，border如果四边值相同，可以合并:
padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px
合并成
padding: 5px
如果上下，左右值一样，你只需要写两个就够了：
padding: 5px 10px 5px 10px
合并成
padding: 5px 10px
多条字体属性可以合并成一条
font-style:italic; font-weight:bold; font-size: 90%; font-family: Arial, Helvetica, sans-serif;
合并成
font: italic bold 90% Arial, Helvetica sans-serif
背景属性也是可以合并的
background-color:#fff; background-image: url(logo.png); background-repeat: no-repeat; background-position: 0 10%;
合半成
background: #f00 url(logo.png) no-repeat 0 10%
请注意最后两个例子，字体和背景属性。属性值的声明顺序要按照w3c的标准来。
虽然一些人认为验证css需要指定一个很好的验证规则，这一点我不强求但是他绝对是有要求的。验证能够确保你的工作，是否准备好分享给团队的其他成员，所以他应该满足下面要求：
我建议使用W3C CSS验证服务。
如果你的团队关心文件大小，页面加载和带宽的话，你应该考虑使用一个压缩工具。它主要是用来去除不必要的注释，空格。这里有一些压缩工具可以考虑：
我不建议在开发的过程中压缩文件，因为压缩可以减小你的文件大小，同时也削弱了你和团队之间协同开发和处理css 的能力。因为他去掉了具有可读性的所有注释和空格，所以应该把压缩作为产品上线的最后一道工序。
本文中提到的只是少数基础实践，他们可以帮助你和团队高效的工作。遵循这些准则可以进一步完善你的css。如果你很感兴趣的话，我推荐你阅读下面的文章:
不管你是工作在一个团队中，还是作为外包或是作为团队的唯一成员，这些css准则将为你日后成为一个优秀的团队成员打好坚实的基础，它不仅节约你的开发时间，也避免了不必要的沮丧情绪。
译者手语：初次翻译前端技术博文，整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！
如需转载烦请注明出处：
英文原文：http://msdn.microsoft.com/en-us/magazine/ff679957.aspx
中文译文：http://www.w3cplus.com/css/CSS-best-practices-for-team-based-development.html
Windows8已经到来，基于Metro UI风格完全改变了Window要操作系统。Metro是微软的设计语言，微软将这个新的UI用于他们的所有平台，包括台式机、平板电脑、手机和他们的网站。就我个人而言，我喜欢Metro UI，它的简单性、基于网格的接口（适合响应式设计），以及他在每个部分的一致性很适合现代网页设计的需求。Metro UI也将挑起网页设计的一股新浪潮。
Metro的用户界面具有以下几个特性：
现在Metro的概念传播到多种产品上。品牌宣传、媒体中心，Windows Phone，Windows8操作系统。其最大特点就是通过方正的区块标记简单的连接到需要的地方，简单明了，从视觉上就能告诉我们要去的地方是什么？
微软是这样描述的：“Metro是我们的设计语言。我们称之为‘Metro’，是因为他的现代和简约，而且他在移动时，速度非常的快，他的排版结合印刷术。而且他是完全真实的”。
METRO IS OUR DESIGN LANGUAGE. WE CALL IT METRO BECAUSE IT'S MODERN AND CLEAN. IT'S FAST AND IN MOTION. IT'S ABOUT CONTENT AND TYPOGRAPHY. AND IT'S ENTIRELY AUTHENTIC.
——Microsoft
Metro专注的四大原则：
下图是Microsoft TechEd Africa 2013的设计图效果：
尽管基于Metro UI并不是什么新鲜事,但Metro UI肯定会激发很多Web设计师,我们将看到很多网站类似于他。如果你喜欢Metro UI或者计划在您的下一个网站创建一个类似于Metro UI的风格,下面的资源将对你会有很大的帮助:
Metro UI真的很有吸引力,我们收集了大量的资源,这样你就可以很容易在Web项目或应用程序中实现Metro UI效果。
这可能是最大介绍基于Metro UI的Web开发。这个UI分类很全，覆盖了“全局样式”、“网格系统”、“基本样式”以及大量的“Javascript组件”。非常详细和优秀的文档（类似于twitter的bootstrap），如果您想学习有关于Metro UI在Web上的相关知识，这个网站你必须得去看看。
Metro.css灵感来源于Twitter Bootstrap，Metro.css包括了“基本样式”、“常用UI控件样式”等。
Sergey Pimenou基于Twitter Bootstrap创建的一个Metro UI CSS。所以你可以想像得到，里面收藏的样式、UI组件和javascript组件。
Metro-Bootstrap是另一个通过Bootstrap实现的Metro UI。这意味着，Bootstrap具有的功能，在这个Metro UI中都将包括。
这个主题不单单是基于Web上的应用，你下载他后你可以运用到你的桌面和手持设备中。
这是一个很好看的Metro UI模板，不过你要是想使用这个模板中的所有功能，你是需要付费购买的。
Droptiles是一个开源的，像Metro风格的Windows 8开始面板的Web 2.0控制面板。迷你应用程序,可以从外部源获取数据。点击一个完整的应用程序启动区块。Droptiles是建立几乎完全的HTML、Javascript和CSS,因此高度移植到任何平台。
Droptiles是一个开源的，像Metro风格的Windows 8开始面板的Web 2.0控制面板。迷你应用程序,可以从外部源获取数据。点击一个完整的应用程序启动区块。Droptiles是建立几乎完全的HTML、Javascript和CSS,因此高度移植到任何平台。
jQuery Metro Plugin可轻松的帮你创建一个水平滚动的Web，而且这个Web具有Metro UI风格。
Metro JS是一个JavaScript插件，jQuery开发很容易激活Metro web上的界面。这个版本主要关注生活版块,应用程序栏和主题。他还处在早期发展阶段,但所有的特性兼容IE7 +(Win / WinPhone),Firefox,Chrome,Opera和Safari Android,,(OSX / iOS)。
TileJs使用CSS3和Javascript实现了Window8 Tiles' subtle效果。
jQUIT Builder是一款基于Metro UI的jQuery UI组件。
这个主题提供了一个Metro UI用户界面应用程序，支持jQuery Mobile和Windows Phone 7.5。
到目前为止,最大的Metro UI的图标集。目前包含678个512x512 Dock图标，
Windows Phone 7的130个特性图标，
世界上最大的免费图标的原套Windows8/Metro。今天的总数为1027。还可以下载作为字体文件的可伸缩的版本。
手工制作的具有Metro UI风格的像素图标。
上面都是有关于Metro UI主题方面相关资源，希望这些资源对于学习Metro UI会有所帮助。如果您发现有这方面相关的资源，希望能在下面的评论中分享。
如需转载，烦请注明出处：http://www.w3cplus.com/source/metro.html
这个DEMO是一个区块的展示效果，在Web中经常可见，你也可以简单的理解成是一个三列展示区块，在这个DEMO中，整体风格是采用的Metro UI设计，但是我们在效果中添加了一些CSS3的动画效果，让整个DEMO看起来更大生动。
这样的结构是常见的一种，在这个案例中采用的是列表结构，在每个区块中，我们有一个标题、有一个价格标签和简短的文字介绍：
<div class="item clearfix">
<ul class="item-list">
<li>
<div class="item-1">
<h2><span>BasicBasic</span></h2>
<h3>$ <span>5</span>.99 <em>/</em> Month</h3>
<p>Lorem ...</p>
</div>
</li>
...
</ul>
</div>
先进行布局样式的处理，此处采用的是float来让他们排列在一行：
body {
background-color: #dbdbdb;
}
.demo {
margin: 40px auto 0;
width: 960px;
}
.item-list li {
float: left;
width: 33%;
text-align: center;
overflow: hidden;
}
/*使用CSS的属性选择器，选择了类名以“item”开头的Div元素*/
div[class^="item-"] {
margin-left: 10px;
background-color: #fff;
}
接下来对每个区块内部的元素进行美化效果：
.item-list h2 {
color: #fff;
font-size: 30px;
line-height: 60px;
background-color: #00aec7;
transition: all 200ms linear;
}
.item-list h3 {
font-size: 24px;
line-height: 100px;
}
.item-list h3 span {
font-size: 48px;
transition: all 300ms linear;
}
.item-list em {
color: #00aec7;
transition: all 200ms linear;
}
.item-list p {
color: #969696;
padding: 0 20px 40px;
transition: all 200ms linear;
}
.item-list div:hover h2 {
background-color: #006675;
transition: all 2s linear;
}
第二步中最关键的是使用了transition属性对每个元素做了一个动画过渡效果，你可以发现当页面加载的时候，会有一些动画效果。如果你没有接触过，transition属性的使用，可以狠狠的点击这里查看。
transition: all 200ms linear; /*我们案例中用了perfixfree.min.js,所以css3的属性只写了一个*/
接下来是最关键的一步了，在鼠标经过每个div区块时，里面的每个元素会有一个动画效果，实现在这三个动画效果，我们需要使用@keyframes来创建三个不动的动画：
/*元素从左向右移进*/
@keyframes moveF_Left {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0%);
}
}
/*元素从右向左移进*/
@keyframes moveF_Right {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0%);
}
}
/*元素从下向上移进*/
@keyframes moveF_Bottom {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0%);
}
}
动画创建好了以后，需要事件触发其效果，在这里使用的是“:hover”来触发动画：
.item-list div:hover h2 span {
display: inline-block;
animation: moveF_Left 500ms ease;
}
.item-list div:hover h3 {
animation: moveF_Right 500ms ease;
}
.item-list div:hover h3 span {
font-size: 60px;
}
.item-list div:hover p {
animation: moveF_Bottom 500ms ease;
color: #00aec7;
}
.item-list div:hover p em {
color: #969696;
}
通过使用animation属性调用了当初创建的动画。这样一来就完成了整个DEMO的效果，详细的CSS代码如下所示：
body {
background-color: #dbdbdb;
}
.demo {
margin: 40px auto 0;
width: 960px;
}
.item-list li {
float: left;
width: 33%;
text-align: center;
overflow: hidden;
}
/*使用CSS的属性选择器，选择了类名以“item”开头的Div元素*/
div[class^="item-"] {
margin-left: 10px;
background-color: #fff;
}
.item-list h2 {
color: #fff;
font-size: 30px;
line-height: 60px;
background-color: #00aec7;
transition: all 200ms linear;
}
.item-list h3 {
font-size: 24px;
line-height: 100px;
}
.item-list h3 span {
font-size: 48px;
transition: all 300ms linear;
}
.item-list em {
color: #00aec7;
transition: all 200ms linear;
}
.item-list p {
color: #969696;
padding: 0 20px 40px;
transition: all 200ms linear;
}
.item-list div:hover h2 {
background-color: #006675;
transition: all 2s linear;
}
.item-list div:hover h2 span {
display: inline-block;
animation: moveF_Left 500ms ease;
}
.item-list div:hover h3 {
animation: moveF_Right 500ms ease;
}
.item-list div:hover h3 span {
font-size: 60px;
}
.item-list div:hover p {
animation: moveF_Bottom 500ms ease;
color: #00aec7;
}
.item-list div:hover p em {
color: #969696;
}
/*元素从左向右移进*/
@keyframes moveF_Left {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0%);
}
}
/*元素从右向左移进*/
@keyframes moveF_Right {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0%);
}
}
/*元素从下向上移进*/
@keyframes moveF_Bottom {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0%);
}
}
如需转载，烦请注明出处：http://www.w3cplus.com/demo/metro-ui-for-block.html
Metro UI CSS 是一套用来创建类似于Windows 8 Metro UI风格网站的样式. 这组风格被开发成一个独立的解决方案。这几天根据Sergey Pimenov的Metro UI CSS版本整理了一份 Metro UI CSS中文版，希望这份资料对于学习Metro UI的同学有所帮助，如果译得不好或不对之处还请谅解。
今天把译好的Metro UI CSS中文版发布在w3cplus上，如果你想学习Metro UI，你可以直接登录w3cplus，在下面两个地方进入 Metro UI CSS中文版网站：
这样你就可以看到译好的Metro UI CSS
接下来简单的介绍一下Metro UI CSS中文版本现在包括哪些东西
基本框架中包括“全局样式”、“布局与模板”、“网格系统”和“响应式设计”四个部分，里面提供了每个部分的演示和基本代码。
基本样式中包括了“排版”、“表格”、“表单”、“按钮”、“图像”和“图标”等。
在Metro UI组件中包括了“Tile”、“菜单与导航”、“侧边栏”、“多页控件”、“手风琴”、“按钮设置”、“评分系统”、“进度条”、“幻灯片”、“列表视图”、“滑块”和“通知”12个常用组件。
在网站上提供了源码下载的两种方式，也同供了几种赞助途径，希望在大家的帮助下能做得更好。
在Metro UI CSS中文版官网中我们还添加了Metro相关的资源链接，以及后期还会提供学习Metro UI CSS方面的笔记，希望这些资料能帮助大家更好的学习。
如需转载，烦请注明出处：http://www.w3cplus.com/source/metro-ui-css-zh.html
这是一个很简单也很普通的登录表单的效果，只不过这个案例采用的是Metro的UI设计风格，当然不是Metro UI CSS中的东西，设计风格，色彩类似于Metro。另外在加载表单时，给部分元素使用了transition属性，让你在视觉上加载有动画，其在input[type="text"]得到焦点时，使用了box-shadow模仿了border效果。
对于表单的结构，有各种各样的说法，仅我个来说，我比较喜欢Bootstrap的form表单结构，不过此处，藤藤使用的是自己写的结构，大家一看也明白：
<div class="login-control">
<form action="" method="get" accept-charset="utf-8" class="form-item">
<h2>LOGIN</h2>
<div class="form-item-1">
<input type="text" name="name" id="name" placeholder="Username">
</div>
<div class="form-item-2">
<input type="password" name="pwd" value="" placeholder="Password">
</div>
<div class="form-item-3">
<input type="checkbox" name="showpwd" value="" id="showpwd" checked="checked"><label for="showpwd">Show password</label>
<a href="#" class="fr">Forgot password?</a>
</div>
<div class="form-item-4">
<input type="button" value="Sign In">
</div>
</form>
</div>
整个案例中的CSS并不复杂，大家想想就知道，一个普通的登录表单能难到哪去，是吧。在这个案例中，使用CSS3的知识也不是很多，第一个是使用了CSS3的属性选择器，第二个是使用了transition动画过渡属性，第三个是使用了盒子阴影box-shadow属性，第四个使用了box-sizing属性修改了box module。具体的我们一起来看看吧。
body {
background-color: #dbdbdb;
}
.fr {
float: right;
}
.demo {
margin: 50px auto;
width: 350px;
}
.login-control {
color: #636363;
padding: 20px;
line-height: 60px;
background-color: #323232;
transition: all 300ms;
font-family: 'Devonshire', cursive;
}
表单的基本样式，比如说大小，颜色之类的，在这里使用了一个动画属性：
transition: all 300ms;
使用这个属性能让你的表单在页面初次加载时，会有一个从无到有的动画过程，给人看起来不会那么生硬，而且这个属性在后面多次使用到。
/*表单标题样式*/
.login-control h2 {
color: #f1f1f1;
font-size: 36px;
font-weight: normal;
line-height: 50px;
text-align: center;
}
/*文本框、密码框样式*/
.login-control input[type="text"],
.login-control input[type="password"] { /*使用了CSS3的属性选择器*/
width: 100%;
height: 40px;
padding: 0 2px;
border: none;
box-sizing: border-box;/*改变box module*/
transition: all 300ms;/*加载时的一个过渡动画效果*/
}
/*input得到焦点的效果*/
input:focus {
outline: 0 none;/*去掉得到焦点时外边框样式*/
box-shadow: 0 0 0 5px #00aec7;/*使用box-shadow模仿border效果*/
}
.form-item-3 {
text-align: left;
line-height: 20px;
margin-bottom: 20px;
}
/*复选框样式*/
.login-control input[type='checkbox'] {
vertical-align: middle;
margin-right: 5px;
}
/*登录按钮样式*/
.login-control input[type='button'] {
color: #fff;
font-size: 36px;
width: 100%;
height: 70px;
border: none;
background-color: #00aec7;
cursor: pointer;
transition: all 300ms;
font-family: 'Devonshire', cursive;
}
.login-control input[type='button']:hover {
background-color: #006675;
}
设置表单元素样式时，有两个属性很关键，第一个是通过box-sizing来修改了box module的默认格式，第二就是使用了box-shadow来模仿了border效果，使用input的得到焦点时，有一个不同的效果，但又不影响box的相关参数。
body {
background-color: #dbdbdb;
}
.fr {
float: right;
}
.demo {
margin: 50px auto;
width: 350px;
}
.login-control {
color: #636363;
padding: 20px;
line-height: 60px;
background-color: #323232;
transition: all 300ms;
font-family: 'Devonshire', cursive;
}
/*表单标题样式*/
.login-control h2 {
color: #f1f1f1;
font-size: 36px;
font-weight: normal;
line-height: 50px;
text-align: center;
}
/*文本框、密码框样式*/
.login-control input[type="text"],
.login-control input[type="password"] { /*使用了CSS3的属性选择器*/
width: 100%;
height: 40px;
padding: 0 2px;
border: none;
box-sizing: border-box;/*改变box module*/
transition: all 300ms;/*加载时的一个过渡动画效果*/
}
/*input得到焦点的效果*/
input:focus {
outline: 0 none;/*去掉得到焦点时外边框样式*/
box-shadow: 0 0 0 5px #00aec7;/*使用box-shadow模仿border效果*/
}
.form-item-3 {
text-align: left;
line-height: 20px;
margin-bottom: 20px;
}
/*复选框样式*/
.login-control input[type='checkbox'] {
vertical-align: middle;
margin-right: 5px;
}
/*登录按钮样式*/
.login-control input[type='button'] {
color: #fff;
font-size: 36px;
width: 100%;
height: 70px;
border: none;
background-color: #00aec7;
cursor: pointer;
transition: all 300ms;
font-family: 'Devonshire', cursive;
}
.login-control input[type='button']:hover {
background-color: #006675;
}
如需转载，烦请注明出处：http://www.w3cplus.com/demo/metro-login-form.html
这一个个人信息面板导航效果，整个效果展示的是个人相关信息的菜单项，以及搜索功能。在这个案例中使用的CSS3属性相对较多，有transition做的过渡动画效果、有transform做的3D旋转动画、@font-face实现的icon效果，gradient制作的双色块导航背景。而其中运用的最好的是CSS3的选择器，整个案例中使用了多个CSS3选择器，来控制需要选择的元素，比如说“:not”选择器，“nth-children()“选择器，详细的请看Demo的整个实现过程。
结构很简单，就是一个无序列表：
<div class="page-menu-wrapper">
<ul class="menu-function clearfix">
<li><a href="" title="">Home</a></li>
<li>
<a href="javascript:;" title="">Search
<div class="drop-down">
<input type="text" name="" id="" placeholder="best psd freebies">
<button type="button"></button>
</div>
</a>
</li>
<li><a href="" title="">Inbox <span>2</span></a></li>
<li><a href="" title="">Add New</a></li>
<li><a href="" title="">Updates <span>8</span> </a></li>
<li><a href="" title="">Howdy <span>Eva.</span><img src="x.jpg" alt="Eva."></a></li>
</ul>
</div>
不同之处是，在搜索菜单项中，还有一个下拉结构
<li>
<a href="javascript:;" title="">Search
<div class="drop-down">
<input type="text" name="" id="" placeholder="best psd freebies">
<button type="button"></button>
</div>
</a>
</li>
和平时制作下拉菜单效果的结构略有不同，这个案例中，将整个搜索表单放在了链接<a>标签内。
整个案例的CSS代码并不复杂，只是CSS3的选择器使用的稍为多一些。我们一步一步来看：
body {
background-color: #d9d9d9;
}
a {
color: #fff;
}
a:hover {
color: #fff;
text-decoration: none;
}
.demo {
width: 960px;
margin: 40px auto 0;
}
.menu-function {
position: relative;
background-image: -*-linear-gradient(top,#3d3d3d 50%,#373737 51%);/*制作双色块背景图片*/
}
.menu-function li {
float: left;
height: 40px;
}
.menu-function li a {
position: relative;
display: block;
padding: 0 20px 0 40px;
line-height: 40px;
}
这部分代码是用来实现导航的初步布局效果，整个效果之中，使用了gradient渐变属性制作了一个双色块的背景图片：
background-image: -*-linear-gradient(top,#3d3d3d 50%,#373737 51%);
注意，这是从上到下的双色块，第一个色是多0到50%之间，第二个色块是51%到100%之间。
/*设置除最后一个列表项下的所有span元素的样式*/
.menu-function li:not(:last-child) span {
display: inline-block;
padding: 0 3px;
height: 14px;
line-height: 14px;
color: #fff;
border-radius: 2px;/*设置圆角*/
box-shadow: 0 -1px 0 #6cb6e9,0 1px 0 #24548e;/*设置阴影*/
background-image: -*-linear-gradient(top,#2b95e0,#2175d7);/*设置渐变背景*/
}
/*设置除最后一个列表项下的所有a元素样式*/
.menu-function li:not(:last-child) a {
line-height: 20px;
border-left: 1px solid #222a30;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
transition: all .3s ease-out;/*设置动画过渡效果*/
transform-style: preserve-3d;/*设置3D旋转遮照面*/
}
这里就有点意思了，意思之处是他的选择器”li:not(:last-child)“,他表示的意思是”选择除最后一个列表项的所有列表项“
/*最后一个列表向右浮动*/
.menu-function li:last-child {
float: right;
}
/*设置第一个列表项下a元素样式*/
.menu-function li:first-child a {
font-size: 0;
padding-left: 25px;
}
/*设置最后一个列表项下img元素样式*/
.menu-function li:last-child img {
width: 30px;
height: 30px;
margin-left: 2px;
vertical-align: middle;
box-shadow: 0 -1px 0 rgba(0,0,0,.2);/*设置阴影*/
border-radius: 2px;/*设置圆角*/
}
/*设置最后一个列表项下span元素样式*/
.menu-function li:last-child span {
color: #a3c8ea;
}
这几个选择器应该很容易理解，就是第一元素和最后一个元素的伪类选择器。
.menu-function li a:before,
.drop-down button[type="button"]:before {
position: absolute;
left: 15px;
font-family: 'icomoon';
font-style: normal;
speak: none;
font-weight: normal;
font-smoothing: antialiased;
font-size: 18px;
vertical-align: middle;
}
.menu-function li:nth-child(1) a:before {
content: "\21";/*代表首页的icon*/
}
.menu-function li:nth-child(2) a:before,
.drop-down button[type="button"]:before {
content: "\7d";/*代表搜索放大器的icon*/
}
.menu-function li:nth-child(3) a:before {
content: "\63";/*代表评论信息的icon*/
}
.menu-function li:nth-child(4) a:before {
content: "\e022";/*代表google plus的icon*/
}
.menu-function li:nth-child(5) a:before {
content: "\38";/*代表文件夹的icon*/
}
这里是通过伪类”:before“配合@font-face属性制作的字体icon。在这里我们使用了”icomoon“字体，至于这个字体哪来的，我们在前而有整理过，这里不在多说。可能大家会问，代表icon的编号是怎么来的，这个在字体库有一个对照表，可以查询出对应的icon编号，至于这样的编号是怎么来的，说实话我也不清楚，只有设计者知道。另外这里还使用了”nth-child“选择器，来选择不同的列表项下的a元素。当然，使用这个关键之处还有@font-face调用服务器上的字体库：
@font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot');
src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('fonts/icomoon.svg#icomoon') format('svg'),
url('fonts/icomoon.woff') format('woff'),
url('fonts/icomoon.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
这个很关键了。没有font-face是无法实现icon的效果。
.menu-function li:not(:last-child) a:hover {
color: #555;
border-left: 1px solid transparent;
background-color: #fff;
}
设置除最后一个列表项下所有a元素的样式，使用的选择器方法前面有介绍过。
/*设置搜索列表项悬浮时下拉搜索表单样式*/
.menu-function li a:hover .drop-down {
display: block;
transform: rotateX(0deg);/*X轴旋转odeg*/
}
/*设置下接搜索表单样式*/
.drop-down {
position: absolute;
top: 30px;
left: 0;
margin-left: -1px;
width: 300px;
padding: 20px;
background-color: #fff;
transition: all 0.3s ease-in;/*过渡动画效果*/
transform: rotateX(-90deg);/*X轴旋转-90deg*/
backface-visibility: hidden;
}
/*设置文本框样式*/
.drop-down input[type="text"] {
width: 100%;
height: 30px;
padding-left: 5px;
border: 1px solid #ddd;
border-radius: 2px;
box-shadow: 0 1px 2px rgba(0,0,0,0.2) inset;/*设置阴影*/
background-color: none;
box-sizing: border-box;/*改变盒模型*/
transition: all 0.3s ease-in;/*过渡动画效果*/
}
/*设置搜索按钮样式*/
.drop-down button[type="button"] {
position: absolute;
top: 22px;
right: 22px;
width: 24px;
height: 26px;
border: none;
background-color: transparent;
}
.drop-down button[type="button"]:before {
font-size: 14px;
top: 6px;
left: 6px;
color: #747474;
}
input[type="text"]:focus{
outline: 0 none;
border-color: rgba(82, 168, 236, 0.8);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
}
整个搜索表单使用了transform、transition、box-shadow等属性制作，其中还使得了属性选择器来控制表单元素的样式。
整个案例的CSS代码：
body {
background-color: #d9d9d9;
}
a {
color: #fff;
}
a:hover {
color: #fff;
text-decoration: none;
}
.demo {
width: 960px;
margin: 40px auto 0;
}
.menu-function {
position: relative;
background-image: -*-linear-gradient(top,#3d3d3d 50%,#373737 51%);
}
.menu-function li {
float: left;
height: 40px;
}
.menu-function li a {
position: relative;
display: block;
padding: 0 20px 0 40px;
line-height: 40px;
}
.menu-function li:not(:last-child) span {
display: inline-block;
padding: 0 3px;
height: 14px;
line-height: 14px;
color: #fff;
border-radius: 2px;
box-shadow: 0 -1px 0 #6cb6e9,0 1px 0 #24548e;
background-image: -*-linear-gradient(top,#2b95e0,#2175d7);
}
.menu-function li:not(:last-child) a {
line-height: 20px;
border-left: 1px solid #222a30;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
transition: all .3s ease-out;
transform-style: preserve-3d;
}
.menu-function li:last-child {
float: right;
}
.menu-function li:first-child a {
font-size: 0;
padding-left: 25px;
}
.menu-function li:last-child img {
width: 30px;
height: 30px;
margin-left: 2px;
vertical-align: middle;
box-shadow: 0 -1px 0 rgba(0,0,0,.2);
border-radius: 2px;
}
.menu-function li:last-child span {
color: #a3c8ea;
}
.menu-function li a:before,.drop-down button[type="button"]:before {
position: absolute;
left: 15px;
font-family: 'icomoon';
font-style: normal;
speak: none;
font-weight: normal;
font-smoothing: antialiased;
font-size: 18px;
vertical-align: middle;
}
.menu-function li:nth-child(1) a:before {
content: "\21";
}
.menu-function li:nth-child(2) a:before,.drop-down button[type="button"]:before {
content: "\7d";
}
.menu-function li:nth-child(3) a:before {
content: "\63";
}
.menu-function li:nth-child(4) a:before {
content: "\e022";
}
.menu-function li:nth-child(5) a:before {
content: "\38";
}
.menu-function li:not(:last-child) a:hover {
color: #555;
border-left: 1px solid transparent;
background-color: #fff;
}
.menu-function li a:hover .drop-down {
display: block;
transform: rotateX(0deg);
}
.drop-down {
position: absolute;
top: 30px;
left: 0;
margin-left: -1px;
width: 300px;
padding: 20px;
background-color: #fff;
transition: all 0.3s ease-in;
transform: rotateX(-90deg);
backface-visibility: hidden;
}
.drop-down input[type="text"] {
width: 100%;
height: 30px;
padding-left: 5px;
border: 1px solid #ddd;
border-radius: 2px;
box-shadow: 0 1px 2px rgba(0,0,0,0.2) inset;
background-color: none;
box-sizing: border-box;
transition: all 0.3s ease-in;
}
.drop-down button[type="button"] {
position: absolute;
top: 22px;
right: 22px;
width: 24px;
height: 26px;
border: none;
background-color: transparent;
}
.drop-down button[type="button"]:before {
font-size: 14px;
top: 6px;
left: 6px;
color: #747474;
}
input[type="text"]:focus{
outline: 0 none;
border-color: rgba(82, 168, 236, 0.8);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
}
@font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot');
src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('fonts/icomoon.svg#icomoon') format('svg'),
url('fonts/icomoon.woff') format('woff'),
url('fonts/icomoon.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
如需转载，烦请注明出处：http://www.w3cplus.com/demo/css3-admin-menu.html
本文由99根据Patrick H. Lauke的《A pixel is not a pixel is not a pixel》所译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html，以及作者相关信息
译者：99
本篇文章主要解释了CSS像素跟设备像互的区别，媒体查询跟Viewport在识别设备像素上的应用，以及iPhone的分辨率增加后对我们Web前端的影响。
在译这篇文章时,文章很多知识引用了神飞的《移动端webapp开发必备知识》和www.MyException.Cn的《什么是viewport，为啥需要viewport》。在此特向作者表示衷心的感谢。
译者：——99
昨天，来自John Gruber的文章中谈到最新的苹果手机提升了像素密度(960X640替代了480X320)，并分析了苹果这么做的原因，他同时提出了一个问题，这对Web开发者会有什么影响呢?
我最近在深入研究移动端跨浏览器的宽高表现，可以这么说，在99%的情况下，苹果此举不会对web开发者有任何影响。
但剩下的1%就比较蛋疼了，不过我期待苹果可以像android一样采用一个中间过渡像素层来解决此问题。(John指出)在Android中存在这样的一个层。
首先我要申明一点，对于web开发者来说“标准尺寸”是没啥用处的，所以我忽略了这个，而且我也不会讨论显示的细节以及其他一些复杂问题，因此我对其中的一些概念描述的可能不是很专业，在此表示抱歉。
在开始下面的内容之前，大家先了解一下CSS Pixels与Device Pixels之间的区别：
- CSS pixels： 浏览器使用的抽象单位， 主要用来在网页上绘制内容。
- device pixels： 显示屏幕的的最小物理单位，每个dp包含自己的颜色、亮度。
——99
我确信对于web开发者来说，他们需要的是“css像素”，即类似width:300px跟font-size:14px 这类css语句中的px.
Css中的px跟设备自身的px是没什么关系的，即使将来出现了所谓“中间过渡层”，结果也是一样的。这是专门为web开发者提出的一个抽象概念。
通过页面缩放这个过程，我们可以很清楚的明白这个道理。如果我们放大页面，一个给了width:300px的元素会占据屏幕更大的空间，当然测量时会占据更多的设备(物理)像素。而css中的像素始终是300px。放大效果即是尽可能的扩展每一个css像素，使其占据更多的屏幕空间。
当缩放比率为100%时，一个css像素与一个设备像素是相同的（未来提供的中间过渡层，会代替“设备像素”）。下面图片表示当前状态时css像素与设备像素是重叠的。
(要提醒大家的是，缩放比例100% 在web开发中是没啥意义的，缩放级别对我们也没啥意义。我们需要知道的是当前有多少像素在适配屏幕！)
下面两张图诠释了当我们缩放页面时发生了啥。第一张图，用户缩小页面，注意观察浅色像素块（css像素）跟深色像素块（设备像素）。此时css像素变小，一个设备像素可能覆盖了多个css像素。
第二张图片跟上面正好相反，用户放大页面，此时css像素变大，因此一个css像素覆盖了多个设备像素
因此，元素仍然是300px(css像素) 而此时元素覆盖了多少的设备像素，是由当前的缩放比例决定的。
你可以通过在iphone上计算screen.width跟window.innerWidth的比来得到这个比例。这里会出现很多恼人的兼容性问题。除此之外 web开发者不需要对这个比例下太多心思，还是要注意像素是怎么适配屏幕的。
Window.innerWidth这里代表的视窗宽度，Screen.width 代表的屏幕分辨率。
这里大家可以做个实验就明白了，大家可以在网页100%的时候打印下screen.width跟window.innerWidth会发现是1:1。而我们利用浏览器的缩放功能，缩小网页时，发现screen.width不变，window.innerwidth变大，意思是同样的屏幕可以容纳的css像素更多了，放大网页正好相反！
——99
以上原理是不会改变的。因此以前在iphone上显示完美的网页，到了高设备像素的iphone上可能就会变得面目全非，这也是苹果极力想要避免的。
因此网页仍然会按照980px来渲染，但是占了多少个设备像素。。天知道。。
有两个比较麻烦的东西：媒体查询的"device-width"和html标签中的"<meta name="viewport" width="device-width" / >"。这两个都与设备像素有关系的，但与css像素没关系，因为他们都是根据页面展现出的内容来定义的，而不是内部是什么css决定的。
device-width 这个媒体查询可以测量设备像素。Width这个媒体查询可以测量页面的总宽度，但这个是css像素。这个数在iphone上一般是980以上，原因我会在后面解释。
Device-width这个媒体查询以下面方式来定义
div.sidebar {
width: 300px;
}
@media all and (max-device-width: 320px) {
// styles assigned when device width is smaller than 320px;
div.sidebar {
width: 100px;
}
}
通过css定义宽度，sidebar现在的宽度是300px（css像素），但经过媒体查询，当设备宽度小于320像素时（设备像素），触发条件，sidebar的宽度变为100px（css像素）（还跟得上不，确实比较绕）。
CSS3中的Media Queries增加了更多的媒体查询，同时你可以添加不同的媒体类型的表达式用来检查媒体是否符合某些条件，如果媒体符合相应的条件，那么就会调用对应的样式表。换句简单的说，“在CSS3中我们可以设置不同类型的媒体条件，并根据对应的条件，给相应符合条件的媒体调用相对应的样式表”。
有关于Media Queries介绍和使用可以参考下面：
- CSS3 Media Queries
- iPads和iPones的Media Queries
- CSS3 Media Queries模板
- 使用em单位创建CSS3的Media Queries
- Responsive设计和CSS3 Media Queries的结合
——大漠
同时理论上你可以利用媒体查询来根据厘米与英寸识别屏幕。(@media all and (max-device-width: 9cm))。但很不幸绝大多数情况下都不支持，包括iphone。这是因为很多情况下，物理尺寸（比如英寸）会被系统“翻译”为css尺寸。我测试过 大部分浏览器一英寸会被认为是96px（css像素）。因此上述根据物理尺寸进行的媒体查询，结果是没有什么参考价值的。
这里的物理尺寸跟设备像素比有专门的术语叫做dpi。
PPI，有时也叫DPI，所表示的是每英寸所拥有的像素（pixel）数目，数值越高，即代表显示屏能够以越高的密度显示图像。（注：这里的像素，指的是device pixels。）
注意，这里仍然是设备里的参数，与css像素是没有任何关系的！但是mediaquery却认成了css像素！
——99
关于meta标签的介绍可以参考《<meta>》一文，但我们主要应用的是viewport标签，可以参考《Using the viewport meta tag to control layout on mobile browsers》一文。
——99
大多数情况下 <meta name="viewport" width="device-width"> 这个标签比上面要给力的多。viewport起源于apple，但现在被绝大多数移动浏览器所支持。这个标签的写法可以让你的layout viewport完全适配设备宽度
layout Viewport到底是啥呢？
这里文章写的比较简单，但是不好翻译。我大概给大家讲讲viewport。
两个概念,visual viewport跟layout viewport.
这里visualviewport可以认为是设备自己的宽度，那么注意，当你打开一个960px设计的网页时，手机会根据css中的百分比进行缩放。比如总长960的页面，导航条是20%。（实际解析出来就是192px）但是你不可能每个属性都是百分比吧，比如文字大小。
那么我用320px屏幕打开，导航条就成了64px了，但是我的字体大小是12px啊，完了，本来能显示很多汉字的（192/12）现在只能显示64/12个汉字了。
Apple找到了一个办法：在移动版(iOS)的Safari中定义了viewport meta标签①，它的作用就是创建一个虚拟的窗口(viewport)，而且这个虚拟窗口的分辨率接近于桌面显示器，Apple将其定位为980px②。
①除此之外不同移动浏览器厂商也有不同的解决方案，例如UCweb就是使用中间件技术。
②不同的浏览器厂商对于layout viewport的大小定义不同
- Safari iPhone: 980px
- Opera: 850px
- Android WebKit: 800px
- IE: 974px
以一代iphone下的Safari来说就是：
在iphone的320px物理屏幕上——视觉窗口(visual viewport)，创建出了一个980px的虚拟窗口——布局窗口(layout viewport)，在视觉窗口(visual viewport)中我们可以拖动横向竖向滑动条或者放大缩小网页，来达到最佳的浏览效果(类似桌面浏览器)；而布局窗口(layout viewport)用来配合CSS渲染布局，例如当我们设置一个容器的宽度为100%时，这个容器的实际值为980px而不是320px。如此一来大部分 网页就能以缩放的形式正常的显示在手机屏幕上了。
但是。。。。。。。。。。。。道高一尺魔高一丈，当我们“为了”解决手机端的问题，而特意制作了320px的页面时，悲剧发生了。。
因为iphone的layout viewport默认为980px，导致专为其优化的320px宽的页面只能以缩放的方式显示，（可以想象在你的浏览器里打开一个320px的页面的情景。。。）这时就需要对viewport进行设置
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=no”/>将viewport定义为：宽度为设备宽度，初始缩放比例为1倍，禁止用户缩放。
这其实是故意舍弃了viewport的做法，大家一定要明白这个道理。给大家理一下：
普通的页面(960,980)显示很差？ Apple去开发viewport,我们要求设计师设计320px的网页
好了，apple开发完viewport了，以前的烂网页能看了，这时候，我们换上320px的网页，我擦，怎么变的这么小了！
变回来！content=”width=device-width 就是这个过程。。。
更多viewport的知识，可以参考《Using the Viewport》和《响应式新首页设备适配（Device Adaptation）小结》
——99
一般来说layout Viewport要比设备屏幕大。 下面那张图让网页直接覆盖在屏幕上，大家可以看看视窗有多大。
当我们使用<meta name="viewport" width="device-width">后，页面视口被强制伸缩为屏幕宽度，比如320(iphone)。
这决定了你的网页视口会以怎样的宽度适配屏幕。当你的网页跟下图一样，设计成320px的宽度时，你又不使用width跟meta标签，页面就会被缩放了。如下图：
这种屏幕当然没法阅读了。如果你想让字体大小适配屏幕， meta标签就要出场了。当你增加这个标签后，视口会自动调整到屏幕大小（比如iphone会变成320px）
我们回到开头的问题，当apple的屏幕像素增大后，会对我们上文提到的媒体查询跟meta标签造成什么影响。我当然不确定，但我希望不会对web开发造成影响。
<meta>标签
Meta标签很好说，这本来就是苹果发明的标签，为了让原始网页适配苹果的屏幕，而且已经推进给web开发者了。这意味着苹果不会改变meta标签识别出来的设备像素值了。
事实上，nexus one 另辟蹊径。在竖屏时屏幕宽度为480px，而应用meta标签识别出的屏幕宽度却是320px，是实际屏幕宽度的2/3
为什么会出现nexus的问题呢？
width=device-width
其实这个属性&值很有意思，字面意应该是viewport宽度等于设备宽度，但在实际中不同的浏览器都给出了个定值：320px；这个值还是源于 Apple，因为早期iphone的分辨率为320px × 480px，大量为iphone量身定制的网站都设置了viewport:width=device-width，并且按照宽度320px来设计制作，所 以其他浏览器加入viewport支持时为了兼容性也将device-width定义为了320px。
——99
如果我理解正确的话，这就是为什么nexus显示网页的时候缺失了1/3像素的原因。这与nexus对meta标签的解释是一致的。（因为认成320了。。）
因此谷歌为了解决这个问题，插入了一个中间层。这个层“层如其名”： “与设备无关的层”。这个层在实际屏幕与我们开发的css网页之间。
我期望iphone也会采取nexus的方案，建立中间层，保持meta标签识别出来仍然是320px（实际像素的一半）（作者的意思这样我们就不用改网页了）
媒体查询
Device-width仍然是问题重灾区。尽管nexus识别出480px作为设备宽度，我仍然觉得320px会更适合。我们且看apple是怎么办的。
最根本的问题是 设备独立像素(dips)在媒体查询中的继续应用。我们当然期待这东西的应用了，因为设备尺寸我们并不关心，我们只是想了解我们从屏幕上呈现的东西，dips应该很适合这个。
为什么dips有这个作用呢？这里要引入一个概念。
window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。
公式表示就是：window.devicePixelRatio = 物理像素 / dips
详细的大家可以参考：《设备像素比devicePixelRatio简单介绍》一文。
——99
不幸的是nexus依然故我，media query查询出来的设备宽度仍然是480px而不是320px。但我觉得apple会为web开发者解决这个问题的。
因此结论很明显，meta的仍然故我，媒体查询的可就要掂量下了。
译者手语：整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！
如需转载烦请注明出处：
英文原文：http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
中文译文：http://www.w3cplus.com/css/A-pixel-is-not-a-pixel-is-not-a-pixel.html
Metro UI CSS的中文版本在W3cplus上发布，但官网上的对其介绍并不十分详细，如今借着学习Metro UI CSS的机会，我将自己的学习笔记整理了一些，希望这些教程对大家学习Metro UI CSS会有所帮助。
在学习Metro UI CSS之前，我们需要一些准备工作要做，这也是今天我要为大家介绍的——开始之旅。
在下载之前，你需要确认你至少有一个代码编辑器和具有“HTML”和“CSS”相关的知识或工作经验。接下来的这些天，我们主要是根据Metro UI CSS的源文件进行一些入门讲解。
下载Metro UI CSS
可以通过GitHub下载到Metro UI CSS,下载下来的Metro UI CSS包括了“CSS”、“Javascript”、“fonts”以及本地的一个文档说明，（跟官网的文档是一模一样的）。
在下载的压缩包中，你可以看到如下的文件结构和内容。所有文件都进行了分类存储，并且所有文件都未进行压缩。
将下载的文件解压缩之后就可以看到如下的文件结构：
Metro-UI-CSS/ ├──css/ │ ├──modern.css │ ├── modern-responsive.css │ ├── theme-dark.css ├──fonts/ │ ├── iconFont.eot │ ├── iconFont.svg │ ├── iconFont.ttf │ ├── iconFont.woff │ ├── license.txt ├──images/ │ ├── preloader-w8-cycle-black.gif │ ├── preloader-w8-cycle-white.gif │ ├── preloader-w8-line-black.gif │ ├── preloader-w8-line-white.gif ├──javascript/ │ ├── accordion.js │ ├── buttonset.js │ ├── carousel.js │ ├── dropdown.js │ ├── input-control.js │ ├── pagecontrol.js │ ├── rating.js │ ├── slider.js │ ├── tile-drag.js │ ├── tile-slider.js ├──less/ │ ├── .... ├──public/ │ ├── ....
上面就是下载下来的Metro UI CSS的文件结构。简单的介绍一下：
注：组件中所有的javascript插件都是依赖于jQuery库。
Metro UI CSS包含了实现Metro UI的“HTML”、“CSS”和“JS”，这些代码可以帮助你轻松的实现需要的一些UI效果，而且这些效果的简单使用都在Metro UI CSS 文档中有介绍。
文档的章节
1、框架
框架中包括了全局样式、布局与模板、网格系统和响应式设计四部分内容。
2、基本样式
基本样式中包括了Web设计中的“排版”、“表格”、“表单”、“按钮”、“图像”和“图标”六大部分，可以说涵盖了Web制作中常见的一些样式与结构。
3、组件
Metro UI CSS 也使用了一些javascript插件，可以实现一些交互功能，在这里主要包括：
在使用Metro UI CSS时，我们都采用一个简单的模版，而且这个模版运用在所有的Metro UI CSS页面中。先来看一个简单的HTML模版结构：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Metro UI CSS的HTML模版</title>
</head>
<body>
<h1>Hello, world!</h1>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</body>
</html>
让这个模板能使用Metro UI CSS,这时需要调用Metro UI CSS的css和js（如果有用到交互组件）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Metro UI CSS的HTML模版</title>
<!-- Metro UI CSS -->
<link href="css/modern.css" rel="stylesheet" media="screen">
</head>
<body>
<h1>Hello, world!</h1>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!-- drowndrop.js -->
<script src="javascript/dropdown.js"></script>
</body>
</html>
接下来你就可以使用Metro UI CSS开发任何Web网站或者Web应用。
下一步，我们会根据Metro UI CSS的文档进行深入的展开学习。
如需转载，烦请注明出处：http://www.w3cplus.com/css/metro-ui-css-start.html
Metro UI自己提供了一套font-face制作icon的字体库，而且这个字库可以制作三百多个icon，今天藤藤根据别的Metro UI设计图，制作了一个icon方面的案例，在这个案例中，使用到的知识很简单，主要是两个方面，第一是字体@font-face的属性使用，第二个就是属性选择器的灵活运用。而且这个案例中的icon我们是分两部分的，第一部分是纯CSS绘制的icon，第二部分是@font-face实现的icon。详细的请看案例代码。
使用@font-face制作icon的结构很简单，就是一个简单的标签，但其类名最好命名为“icon icon-*”或者“icon *-icon”，这样命名有利于CSS3的属性选择器取到对应的元素。
<i class="icon-checked"></i>
案例中将每个icon放在一个li列表项中，先来看看简单的布局样式：
body {
background-color: #dbdbdb;
-webkit-text-size-adjust:none;
}
.demo {
margin: 40px auto 0;
width: 360px;
color: #fff;
}
.icon-items-1 li {
float: left;
width: 37px;
height: 37px;
margin: 10px 10px 50px 0;
background-color: #00aec7;
animation: moveF_Right 500ms ease;/*调用动画moveF_Right*/
transition: all 200ms linear;/*让元素加无时具有一个过渡的动画效果*/
}
/*定义了一个从右向左移动的动画*/
@keyframes moveF_Right {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0%);
}
}
接下来是列表一的icon制作,不过注意了。第一部分这些icon都是CSS纯绘制的icon。无使用任何特殊字体。
/*使用属性选择器*/
.icon-items-1 i[class^="icon-"] {/*选择列表一中类名以'icon-'开头的所有i标签元素*/
position: relative;
top: 14px;
left: 19px;
display: inline-block;
width: 20px;
height: 20px;
}
/*CSS3的伪元素*/
.icon-items-1 i[class^="icon-"]:before,
.icon-items-1 i[class^="icon-"]:after {
position: absolute;
content: "";
width: 0;
height: 0;
}
/*制作V号icon*/
.icon-items-1 i.icon-checked:after {
top: 2px;
left: -5px;
width: 0;
height: 6px;
box-shadow: 0 0 0 2px #fff;
transform: rotate(-45deg);/**/
}
.icon-items-1 i.icon-checked:before {
top: -4px;
left: 3px;
width: 0;
height: 14px;
box-shadow: 0 0 0 2px #fff;
transform: rotate(45deg);
}
/*制作关闭icon*/
.icon-items-1 i.icon-close:before {
top: 4px;
left: -8px;
width: 14px;
box-shadow: 0 0 0 2px #fff;
transform: rotate(-45deg);
}
.icon-items-1 i.icon-close:after {
top: 4px;
left: -8px;
width: 14px;
box-shadow: 0 0 0 2px #fff;
transform: rotate(45deg);
}
/*制作复选框icon*/
.icon-items-1 i.icon-square:after {
top: 0;
left: -3px;
width: 5px;
height: 5px;
box-shadow: 0 0 0 3px #fff;
}
/*制作加减icon*/
.icon-items-1 i.icon-plus:before {
top: 4px;
left: -8px;
width: 14px;
box-shadow: 0 0 0 2px #fff;
transform: rotate(90deg);
}
.icon-items-1 i.icon-plus:after,
.icon-items-1 i.icon-minus:after {
top: 4px;
left: -8px;
width: 14px;
box-shadow: 0 0 0 2px #fff;
}
/*制作单选按钮icon*/
.icon-items-1 i.icon-round:after {
top: 4px;
left: 0;
box-shadow: 0 0 0 6px #000,0 0 0 8px #fff;
border-radius: 50%;
}
.icon-items-1 i.icon-disc:after {
top: 4px;
left: 0;
box-shadow: 0 0 0 3px #fff,0 0 0 6px #00aec7,0 0 0 8px #fff;
border-radius: 50%;
}
.icon-items-1 li:hover {
transform: scale(2,2);
background-color: #005d6a;
z-index: 5;
}
接下来是@font-face制作的icon
.icon-items-2 li {
position: relative;
float: left;
width: 100px;
height: 100px;
text-align: center;
margin: 10px 10px 0 0;
background-color: #00aec7;
animation: moveF_Right 500ms ease;
overflow: hidden;
}
.icon-items-2 li:before,
.icon-items-2 li:after {
position: absolute;
}
.icon-items-2 li:hover:before {
top: 0;
left: 0;
content: "";
width: 100%;
height: 100%;
background-color: rgba(255,255,255,.2);
z-index: 1;
}
.icon-items-2 li:hover:after {
top: 20px;
left: 0;
font-weight: bold;
content: attr(data);
width: 100%;
line-height: 30px;
z-index: 2;
background-color: #005d6a;
animation: moveF_Right 500ms ease;
}
.icon-items-2 i[class^="icon-"]:before {
font-family: 'icomoon';
speak: none;
font-weight: normal;
-webkit-font-smoothing: antialiased;
font-size: 36px;
line-height: 100px;
font-style: normal;
}
.icon-chrome:before {
content: "\e0c6";
}
.icon-firefox:before {
content: "\e0c9";
}
.icon-IE:before {
content: "\e0ca";
}
.icon-apple:before {
content: "\e0cc";
}
.icon-opera:before {
content: "\e0cf";
}
.icon-android:before {
content: "\e0d1";
}
.icon-twitter:before {
content: "\e0a2";
}
.icon-dribbble:before {
content: "\e03d";
}
.icon-facebook:before {
content: "\e049";
}
@font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot');
src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('fonts/icomoon.svg#icomoon') format('svg'),
url('fonts/icomoon.woff') format('woff'),
url('fonts/icomoon.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
注意一下，@font-face中的font文件调用路径需要正确，常常有同学搞错路径，另外文件编码需要是UTF8，不然你的icon不会正常显示。还有一点需要提醒大家，伪类上的transform和animation两属性在webkit下还不算完美，但在firefox得到友好支持。
如需转载，烦请注明出处：http://www.w3cplus.com/demo/metro-icon.html