Pictaculous 是一个在线生成调色板的服务。与其它服务不同，Pictaculous 不需要你指定几个颜色，也不只是那种将各式各样备选方案列出来。Picaculous 需要用户上传一张图片，然后经过程序分析产生一个基于所上传图片的调色板，这一点还是挺有特色的。

我尝试了一下这个服务，使用起来已经不能再简单了（真喜欢如今 Web 2.0 的操作方式），无需注册啥的，只需上传一张图片，然后它会通过 AJAX 的方式提交请求并返回结果。对于分析结果，还是比较准确的，基本图片中的基础色调都能被分析出来。Pictaculous 在结果中还提供 Photoshop 色板格式文件下载，对于做设计来说方便很多。此外，Pictaculous 还会返回一些来自 Adobe Kuler 和 ColorLovers 的结果，也是有一定参考价值的。

我个人觉得 Pictaculous 还是个不错的服务，值得丢进收藏夹随时备用。当然，Pictaculous 当前的功能还是太简单，我觉得应该根据图片分析结果，提供若干个备选色板（例如单色，两色，互补色等），这样应用场合就更多了。当然，提供 API 也是应该做的。

今天和大家分享的是一套名为 Pictodeck 的免费图标。不同于我们经常在网上下到的那些图标库，这套图标包含了 700 多个小图标，全部是这种我个人非常喜欢的黑白平面风格（事实上我发现在各种设计中这样的图标是最受用的）。在这里我们要感谢一下图标的作者 Aaron Richard，这年头这么慷慨的人实在是太少了。

这一套图标全部为矢量格式，默认大小是 32*32 但可以任意缩放而不影响质量。所有的图标，除非特别著名，都是基于创作公用协议的，因此我们个人使用的是不受任何限制的，非常的赞。下面提供全部图标预览，看一遍后估计你就没有不去下载的理由了。

第一张，第二张，第三张，第四张。

如果您喜欢这些图标，可以在这里下载。原作者提供的是 KeyNote ’09 格式，我转换了一个 Powerpoint 格式，但质量下降太多了，所以就又转了一个 PDF 格式的，但质量也大不如 KeyNote 原始格式的。但我也没有太好的办法，总不能一个个往外扣吧。我全提供了下载，PC 用户可以选后两种格式，只是放大可能会比较悬，呵呵。

btw: 最近实验室里展开了 Dropbox 空间大比拼，我也不幸被卷入这场无聊游戏。如果您还没有 Dropbox，可以考虑注册一下，也算帮我个忙 。Dropbox 是个免费的网络存储和同步服务，无论是同步存储、备份资料、多人协作和分享资料都非常的方便。Dropbox 默认提供 2G 的免费空间，您用这个链接注册 https://www.dropbox.com/referrals/NTg3MDczODk 可以得到 2.25G 免费空间，当然我也会从中收益赚到 250M 空间。早日拿到 5G 就可以跟实验室那帮家伙显摆啦。。。。（无语中）

如今这个时代，设计一个网站不用点 AJAX 的东西，那就绝对是落伍了。而用 AJAX 的话，要想得到良好的用户体验，必须要做到及时响应用户的请求。对于读取服务器数据这种比较慢的请求，进度条就是不可或缺的了。

作为整个网站设计元素的一部分，一个漂亮的进度条可以有效提高用户体验。Preloaders.net 就是这样一个 Web 2.0 服务，它可以交互式的，快速生成各种各样的动态进度条。而用户仅需要点点鼠标，设置一下样式、颜色、大小之类的参数就可以了，免去了我们用 Flash，Photoshop 之类画的麻烦。

事实上，类似 Preloaders.net 的这种服务有不少，之前我就曾经介绍过一个名为 Ajaxload 的站点。在免费的这类服务中，这两个我个人感觉用起来都是比较方便，而且样式也比较多。特别是今天介绍的这款 Preloaders.net，还提供了很多 3D 风格的动画样式，这些样式其中我很多都是第一次见，非常的别致，相信如果能够合理用到一个 Web 2.0 应用中，一定可以为它增色不少。

