用法很简单，点击属性值直接修改就可以及时预览。toggle rule on和toggle rule off按钮可以启用或禁用某个属性。

即刻体验：http://css3please.com/

事实上，现在支持这些CSS3属性的浏览器大都没有完全的支持W3C标准属性，而是采用自己的私有属性，这显然增加了开发的复杂度，也给将来的维护带来一些不确定性。不过貌似chrome dev版开始支持原生的border-radius了。

1. zen coding前些天升级到了0.6版本，新增了几项小功能，这里不再赘述，感兴趣的同学可以更新自己用的相应的插件；
2. zen coding官方有个速查手册(PDF)，很全面，严重推荐；
3. zen coding刚刚发布了 notepad++插件；
4. 这里有个非官方的VIM插件：http://github.com/mattn/zencoding-vim (多谢 @kejunz 的分享)
5. 使用UltraEdit的同学可以看一下 @ytzong写的《在UlrtraEdit中配置Zen Coding》教程；
6. 使用EditPlus的同学可以看一下这个《zencoding(HTML) for EditPlus v1.0》

如果你有了解更多关于zen coding的资源，欢迎与大家分享。

另外，由于春节放假以及最近比较忙，前端观察蛰伏了将近一个月的时间，本周起将恢复正常更新，多谢大家的关心和关注。

正如我们在《Opera 新版本预览》中说的一样，Opera这次版本更新不仅仅在界面和用户体验上有很大的提升，整体性能可以说是一个很大的飞跃，在对WEB标准的支持和浏览器性能方便都有很大进步，在很多方面已经超越Chrome 最新版本(5.0 dev)了。

立刻体验：国际版 英文版

我最近注意到的一个非常有趣的趋势是在幻灯演示中展现关键信息。现代设计师喜欢尝试并观察用户如何与作品进行交互。尽管幻灯并不是一个普遍的趋势但是依然作为新的设计风格而不断涌现，而且越来越多的设计师注意到它并在他们的作品中使用，这种新的趋势开始崭露头角。

在本文中，你将发现各种高度创意的、漂亮的、独特的、以及最有灵感的幻灯效果设计。当然我们这里并不是要你跟随某种趋势，而是希望能够激发你的创意并启发你的想象力以创建你自己的独特的设计，因为你的网站(作品)代表你自己和你的品牌。

网页设计中的幻灯展示

事实上有很多在网站中使用幻灯和图片切换的理由，网站成功的关键因素之一是找到一种最聪明和有效的展示你的信息给用户的方法。之前，幻灯在企业网站的首页非常流行，因为它对于展示企业的信息和服务非常有用，但是现在它已经广泛的用于所有类型的网站了。鉴于它们对于网站的价值，幻灯通常被放在页面中最醒目的位置，这样可以给访问者的非常有冲击力的第一印象。

你或许也注意到，幻灯对于作品集网站也非常流行，因为用幻灯的方式展示你的作品显得非常有意义和有吸引力。

01. Kontoblick

02. Slidedeck

03. Mint

04. Apple

05. Boulevard

06. Delicious

07. Woothemes

08. Osdnetwork

09. Launchmind

10. Areyoufrank

11. Utah-maps

12. Nealite

13. Delugestudios

14. Sketchen

15. Sprinklepenny

16. Hellothemes

17. Hootsuite

18. Designsensory

19. Sling

20. Nclud

21. Icebrrg

22. Edit-studios

23. Ricoverdeo

24. Robalan

25. Xero

26. Pixelnovel

27. Violet

28. Notepod

29. Wufoo

30. Cakephp

31. Gapmedics

32. Tearoundapp

33. Bensky

34. Directdesign

35. Thrudigital

36. Threadless

37. Nosotroshq

38. Epicurious

39. Dailymile

40. Copimaj

41. Hyperxlocal

42. Behance

43. Getmiro

44. Glue.be

45. Valendesigns

46. Foodtease

47. Ncover

48. Tracermedia

49. Viget

50. Barackobama

51. Getzcope

52. Brooklynfare

