对以前评论过的人隐藏资料输入部分

这个功能在很多博客都可以看到，让常客不再重复看到资料输入框，需要的时候点击就可以展开修改。另外预先显示评论者自己的全球阿凡达，用回形针别在右上角。下面欢迎来自天鹅海的组合大城小爱里的，小爱同学 做群众演员：

js 隐藏代码参考了 享总的文章，另外多了个享总没有提到的细节，展开和收起按钮按下之后会把焦点放到相应的输入框内，也就是多执行一个 .focus(); 以下是“更改”按钮 onclick 时执行的 jQuery 脚本：

$('#author_info').slideDown('fast');
$('#author').focus();
$('#show_author_info').hide();
$('#hide_author_info').show();

如果访客 cookies 中有曾经评论过的 email 信息，则预先显示头像。在 comments.php 中合适的地方先判断是否存在 email, 如果有则输出一个头像。

<?php if ( $comment_author_email ) {
    echo '<a href="...">' . get_avatar(
    $comment_author_email, 40 ) . '</a>';
} ?>

为了看上去生动些，头像被旋转了 10 度，这是用 CSS 实现的，参考我那篇关于 CSS3 动画的文章。这有一些浏览器的局限性，比如 Chrome Windows 一直有个 bug, 在图像被旋转后，边缘不能反锯齿；Firefox 则一直不能对无 padding 的图像进行圆角，除非图像处在背景中。于是我把 Firefox 下链接的 border 圆角也一并拿掉了。

动态的输入框浮动

GluedIdeas Subtle 主题原来是有输入框浮动的，但使用的是 position: fixed; 现在改成 jQuery 来做，在页面滚动的时候浮动是动态的了，顺便还兼容了 IE. 代码来自 CSS-Tricks.

可展开的表情按钮栏

表情按钮收起来了，放在大输入框内，点击则展开。同样是由 jQuery 来执行的，按钮按下的时候做三件事情：焦点放到大输入框里去；用 jQuery .toggle() 脚本来展开或收起表情按钮；按钮本身切换一个 class, 在笑脸和关闭叉叉之间切换。

$('#comment').focus();
$('#smilies_toolbar').toggle('fast');
$('#toggle-smilies').toggleClass('close');

新的评论回复样式

回复别人的评论时出现一个黄色的提示条，类似于博客界出名的 绿条禅，同时有个小箭头指向被回复的评论。

评论回复是基于枫叶的插件 WordPress Thread Comment, 经过了枫叶和我的一些修改，目前这样已经完全符合我的需要了。喜欢这个插件的朋友不妨去插件页进行捐助，支持开发。

评论列表

左侧评论列表也有一些小的变化，比如回复会比较小一些，编号字体换成了 Georgia, 以前我没有放上每条评论的链接，现在也放在了编号上，只不过颜色还是灰色的。

最后

如果出现显示问题可能需要刷新一下，避免使用浏览器缓存，最近的改动挺多的。另外如果您发现滚动很卡，可以回复我说一下浏览器和电脑配置

更新

本文发布 3 小时，评论数达到 98 条，当然主要是几个朋友在疯狂灌水啦，除了我自己之外差不多就是：ELL Jimmy Xu Sunny lisker, 大家都在盖楼──往地下室盖。

WordPress Thread Comment 这个插件是限制回复层数的，但仅仅是在超过层数的时候不输出回复按钮，而数据发往服务器并不验证。之前在 @terryxxy （上面的 Sunny）博客上我就在说，改动很简单，只需要 Firebug, 或者 Safari, Chrome 上类似的自带调试工具。找到评论输入框下面用来发送相关数据的两个 <input type="hidden">:

<p>
    <input type="hidden" id="comment_reply_ID"
    name="comment_reply_ID" value="0" />
    <input type="hidden" id="comment_reply_dp"
    name="comment_reply_dp" value="0" />
</p>