btw，Preloader.net 整个站点的设计也是超赞，我喜欢这种简约不简单的风格。

今天在一位德国朋友的博客上，看到了一个不错的通用解决方案。这里我简单介绍，或者说翻译一下作者的方法：

在 Firefox/Opera 等良好支持 W3C 标准的浏览器中，如果我们希望将某个元素固定在页面底部，我们可以给它指派这样的 CSS：

position: fixed;
bottom: 0;

对于 IE7 来说，它虽然可以正确的将这个元素 fix 在底部，但它却错误的处理了水平方向的位置。对于这个问题，我们可以利用一个原有的 hack 来解决：

left: 50%;
margin-left: -390px;

这里 margin-left 的值应该修改为您页面主要区域宽度的一半。这样 IE7 下基本也就完美了。剩下需要解决的就是 IE6, IE5.5 的问题了，他们不懂得 position: fixed 属性，所以我们需要单独解决一下：

首先我们为这些浏览器单独创建一个样式表，我们可以利用条件注释语句，让 IE<7 的浏览器单独载入这个“多于”的样式表：

<!–[if IE lt 7]>
<link rel=”stylesheet” href=”path/to/stylesheet/ie-stuff.css” type=”text/css” media=”screen” />
<![endif]–>

然后我们在这个 CSS 文件中，对这个需要固定在页面底部的元素添加 CSS 属性：

postion: absolute;
bottom: auto;
top: expression( eval(document.compatMode && document.compatMode==’CSS1Compat’) ? documentElement.scrollTop + (documentElement.clientHeight – this.clientHeight) – 1 : document.body.scrollTop + (document.body.clientHeight – this.clientHeight) – 1);

这里事实上就是利用了 IE 中特有的 CSS 运算符 expression。在 expression 中我们可以利用 Javascript 计算出需要的 top 值，这样就达到了与 position: fixed 同样的效果。

这种方法原理上来说和以前的 Javascript 方案是相同的，但这种方法显然通用性更好一点。当然，如果您不介意用 Javascript 的话，实现同样的效果会更直观更简单一点。

扯远了，回来说 IE8。由于微软的 IE 向来都是和系统紧密集成的，我自然不愿意让一个 Buggy 的 Beta 版软件毁了我的 Vista，于是下了个 XP 的版本装在了虚拟机上。IE8 的安装过程和 IE7 几乎一模一样，纵然你下了一个十好几兆的安装包，它还非得上网去 check updates，而且还倍儿慢，真是有点烦人。

不过 IE8 给我的第一印象还是不错的，虽然界面上看起来和 IE7 如出一辙，不过 IE8 多了许多精美的小图标，功能也强大了很多。相对于 IE7，IE8 最大的进步在于 Addons 的管理。在这方面，IE8 应该是借鉴了 Firefox 的插件管理方式，界面都有几分相似，对于习惯了“流行”的浏览器的用户来说，也算用着还习惯。只是 IE8 这个插件管理器多少有点换汤不换药的感觉，除了全新的 Activities 外，剩下的就是把定制搜索引擎和加载程序管理器合并到了一起。不过 Activity 还是有些创意，可以很方便的将浏览器和 Web 2.0 服务结合起来，给用户带来不少方便。

当然，对于我个人，更感兴趣的还是 IE8 对于标准支持的状况。之前我曾写文章说 IE8 会优先使用“标准”来渲染页面，这使得我对 IE8 的期待值异常的高。但结果呢？我只能用“非常失望”来形容。我一直认为实战是最好的检验标准，所以我也不想用什么 acid 去测试（因为这些很容易被专门优化）。我博客的新模板在不改动任何 HTML/CSS 的情况下，在 Firefox 2/3，Opera 9，Safari 2/3 这些遵循标准的浏览器上都可以非常正确的执行，但到了 IE8 上，效果可以用“惨不忍睹”来形容了。对于原先 filter 这个 IE 特有的 CSS 属性的错误处理可以理解为“对标准的遵守”（这导致很多 Javascript 函数库执行出问题），但对于一些 CSS 属性（如 overflow，clear）的奇怪解释方法则让我实在有些摸不着头脑。现在我开始有些担心这个“标准”的 IE8 了，因为它在按照它自己的标准尽可能标准的渲染网页。好在在 IE8 内部集成了完整的 IE7 渲染引擎，用户也可以简单的一键更换，否则，相信 IE8 肯定会成为历史上最不受欢迎的 IE 版本。