53. Rapidxhtml

54. Saintjohnsbible

55. Foodnetwork

56. Expressionengine

57. Paramoreredd

58. Radiumlabs

59. Zunostudios

60. Creamscoop

61. Jameslaicreative

62. Vyniknite

63. Freeagentcentral

64. Fastcompany

65. Osmondinteractive

66. Nameourbaby

电子商务网站常常被认为很枯燥的和毫无吸引力的，然而并不都是这样。本文展示25个在设计中彰显创意的电子商务网站。或许是布局、图形、设计风格或者网站结构，但是它们都打破了传统的电子商务网站的模式。这些网站或许能为你的设计带来某些参考。

Ride Four Ever

Mom & Popcorn

The Affair

Hipstery

Benestar

Green Label Organics

RedVelvetArt

CellarThief

Shirt Fight

K2 Snowboarding

Storenvy

Edge of Urge

‘47

Levi’s

McMenamins

Giraffe

Saddleback Leather Company

Kate Spade

Yellow Bird Project

Clever Craft

Free People

Pally Giraffe

Mouse to Minx

Cinnia Edua

Duchy of Cornwall Nursery

或许你已经看过很多关于CSS3动画的技术，包括前端观察之前发表的一些，那么现在就情看一看CSS3动画的魅力吧。这里是一辑47个令人瞠目结舌的CSS3动画演示。他们演示了CSS3能给我们带来的巨大的可能性。

1.使用jQuery的CSS3时钟

2.模拟时钟

3.使用方向键旋转的3D盒子

4.多个3D盒子(滑入/滑出)

5. CSS3折叠

6. 自动滚动的视差

7. Isocube

8. 图片画廊

9. 矩阵

10. 7个使用CSS3的Javascript效果替代

11. 图片滑过效果

12. 转动的可乐罐 (通过滚动条控制)

PS:这个例子和下面这个严格来说都不是用的CSS3技术，而是复杂的图片和css的background-position属性的应用。

13. 3D 房间

14. 宝利来画廊

15. 太空

注意: 这个演示依赖图形，需要一些时间来加载，但是结果非常疯狂!

16. Mac Dock

17. 滑入的模态窗口

18. 滑动的唱片

19. 放大的宝利来画廊

20. 动画的火箭

21. Poster Circle

这个需要支持3D动画的浏览器才能看到全部效果，比如Mac版Safari4浏览器

22. 变形的盒子

23. 落叶

24. 动画效果宝利来画廊

25. 聚光灯投影

26. 彩色时钟

27. Lightbox 画廊(可拖拽)

28. 弹性所略图菜单

29. Coverflow

30. 雪花

31. jQuery DJ Hero

32. 动态的堆叠卡

33. 另一个图片画廊

34. 雪栈 (用方向键控制)

35. 动画的定价分组

36. 光滑的jQuery菜单

37. CSS3

38. 不用Javascript的CSS Tabs

39. 无JavaScript的Tab菜单

40. SVG Fisheye菜单

41. 无Flash的动态演示

42. 旋转的画廊

43. 下拉菜单

44. 另一个Fisheye效果

45. 逐帧动画(鼠标经过时演示)

46. 另一个CSS3折叠

47. AT-AT Walker (没有用Flash或JavaScript)

其实我们天天在想到底哪一天IE6才会真正死去，但是从2001年发布以来，IE6一直统治着国内的浏览器市场，直到现在还占据着国内50%以上的浏览器市场份额。

但是我想，无论你是普通用户还是网站开发人员或者是国内的浏览器开发者，我们都应该采取一些措施，共同促进IE6的灭亡。

如果你是IE6的忠实用户，请尽快升级你的IE6

给你一个升级IE6的理由？好吧：