在 value 里填入想要回复的评论 ID 和深度 dp 就可以了。这也是按了回复按钮之后会通过 javascript 修改的两个数值。这样就可以无限回复下去了。你猜最后回复到了地下多少层？B31! 以前我只在回复前标一个 "Re", 今天为了大家盖楼方便，把地下楼层编号 B2 B3 也输出了

然后新的问题出现了，每层回复都会在左边缩进，比如 margin-left: 20px; 算算地下 31 层得多少，早就撑破了。锲而不舍的 Jimmy Xu 同学不光一直往下破，而且还在截图

于是呢，我在插件设置页加入了一点判断，当楼层数 $deep > 14 的时候多输出一个 class="min-width", 然后让它 margin-left: 0; 效果是在地下 14 层之后不再缩进。但 Jimmy 同学 觉得不满意，最后我的方案：

<?php echo ' style="margin-left: ' . ceil(30/sqrt($deep)) . 'px; "'; ?>

进行了 margin-left = 30除以(楼层数开平方)再取整，第一层回复 30px, 第四层 15px, 到第 25 层，margin-left 就只有 6px 了。于是呢，从线性变为弧线，看看最后的效果：

另外下面是 @terryxxy 在 70 条评论的时候的截图，点击查看完整全图 http://img.ly/z8O

C S S不久以前我有一篇文章介绍了 CSS3 鼠标悬停动画，里面简单提过关于 text-shadow, 本文则是详细写 text-shadow. 很遗憾 IE 仍然无缘，IE8 都不行，在这个 IE 特别是 IE6 居高不下的国度怎么办，由它去吧。

兼容性

据 MDC 的文档，支持 text-shadow 的浏览器有 Firefox 3.5, Chrome 2.0, Opera 9.5, Safari 4.0, 其中 Safari 是老早就可以的，但直到 4.0 才支持多重阴影。另外 Opera mini 也能显示，但比较弱，阴影不能模糊。

阴影文字和发光文字

一个最简单的阴影文字是如下这样写的，其中 1px 2px 代表阴影相对于文字向右下方向偏移了 1px 2px, 可以为负值；5px 代表阴影的模糊半径，取值越大，阴影越扩散看不见。最后是阴影颜色。这样的阴影适合字号比较大的文字。

text-shadow: 1px 2px 5px #888;

text-shadow: 0 0 10px #fd8;

浮雕文字

浮雕文字效果在 Mac OS X 和 iPhone 中随处可见，由于阴影半径很小，一般是 0 或 1px, 所以也适合小号的文本。在使用上一般遵循这个原则：深色文字浅色背景，用白阴影，浅色文字深色背景，用黑阴影。

text-shadow: 0 1px 0 #eee; 凹进效果

text-shadow: 0 -1px 0 #123; 凹进效果

text-shadow: 0 -1px 1px #eee; 凸出效果

text-shadow: 0 1px 1px #123; 凸出效果 - http://fis.io/

多重阴影

在上面所列的新版浏览器中都已经支持多重阴影，可以达到一些特殊的效果，不过注意，如果文字和背景颜色接近，IE 下就杯具了。

text-shadow: 0 -1px 0 #000, 1px 0 0 #000, 0 1px 0 #000, -1px 0 0 #000;

text-shadow: 1px 1px 5px #08c, 1px 1px 0 #68a;

text-shadow: -2px 0 1px #db6, 2px 0 1px #6bd;

text-shadow: -1px -1px 0 #ccc, -1px -1px 3px #ccc, 1px 1px 0 #444, 1px 1px 3px #444;

text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;

鼠标悬停切换

让鼠标悬停的时候改变状态是个不错的主意，有很强的互动的感觉。阅读器中可能看不到效果。另外，在 Firefox, Chrome, Safari 中能看到整个按钮也有阴影，这是另一个应用于块模型的阴影属性，写法和 text-shadow 一样，但需要写两条：-moz-box-shadow 和 -webkit-box-shadow.

把鼠标放到按钮上切换阴影

半透明阴影颜色

有时候需要做的阴影不想它模糊半径太大，又不能太黑，于是从黑色改为灰色──问题来了，灰色的阴影在深色背景上很难看。