Internet Explore 小组称，IE8 Beta1 是一个面向 Developer 的版本。我个人认为，这个版本也只能给 Developer 来用，给他们充分的时间来适应 IE8，改进自己的网页。IE8 Beta 1 内部集成了很好用的 Internet Explore Dev Toolbar，我看到有的报道说这玩意是抄袭 Firebug，其实不是的。这个工具在 IE6 时代就有，在微软的主页上少说放了两年，而且有分别对应 IE6/IE7/IE8 的版本。对于开发者来说，有了这个东西，调试还是方便了不少。不过我个人感觉，现阶段的网站，如果希望兼容 IE8，还是很有必要专门给他发送个样式表。

总之，我个人对 IE8 还是有些失望的。我个人希望未来的 IE8 版本可以在标准兼容方面能做得更好，而不是在标准这个问题上玩文字游戏。W3C 标准和 IE6/7 的标准，在现实 Web 开发过程中，已经是每个 Developer 必须要考虑到的内容。我能够理解微软这个大公司，IE 这个拥有 70%+ 市场份额的浏览器不愿意向 W3C 标准就范，但我更不希望微软回应的方式是创造另一个新的标准。因为后者会给开发者和用户带来更多的麻烦，相对于这种标准，我宁愿 IE8 坚守 IE6/7 的模式。

btw: 未来几天估计又要花时间修改 CSS/Javascript 来适应 IE8 了，真烦！

Update: 在页面的 head 中加入 <meta http-equiv=”X-UA-Compatible” content=”IE=7″ /> 可以强迫 IE8 使用 IE7 的渲染方式，也算是个不赖的过渡方案吧。

住在集体宿舍的朋友经常会有这种经历：你一个人需要早起不得不上了闹钟，但由于闹钟太过彪悍将其它人吵醒，影响了别人的睡眠。这种现象在家里更是普遍，尤其对于同床共枕眠的夫妻来说，确实是个很麻烦的事情。

于是便有人设计出了如上图这样一款概念产品：指环闹钟。你只需要设定好几点起床，然后带上指环睡觉。到点的时候指环便会震动叫醒你，而不会影响到身边的伴侣。这个产品确实是非常实用。

当然，我在这里更想给大家看的，是这个产品的功能介绍图，非常生动有趣，而且将产品核心功能展示的非常好。联想到我们国内很多产品，往往东西不错却不注重这些小细节问题，使得自己产品的竞争力下降，真是应该好好学习一下人家。图片太大，请点击进入查看。

不过这样的东西对于我恐怕是没什么用，对我这样的人应该改进出一款到时间可以让指环发出 50-60 摄氏度高温的闹钟。我睡觉那状态，地震都不会醒，这小小的震动对我来说恐怕无济于事吧。

如今 Web Application 横行，在 Web 2.0 网站的各种设计元素中，按钮是无法或缺的。如何用最简洁的方法制作最漂亮的按钮就成为了一个问题。本文讲述的方法，代码上简洁，符合 XHTML 标准，不需要 Javascript，只需要纯 CSS 即可完成，而且通用性很好，使用起来也很方便。上图即为最终成品的例子，您也可以通过演示页面体验一下。下面我将详述整个制作过程，相信通过这个教程您肯定可以学会。

第一步：准备图片

对于一个好的 UI，一个很重要的方面就是要能及时的与用户发生交互。对于按钮来说，我们需要让按钮相应各种鼠标事件，让用户知道它是可以按下的。如上图，我们要制作的按钮共有三种状态：正常状态、鼠标划过、鼠标按下。通常情况下，我们会想到利用 onclick、onmouseover 这样的事件来控制，而事实上，我们完全可以利用通用性、便捷性更好的 CSS 代替 Javascript 来完成这个过程。尽可能将表现的事情交给 CSS 来做，这也是良好设计的原则之一。