1. 你和你的公司正在受到安全威胁。这个没有更好的理由来反驳了吧？就连国际知名的大公司如Google、yahoo等都因为使用IE6而受到严重攻击，还有哪家公司的IE6不会受到攻击呢？
2. 世界上各国政府都在建议大家升级浏览器。在IE6的0day漏洞被曝光之后，德国、法国和澳大利亚等国政府纷纷号召国民放弃使用IE6；
3. 就连微软自己都建议你放弃IE6。微软安全研究与预防博客发文称，IE6受0day漏洞影响最为严重，IE8基本不受该漏洞影响。事实上，微软也不止一次号召用户升级浏览器。
4. 这不是IE6的最后一个严重安全漏洞。IE6从发布到现在不知道出现过多少严重的安全漏洞，而这次远不是终结，它还有至少144个漏洞！
5. 微软在2014年之后将不再对IE6提供支持。2014年很久远吗？或者你相信2012年就是世界末日？
6. IE6对web标准的支持缺乏。IE6的技术还是10年前的，互联网技术经过10年的发展已经能够发生了巨大的改变，网站前端技术在不断进步，更先进的CSS、HTML和Javascript等技术已经能给用户带来更好的体验——而IE6用户将无法体验这些先进的内容。比如，前端观察用到的一些CSS3特性将无法在IE6甚至是IE8中体验到。
7. 国内的一部分企业开始要求员工升级浏览器。比如腾讯公司，已经要求所有员工将IE6升级到IE7。
8. IE6太过时了，国外网友大部分都不再使用IE6了。统计显示，目前国外用户已经逐渐淘汰IE6了。IE8和Firefox是主流(via 人民网)。
9. 国外各大网站开始明确表示将不再支持IE6。比如 Google 将停止支持IE 6 用户必须至少升至IE 7。

(部分参考自：http://mashable.com/2010/01/18/5-more-reasons-why-ie6-must-die/)

如果这几个理由都不够，那么请看国外统计的坚持使用IE6的原因，当然这里有些调侃的意味，如果你正好是其中一种情况，请不要生气 :) ：

via

当然在国内，坚持使用IE6的用户可能还是因为另外两个原因：

1. 习惯了IE6的操作方式，不喜欢IE7和其它浏览器的tab式浏览。当然一个人的习惯是最重要的。tab的浏览器方式是谁发明的已经不可考了，不过Opera和Firefox纷纷使用，后来国内的maxthon浏览器也采用了那种方式，然后到06年IE7的时候，也采用了tab的方式。这说明tab是一种很好的浏览方式，高效、方便，不然广大网民早就开始反对这种方式了，而各大浏览器也不会坚持下去了。所以建议你尝试一下新技术，从你的习惯中走出来。
2. IE6比较快，IE7和IE8太慢了。IE7和IE8的确太慢了，不过新版的Firefox 3.6和Chrome一直是很快的哦。

前端开发人员可以争取放弃兼容IE6

如果你是一名光荣的前端开发人员，希望你能尽可能的做更多的事情来让IE6更快的死去：

1. 以身作则，自己放弃IE6。从前端观察和其它技术网站的访问统计上看，IE6的用户比例竟然还有30%以上，这让我很震惊。作为一名前端开发者，用IE6做自己的主浏览器，那么你做的网站应该也不会在IE7/8以及其它更先进的浏览器中做测试的吧？
2. 说服你的BOSS或客户，放弃兼容IE6。有必要为了让网站在IE6中和其它浏览器中表现一直而花掉2倍甚至是3倍的时间和精力吗？我认为对不同的浏览器，可以采取适当的区分——让网站在现代浏览器如Firefox 3.5+、Chrome/Safari和Opera中实现最佳的表现，而在IE中实现相对比较差的界面——当然在不影响布局和功能的情况下。
3. 号召你的朋友弃用IE6。号召你身边的朋友使用IE7/8或者Firefox、Chrome等浏览器。另外，很多人都有个人博客，可以在自己的博客上号召IE6用户升级他们的浏览器。你也可以参与到众多的促进IE6升级的在线项目中来，比如 webrebuild.org的IE６升级活动以及效果很不错的IE6 Update中。

浏览器厂商应该负更多的责任

想起的一句话：此地钱多人傻，速来！这当然只是笑话。

不过据说现在中国网民数量已经高达3.6亿！而且这个数字还在不断增长。这显然是一个巨大的市场。