text-shadow: 1px 2px 3px #888; 杯具了

这时候要用到 rgba 颜色，在红绿蓝之外还有第四个值 alpha 通道，取值在 0~1 之间。下面的阴影是黑色，但是半透明了。半透明阴影的适应性明显更强，在模糊半径很小的时候，也能透出底下的背景色来。

text-shadow: 1px 2px 3px rgba(0,0,0,0.5);

动态阴影

搭配上 前文 介绍过的 -webkit-transition, 可以让阴影在鼠标经过时有个变化过程，仅 Chrome, Safari 等 WebKit 浏览器有效。

把鼠标放到文字上，阴影在 0.5 秒内聚拢

我们这一代人不少都迷过 Michael Jackson, 我虽然谈不上迷，但也非常喜欢他的 MV, 像 Black or White, Remember the Time, Ghosts, ... 能让我回想起中学的时候同学找我借他的 VCD 的那些时光，当然还有同桌女生，不知道她结婚了没。两年来我换过八个博客页眉 banner, 今天一起晒晒罢。

• 这是 Subtle theme 的默认页眉，属于挺耐看的那种，温暖，清新。

  

• 去年 WordCamp 之前我第一次尝试通过页眉图案和链接来向访客宣传，图案来自 WordCamp China 官方网站的设计。

  

• T-Mobile G1 发布之后，我发表了些 照片 和 试用报告，被 Android 所深深吸引，于是有了这个页眉。

  

• 年初我 入了水果教，琢磨着也弄了一个，但嫌颜色太艳丽，于是这是唯一一个没有挂出来过的图。

  

• 后来我用一张 Mac 自带墙纸 Evening Reflections 加工了它，并使用至今，没有纪念页眉的时候就是它了。

  

• WordCamp Shanghai 2009 非常非常的成功，对每个 WordPress fans 来说，错过了都是一种遗憾。而且内容已经从 WordPress 拓展到许多网络热门话题、风云人物，比如 Isaac 与草泥马的精彩故事。

  

• 下面这是我现在看来都还激情澎湃无法平静的一个页眉，是我花了一个多小时把它从 素材 中仔细抠出来的，还一度被推友认为是我实拍的呢 挂出来的时间仅仅两天，不需要这样压抑无声的愤怒的那一天，却还很遥远。

  

• 最后这个，献给所有喜欢他的人们，祝愿他在天堂永生！

  

上图是一个鼠标悬停动画的例子，如果将以下代码应用到全局 CSS 中，则所有带链接的图片都会有如上图动画：

a img {
    opacity: 0.8;
    -webkit-transition: all 0.2s ease-out;
}
 
a:hover img {
    opacity: 1;
    -moz-transform: scale(1.05) rotate(2deg);
    -webkit-transform: scale(1.05) rotate(2deg);
}

如果要求仅应用于 class="logo" 的图片，则将选择器改为：

a img.logo {...}
a:hover img.logo {...}

如果要求应用于 id="footer" 的 div 下所有图片，则将选择器改为：

#footer a img {...}
#footer a:hover img {...}

到这里，所有的工作都完成了，挺简单吧？下面进入详细分析说明。

transform: 形变目标值设定

兼容浏览器: Firefox 3.5, Chrome 2.0, Safari 3.1

-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);

上面的例子仅仅应用了 transform: rotate, 在鼠标悬停的时候逆时针旋转。除了 rotate, 还有 scale, translate, skew, matrix 等用法，想要深入把玩可参考 Animation Using CSS Transforms.

transform-origin: 形变中心点设定

兼容浏览器: Firefox 3.5, Chrome 2.0, Safari 3.1

-moz-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;

默认值在对象的正中，X Y 值均为 50%. 更改数值可移动形变中心。下面两个例子，左边是 100% 100%(右下角), 右边是 0%, 100%(左下角):

transition: 过程动画设定

兼容浏览器: Chrome 2.0, Safari 3.1