为了能够实现这种效果，我们需要准备三个状态的图片。利用 CSS 的 background-position 属性，我们完全可以将三种状态的图片放在一张图片中，这样可以获得更好的缓存效果。

此外，按钮两侧的圆角也是比较烦人的问题。因为我们要制作的按钮需要能够自动适应内部文字的长度，因此我们需要应用一种叫做“拉门技术 (Sliding door technique)”的 CSS 技巧。具体原理不讲了，这里只介绍具体做法：

我们使用超链接来生成按钮，为了使用 Sliding door technique，我们需要按照如下方式书写 HTML 代码：

随后，我们需要准备两张图片，作为按钮的背景（分别为 span 标签和 a 标签的），具体示意图如下：

这里需要指出，280px 并不是绝对的，它代表了这个按钮在您的应用中可能用到的最大值。此外，所有的值都可以根据您实际的背景图做出更改。

第二步：书写 CSS 代码

为了能够让 A 标签准确的显示我们需要的效果，我们需要设定其 display 属性为 block，但是，很多情况下，我们需要在同一行中显示多个按钮，我们可以通过设定 float:left 或 float:right 来达到。提醒一下，这样设定後，当您放置完按钮后不要忘记 clear 一下 。

首先看看显示基本布局的代码，本例中，两侧圆角部分为 10px，按钮高度为 24px，保留区域为 1px：

这里需要指出的是：1. 保留区 (1px) 是包含在 SPAN 中的，具体可以注意看 padding 的设置；2. SPAN 的 line-height + padding-top + padding-bottom = A 的 height。

经过这样设定后，我们的按钮的基本样式就完成了，但它还没有交互效果，我们通过设定 a:hover 和 a:active 来实现：

我们看到，主要是应用了 background-position 属性调整背景图片的位置，这比使用多张图片效果更好。在 a.button:active span 中，我们重新设定了 padding 的值，使字符向右下方移动 1px，按下的效果更明显，这也是之前提到的保留区的作用。

第三部：最后完善

其实做完上面两部，我们的按钮基本上已经完工了。但是在各种浏览器中都有一个讨厌的问题，就是当超链接被点击后，会留下一个讨厌的虚线框。这个破坏美观的东西，我们当然要干掉它。

Firefox、Safari 等支持 W3C CSS2 的浏览器，可以通过设定 CSS 的 outline 属性来做到这一点。在我们这个例子中，只需做如下改动：

在 Firefox 中看看，虚框已经消失了。

但 Internet Explore 不吃这一套，对付它就比较麻烦了，单单 CSS 无法解决问题，需要从 HTML 下手。我们需要将按钮的 HTML 代码改为以下形式：

这样，我们可以让超链接在点击后迅速失去焦点，从而避免虚框的出现。当然，如果我们应用中按钮比较少，这个方法还不错。但按钮比较多的情况下，我们还是应该用 DOM 方法来为 className 为 button 的 A 修改 onclick 事件（用 jQuery 或 Prototype 实现会很省心），不过这不在本文讨论的范围内了。

到这里，我们的按钮就算做好了，我相信您一定已经学会了。如果还有什么不明白的地方，您可以参考这个简单的范例，查看它的源代码来解决。当然，您也可以直接在本文後提问，我很乐意为您解答。

UPDATE:谢谢 Dan Li 发来邮件提醒，我确实发现本文与这篇文章如出一辙。早看到直接转过来就好了，白白折腾了两个小时。不知道留言中 DV 大侠所指的是不是这篇。不过我在写本文时并没有看过这篇文章，而且本文与原文还是有很大不同，而且原文中 CSS 有误 (background-position 的参数顺序不对)，虽然可以实现它所叙述的效果，但不符合 CSS 标准，也不能够进一步扩展，希望看了原文的朋友能够注意。