所以最近各大公司纷纷涉足浏览器市场，各自都推出自有品牌的浏览器，在Maxthon、世界之窗、腾讯TT、绿色浏览器等混战多年的情况下又出现搜狐浏览器、新浪浏览器和360浏览器。但是它们无一不是以IE为内核的(maxthon和搜狐浏览器有IE和webkit双内核的版本)，没有自己的内核。所以各位网民，不要以为你用了所谓“安全”浏览器你的电脑就安全了，它的内核IE本身都是不安全的，这些外壳浏览器谈何安全——不过有些浏览器会添加一些可以避免你误操作的功能。

对国内的浏览器市场来说，我认为这种“战国纷争”的局面是很不错的，至少能够普及一点儿“浏览器”知识，提高网民对互联网和互联网安全的认识。

但是我认为国内的浏览器厂商应该负起更多的责任。

你们的浏览器产品确实有很多特色，也有很多很有用或者很酷的功能，比较重视中国人的使用习惯。但是当用户因为IE的漏洞而被攻击的时候，你们会承担责任吗？还是将责任推到微软那里？这似乎有些不公平哦～～

对IE来说，最安全的、功能最强、稳定性最好的应该就是IE8了，如果你们能够推动用户去升级他们的内核到最新版，肯定能降低你们要为安全承担的风险。另外，减少一个内核支持也会减少你们的开发和维护支出吧。

总结

让IE6退出历史舞台，不是一朝一夕的事情，用户的惰性让他不愿意主动去升级，微软的浏览器升级模式又那么古老（而Firefox的提示升级和Chrome的后台自动升级模式倒省去了不少麻烦）。所以我们只有靠自己的力量来推动IE6的灭亡了。

一个非常好的消息是，现在Chrome 最新的4.0版本已经支持GreaseMonkey脚本了，当然 chrome 5.0 dev版本也支持它，如果你在使用这两个版本的Chrome（包括PC和Mac版），可以立刻访问http://userscripts.org 获取超过40000个脚本了。

如果你还不太了解GreaseMonkey，可以查看wiki百科的介绍，或者查看可能吧的《8个优秀的Grease Monkey脚本推荐》和Crazy Software的 十大油猴脚本推荐，当然，优秀的GreaseMonkey脚本有很多，如果你遇到比较好用的脚本，一定要与我们分享哦～～