-webkit-transition: all 0.2s ease-out;

-webkit-transition 是一个神奇的属性，它定义了动画过程的类型、时间、时间轴曲线。all 表示对所有变化应用动画，包括 transform, opacity; 后面两项是时间和时间轴曲线，可以有如下赋值：

以上 demo 来自 Transition Timing Functions, 展示了 transition 时间控制的强大，而且上面的 transform 是可以多重叠加的，配合 transition, 能做些什么大家想象一下吧！

opacity: 不透明度

兼容浏览器: 除了 IE

这是一个较为广泛支持的属性，前面早已没有了私有前缀(-moz, -webkit). 使用也很简单，让正常状态的图片稍微透明显示，鼠标悬停的时候恢复不透明，更加醒目。它同样可以在时间轴上受 transition 控制，试试看这个示例。

text-shadow: 文字阴影

兼容浏览器: Firefox 3.5, Chrome 2.0, Opera 9.5, Safari 3.1

text-shadow: 0px 1px 3px black;

以上赋值分别代表 X轴偏移，Y轴偏移，阴影扩散尺寸，颜色。应用到按钮、标题等处有很好的浮雕效果，同样的风格在 Mac OS X, iPhone 系统界面中有大量应用。

结语

• 限于篇幅，本文示例所用的 CSS 不明文列出，有兴趣可以查看页面源代码，就嵌在正文中。
• 目前 CSS3 还在草案阶段，很多属性还有私有属性前缀，能兼容新属性的浏览器在用户比例上也还是少数。话说回来，谁指望 IE Trident? 屁股都要笑掉。
• Gecko 真的已经落后 WebKit 好多了，CSS, JS, 而且还没算上 WebKit 在 iPhone, Android 等移动平台的成就。Gecko 在这方面基本还是零吧。

整理文章分类，基于 Silk Icons 为每个分类加上图标：

并且在 Denis 的帮助下实现了侧栏“最新文章”“随机文章”前显示文章所属分类图标。加上之前的 评论者 favicon, 已经有点小华丽喽

翻页按钮的样式

赶潮流学习了下 CSS 圆角，于是将 Pagebar 翻页按钮样式化成这个样子：

圆角样式仅支持 Firefox, Chrome, Safari, 其它浏览器下仍是方角。有兴趣可以查看我的 style.css 另外 CSS 圆角也运用到了评论输入框、鼠标放到图片链接上的样式 等地方，就不细说了，推荐阅读 sofish 的教程。

左上角的加载标签

在页面加载的时候显示一个友好的提示，尽量挽留一下急性子的访问者吧。实现方法请参阅 aw 和 Shawn 的文章。

标签云链接的鼠标悬停颜色

Simple Tags 生成的标签云可以按文章多少自动分配链接的颜色，但是鼠标放到链接上就不再改变颜色了。试试看本文右边的“热门标签”，像普通链接一样有 hover 样式，代码如下：

.st-tag-cloud a:hover {
color: #E58802 !important;
}

本来不想给店主做广告的，留言里有人问，留在这里吧，淘宝。再另：有朋友要原稿，在这里，原稿是 svg 格式，可任意放大。我当时没有考虑到修改文字，把 svg 里面的文字转成路径了，如果要修改的话，字体是 Lucida Grande.

首先搞清楚两个概念：
256 色：图像中最多含有 256 种颜色，且只有 1 位透明通道，换句话说，一个像素只有透明和不透明两种状态。常见的例子是 GIF 和 PNG-8。
带 α-channel (8位透明通道) 的真彩色：除了颜色数的提升外，最重要的是引入了半透明，一个像素可以有 8位(2^8=256)透明状态。常见的例子是 PNG-24。

一个图标文件(.ico) 可以含有多种尺寸和格式的搭配，用来适配各种显示需求。以 Google Desktop 的 favicon 为例，用 图标工具 打开它可以看到这两种格式都有：

右边 PNG 图标里的像素有很多种透明状态，它可以更好地抗锯齿，更好地适配不同颜色的背景，而左边的 GIF 格式无法兼顾这两方面：