如需在 CC-BY-NC 协议下引用，请保留以下链接，商业网站引用请与我联系，谢谢合作。http://blog.istef.info/2007/05/09/how-to-make-a-sexy-css-button

上面这段代码即可实现这个神奇的效果。当它被当作 Javascript 载入时，它其中的 JS 代码就会被执行，CSS 代码都会被忽略；而当它被当作 CSS 载入时，结果恰好相反。

为什么会这样呢？其实原理很简单，这是由于当今主流浏览器（IE & Firefox）对于 JS 和 CSS 解释的方法。我们注意到，这段代码中多了很多不必要的 <!– 以及 /* */，其实这就是奥妙所在。当代码被当作 Javascript 载入时，所有的 <!– 都会被解释为 // 也就是 Javascript 的单行注释符号，所以，上面的代码变为：

CSS 被注释掉，而 Javascript 则被顺利的执行了。当代码被当作 CSS 载入时，所有的 <!– 都会被忽略，于是代码变为：

/* */ 为 CSS 注释符，包含在之间的文字被认为是 CSS 注释。因此上面的代码中 Javascript 被注释掉了，只剩下正常的 CSS 可以被解释。

这段代码构思非常精巧，很好的利用了 Javascript 和 CSS 解释器的特性。但是我个人并不推荐将此方法推广，原因如下：1. 增加了代码的复杂度，阅读和修改都不是很方便；2. 多于的 <!– /* 会占用不少字节，实际上也是在浪费宝贵的带宽，延长载入时间。我个人还是推荐使用 Javascript 或 CSS 压缩的办法来提高效率。当然，如果您的应用确实需要尽可能少的载入文件的话，这倒不失为一个解决问题的好办法。

从 Digg 上看到消息，说 AOL 的新版主页正在测试。好奇心驱使，马上顺着这个链接进去看了一下。

如果你看了，会有什么感觉呢？简直和 Yahoo 的首页一模一样啊。除了配色以外，页面布局，功能分区都如出一辙。就连 Yahoo 右上角那个很有特色的可以伸缩的区块都被搬了过来，实在令我很惊讶。

其实网站设计间互相模仿已经很常见，但像 AOL 这么笨的抄法还是很罕见的。几乎原样照搬必然会招惹来 Yahoo 和质问和网友的责难。再说了，如今优秀的设计团队那么多，AOL 又这么富，就缺这点钱搞一个有特色的设计吗？总之 AOL 的行为实在让人想不通。莫非 AOL 把 Yahoo 收购了？（大图）

不过客观的说，Yahoo 去年更新的新主页确实很不错。对于像 Yahoo! 这样内容超多的门户网站，这个风格既能够保证很大的信息承载量，又不会由于信息过载给用户带来压迫感。Yahoo 主页合理的利用了 JS 特效和 CSS 布局，精心的设计使其在用户体验、浏览速度和页面体积方面都达到了不错的平衡，是一个很值得借鉴的布局。国内的门户真是应该像人家学学先进的方面，不要为了点破钱弄一大堆飘呀飘的东西扰乱我们的视觉了。

从 XHTMLGenius 的网站上看，这应该是一项人工服务。客户只需要将设计图给他们，并接受他们的报价（至少 $250），他们就会在 3 个工作日内为您写好 XHTML 和 CSS，并承诺其作品为良好构建的，整洁的并可以通过验证的 XHTML 和 CSS。同时，他们也保证最终作品可以在 IE，Firefox 和 Safari 中均能正常显示，真正实现了跨平台的要求。

在 Shook.ca 上有一篇文章对这个服务进行了简单评价，貌似结果还是很令人满意的。不过 $250+ 的价格真是不便宜，给我设计图 + $200 估计至多 4-5 天我也能够达 XHTMLGenius 提出的要求。不过对于那些工作任务繁重的设计大牛们来说，花上 $250 把自己从乏味的 HTML 代码中解放出来，从而专心于设计，应该还是有一定意义的。

btw: Shook.ca 上还有另一篇 Web 设计方面的好文，推荐去看看。