另外，GreaseMonkey的管理和普通的Chrome扩展一样方便，都可以在Chrome的扩展面板( chrome://extensions/ )禁用和卸载。

根据mozhacks以及其它一些国外twitter网友提供的信息，基本可以确定这是因为YSlow插件的问题。我自己在将YSlow卸载或退回到2.0.4版本之后，就没有再遇到崩溃的问题了。

所以遇到Firefox 3.6崩溃的问题的同学可以暂时卸载它或者退回到较早的版本。

UPDATE：貌似最新的YSlow 2.0.6版本已经修正了这个问题。

如果还有问题，欢迎反馈。

尽管人们期望在屏幕上有些改变，但是CSS和HTML对页面中的交互能做的实在太少了，而那些还需要用代码来实现。

比如一个链接要么是这个颜色，要么是那个颜色；一个文本区域要么这么大，要么那么大；一张图片要么是透明的要么是不透明的；它们是从一个状态直接变到另一个状态——中间并没有过渡。

这导致大部分网页有些生硬，因为元素只会很死板的切换或改变。

是的，你可以使用DHTML、jQuery或者自己编写JS来实现过度，但是这需要更多的代码来实现本应该非常简单的功能。

我们需要的是快速而简单的方法来给页面添加简单的变换(transition)效果。在本文中，你会发现很有用的关于CSS变换(transition)以及如何使用它们的信息。

几个月之前，我就建议设计师应该开始使用新的CSS 3 技术来实现一些它们渴求已久的基本的功能了——唯一的问题就是，这些技术没有一个能在IE中可用，包括IE8。

一些读者认为的那些技术将会有75%的用户看不到的观点是不靠谱的。

对那些读者我想说，“坐稳了”，因为我将要向你介绍另一个新的CSS属性，它允许你通过简单的几行代码来为任意元素添加很酷的变换效果。

CSS 变换刚刚在CSS 3中被引入，但是已经被添加为webkit的扩展了。也就是说，现在它们只能用于基于webkit内核的浏览器，包括Apple Safari和Google Chrome。不过从Opera 10.5 pre-Alpha版本来看，Opera将在下一个10.5中支持CSS 3变换。所以要看到本文中提到的实际效果，强烈建议你使用Chrome或者Safari 4来查看本文。

CSS变换从哪里来？

变换曾经只是Webkit的一部分，而且是Safari UI能做而其它浏览器不能实现的一些很酷的东东的基础。

但是W3C CSS工作组曾经拒绝将变换添加到它的官方特性里面，一些成员坚持认为变换并非CSS属性而通过脚本来处理会更好。(内牛满面啊，我前一段也有类似的观点，也和高温讨论过，我认为CSS动画超出了表现的范围，交互的东西应该有脚本来实现，不过后来在鬼哥的点拨下，才开始有了新的认识——神飞)

但是很多设计师和开发人员，包括我自己，坚持认为这确实是样式——只是动态样式，而不是我们日常使用的传统的静态样式。

幸运的是，关于动态样式的争论已经成为过去。去年三月份，来自Apple和Mozilla的代表们开始将CSS变换模块添加到CSS 3特性里面，非常接近Apple已经添加到webkit中的表现。

关于设计增强的一个简要介绍

在我们继续之前，让我强调一点：永远不要让网站的功能依赖样式，如果该样式不是浏览器通用的话(也就是说，所有的常用浏览器都支持)。

对错过的同学再一次强调：永远不要让网站的功能依赖样式，如果该样式不是浏览器通用的话。

这也就是说，你可以使用样式，比如变换，作为设计增强以提高用户体验——在不牺牲看不到它们的用户的可用性的前提下。如果你不用CSS变换照样能用而且用户依然能够完成他们的任务，就没问题，你就可以使用CSS变换。

首先，一些变换的想法

CSS变换将不会替代所有的DHTML，不过它会提供一些支持过渡的方法来提高您在浏览器中的设计。

你需要到下载Apple Safari 3+ 或Google Chrome浏览器来查看这些变换效果。这两个浏览器都支持Mac和PC系统。

滚动效果

变换最常见的用法就是当用户的鼠标悬放到元素上的时候将元素高亮(无论是链接、表格、表单还是其它的什么元素)，变换是为页面添加平滑的界面的非常棒的方法。

例一

下拉菜单

纯CSS菜单比较容易实现，而变换还可以让你给菜单添加下拉和高亮效果。

例二

动画

你可以在页面上的两点之间移动一个对象，然后使用变换给它添加动画效果。

例三

点击一下，不要放开!

变换、状态与动作

但是请稍等一下。在深入了解变换之前，我们需要理解一个元素能变换的不同的状态。

状态定义当前页面中相应的元素如何与用户进行交互，它们在CSS中通过伪类来定义，比如当用户的鼠标经过一个元素的时候，那个元素就会被hover伪类控制。

变换通过改变不同元素状态之间的一个时间段内的样式来起作用。比如，一个元素的默认状态的颜色值将会在呈现hover状态的色彩值之前逐渐显示色盘中的中间颜色。

一个简单的变换

让我们假设一个简单的变换，在用户的鼠标经过一个链接的时候，将颜色从一个变换成另外一个。与其它CSS属性一样，变换也是直接添加到要使用它的选择器中。该属性可以采用下面的4个值。

CSS property

被变换的属性(比如, color)。看一下下面的表格了解所有可以被变换的CSS属性列表。

Duration

变换持续的时间，通常以秒来计算(比如, .25s).

Timing function

允许你控制持续的时间的计算方式。与其使用一个简单的线性计算，你可以使变换加速(渐入)或者减速(淡出)，或者甚至specify a beat or count (比如，linear). More on this later in the article.

Delay

在动作和变换开始之间等待多久，通常用秒来表示(比如, .1s)。如果你不想延迟，该值可省略。

因为变换属性始于Webkit扩展，我们不得不同时使用transition 和-webkit-transition 属性以向后兼容。

让我们首先提阿贾这这些属性到:hover 伪类中:

1
2
3
4
5

a:hover {
   color: red;
   -webkit-transition: color .25s linear;
   transition: color .25s linear;
}

那么现在，当鼠标经过一个链接，不会直接从蓝色跳转到红色，而是用四分之一秒的时间逐渐变换它们的中间颜色(过渡颜色)。

当然，我们也希望变换回到默认的链接颜色，那么我们可以添加一个变换到:link (以及:visited)伪类上，并在它褪去之前添加一个简单的延迟(十分之一秒) :

1
2
3
4
5

a:link, a:visited {
   color: blue;
   -webkit-transition: color .25s linear .1s;
   transition: color .25s linear .1s;
}

添加多重变换

因为一个变换就是一个CSS属性，如果你在同一个CSS规则中添加多个变换的实例，那么最后的那个将会覆盖前面的，而不是添加它们。所以在下面的规则中，唯一的变换将是背景色彩：

1
2
3
4
5
6
7
8

a:hover {
  color: red;
  background-color: rgb(235,235,185);
  -webkit-transition: color .25s linear;
  transition: color .25s linear;
  -webkit-transition: background-color .15s linear .1;
  transition: background-color .15s linear .1;
}

当然，这并不是说，不能添加多重变换——多重变换可以在同一个变换属性定义中用逗号隔开：

1
2
3
4
5
6

a:hover {
  color: red;
  background-color: rgb(235,235,185);
   -webkit-transition: color .25s linear, background-color .15s linear .1s;
  transition: color .25s linear, background-color .15s linear .1s;
 }

这条定义将产生色彩和背景色的双重变换。

什么可以被变换？

几乎所有的有色彩、大小或位置等组件的CSS属性，包括许多新添加的CSS 3属性， 都可以应用变换。一个值得注意的例外是box-shadow。

来自W3C的变换的说明，这里是一个可以赋予变换的CSS属性的列表，附带转变的对象，我也高亮了一些比较有用的属性。

变换计时与延迟

使用变换，你可以改变变换的速率，在开始的时候较慢然后在结束的时候加速，反之亦然，或者之间的任何事情。CSS变换有5个计时的关键词，同时也允许你自己定义你自己的计时曲线。

全部变换？

变换将很快成为所有网站的标准操作方式，从而增强用户界面的体验。

为了给你的整个网站添加一个普遍的变换，一个做法就是添加一个变换到全体选择器，类似CSS reset。下面的代码会给页面中的所有元素添加一个默认的变换，从而允许你保持一个统一的变换效果：

1
2
3
4
5
6
7
8
9
10

*:link, *:visited, *:hover, *:active, *:focus {
-webkit-transition:
	color .25s linear,
	background-color .25s linear,
	border-color .25s linear;
transition:
	color .25s linear,
	background-color .25s linear,
	border-color .25s linear;
}

一个反对全部变换，同时明确反对使用全体选择器作为CSS reset的争论是，将一个样式用到页面的所有元素会减缓页面的渲染。然而，我并没有发现任何有关与此的证据。有人知道吗？

OK，其实CSS 变换就这么简单，它并不难理解，而且你也不用些大量的JS脚本来实现它，这很方便实用，多做几次练习，你就可以熟练的使用它了。

译注：本文原文题目为 CSS transitions 101，101这个数字比较不好理解，其实美国大学第一门课程通常编号为101，所以101一般表示入门、初级的意思。另外关于 transition 这个词的翻译，我之前是翻译成“转换”，但是这个翻译很别扭，在twitter上和 @gaowhen、@ghostzhang、@ivane、@hiwanz、@cnjoel等人讨论后，觉得翻译成“变换”更合适一些，多谢各位。——神飞