PNG 相对 GIF 来讲没有弱点，为什么他们会并存？因为很久以前 8 位透明并不被广泛支持，现在不同了，制作图标完全没有必要再带上 256 色 GIF。特别是上图那样带有曲线边缘的图标。

了解了格式，再来看看要点：

• 作图的时候要在大一点的画布上画，写字也是。满意了再缩小到 16x16，或者交给 图标工具 去缩小。
• 缩放的时候要用重新计算像素的方式，不要用邻近像素的方式。
• 为了图标文件不至于太大，可以只含有 16x16, 8 位透明真彩色 这一种格式。32x32 或者更高的尺寸在建立 .url 快捷方式图标时会用到，根据情况可以添加。

OK，看到这里想必您已经对 favicon 的制作相当了解了。PS 一下，前些天看到个篱的 Gtalk 状态信息显示“我在听什么歌”，问了一下才知道，Google Music Trends 就是靠它实现的，去访问了一下这个音乐趋势，发现它的 favicon 也很别致，呵呵。

再 PS，我宣布收回在第二篇里说过的“请不要扔给我一句：帮我搞定”，好像伤害到了某些朋友的感情 我当初只是怕请求太多没法一一帮助。看完我的教程还是不太明白的朋友尽管留言，我一定尽力帮忙！

右边这是我的 Firefox 搜索框里面的搜索引擎列表，这些搜索有的是从 Mycroft 找的，有的是自己生成的，但是图标乱七八糟很难看，被我统一加工了一下（这也算 favicon 吧，只是别人看不到罢了）。下面把 png 图标单独列出，可另存。

射手网字幕搜索，弓箭图案
迅雷狗狗，画了个简单的箭头
YouTube, 当然是播放按钮啦
Firefox 中文扩展站，一块拼图
丁丁地图，来自 Office 剪贴画
这几个是原 favicon 的再加工
这三个用了相关图标来代替

	http://aurea.es/ico/favicon.ico 双色带一点渐变，还有活泼的倾斜角，很有大家之气。网站顶部的导航标签也是这两个颜色，看上去非常舒服。
	http://www.evozon.com/images/evozon.ico 一个中心对称的眼睛，来自他家 logo 当中的字母o, 左侧的倾角刚好和前一个字母v 契合，难得的 logo 佳作。
	http://www.sumagency.com/favicon.ico 鲜艳的配色总是很吸引眼球，美中不足的是网站首页的美工很一般。
	http://www.illustrationclass.com/favicon.ico 看域名就是一个设计网站，一个小巧的铅笔头，传达了足够的含义。首页上还能找到这个图案的多种变化，有兴趣可以去看看。
	http://www.ctrip.com/favicon.ico 携程的 favicon 和上面几个不同的是它的背景完全填充，颜色很整洁，图标同样精简自 logo，传达便捷、快速之意。

同样是阴文印章，豆瓣的 favicon 就比西祠差很多了：撑得太满，且字体不合适。豆这个字上下都有分离的横，一不小心就把它们弄丢了。第一眼我真的看成了“一只”。后面几个图标在字体、颜色上也都各有特色，和各自网站风格很搭配。阴文印章是最简单的样式，只需要简单的颜色、字体搭配就可以收到很好的效果。

下面是一个阴文印章的实例，如果用 Photoshop 的话会用到圆角矩形工具 (U)，文字工具 (T)，图层样式，裁切工具 (C)。

还有一种用得比较多的是镂空字体，有点类似于华文彩云，这是另一种让字符饱满起来的办法，很好的例子就是最上面的“挖”。

也给一个镂空文字的实例， 这个做起来更简单，选好字体，在图层样式里描边并视情况更改填充透明度，裁切到 16x16，存为 png，用图标工具存为带 α-channel 的图标就可以了。

OK，说完了两种用字符来画 favicon 的思路，今天就到这里吧，下次有空再说说带图形的。作图过程没有详细讲，如果您没有什么基础的话可以查查资料，有问题可以问我，但是请不要扔给我一句“帮我搞定”……

1. 取首字母，用 logo 配色、图案来修饰它。
   比如 Skype 的 S 图案，就是自家完整 logo 的精简。
   而汉字有着方块字的先天优势，一个汉字所包含的信息量又远远大于一个字母，我挖网采用类似于 digg 配色的“挖”字，把网站类型、功能都体现在小小的图标里了。
2. 使用一个简洁的图标。
   上面的苹果图标简单到只有灰色和白色，但它用 Mac 上常见的色彩搭配勾出了一个清晰的苹果图案。
   第三排我专门列出了 Google 系列服务的 favicon，像 Gmail, Calendar, Reader, Groups, 都很好地在图标中表达了一个信息：它是干什么用的。
   第二排最后一个是经典桌面资源站的 favicon，看似简单的一个绿色按钮，却有着不错的阴影，在标签栏上的显示效果非常好。
   

再看一些失败的例子：

meebo 本来是擅长于 UI 设计的，不知道为什么 favicon 这么逊：留白太多，显得单薄。如果使用 meebo rooms 的两个圈圈应该会好一点。另外一个致命的问题是使用了全白背景而不是透明背景，在上面那样不是白色的标签栏上，显出个白框很难看。

如果您对腾讯没有任何了解，能从这个图标中获得什么信息吗？什么都不会有。本来还不错的企鹅轮廓完全无法看清。配色是没有特色的红绿蓝黄。圆形的图标还非要用 256 色，导致边缘出现明显锯齿。

本来我还是很喜欢搜狐以前那个狐狸尾巴的 logo 的，现在这个呢，你说是脚印吧，看不出来是什么脚印，如果有人看成一只羽毛球我绝不奇怪。完全单色，而且同样没有反锯齿，给人的感觉是草草而就，辱没了一家成功门户网站应有的气派。

这个话题落笔之后才发现比想象的大很多，今天就写到这里，以后继续：）

煎蛋与 digg 同步，网罗新鲜有趣的国外资讯

我要订阅煎蛋！

下面是浏览器里面的效果图，以及 Greasemonkey 插件: Google Icons 下面的搜索结果效果图：

尺寸: 1024x768
下载: https://picasaweb.google.com/sun.fisio/WaterFire

40张 3200x1200 (-_-!) 的经典游戏墙纸，值得收藏。
From mydeskcity.com 专辑一 专辑二

何不自己动手diy呢？在下面的例子中可以看到，并不需要很多的工序，你只需要找到合适的大类图标，比如视频图标，音频图标，再加上后缀名称作识别，效果也会非常好，而且直观易于识别。OK，现在我有一个空白的文件图标和一个音符图标（透明背景的png格式），如何来制作一个mp3文件图标：

在Photoshop中打开png图像，把它们按照你喜欢的布局组合到一起。然后用文字工具在合适的位置添加文字，mp3, ogg, wma, 随便什么啦，调整满意之后另存为png图像，也可以把Photoshop文档存下以备今后使用。

最后用图标工具（比如 Stardock IconDeveloper ）把 png 转成 ico：不必输出太高的分辨率，一般WinXP系统图标最多64x64，所以输出五种分辨率，16x16, 24x24, 32x32, 48x48, 64x64, 一定要带alpha透明通道，比较低的色彩格式比如256色什么的没有必要带上。
要注意改变图像大小的时候的像素重组方式，千万不要用邻近像素的方式。可以多试试，选择合适的。

如果你 Photoshop 这些都很熟练的话做起来会非常快。在本文开始的地方我提供了一个我做过的东西的预览图，如果有朋友需要的话可以放出 psd 模板下载，或者我做过的 png/ico 下载。

注：部分素材来自苹果操作系统 Mac OS X Tiger.

3. Virtual Laser Keyboard(虚拟镭射键盘)

2. Combimouse Keyboard(集成鼠标的键盘)

1. TypeMatrix EZ-Reach 2030