Heluyao的博客 {11gz.com}

预览效果：demo

上图，可不是用画图软件制作的，而是浏览器生成。惊讶吧！css3的威力，巧妙的运用了圆角边框，阴影，背景渐变…等css3新特性。赞叹之余，我也亲自的动手制作了一下，就当学习一下了。以前了解过css3，但没动手写过，发觉有些属性还真是不好记，要区分三类浏览器(Gecko 、Presto、WebKit)，就越发的麻烦了。

其中不少地方的写法很新颖，充分的利用了伪类(before和after)，伪类配合绝对定位，双倍边框、椭圆、三角形等写法也很受教，真真切切体会到了css3的强大，希望css3时代早日到来。

原文地址：Pure CSS social media icons

推荐阅读：pure CSS speech bubbles

　　Denis Kortunov 近期发表的一篇文章，详细的描述了图标设计中容易犯的10种错误

1. 图标之间没有明显的差异化（太相似，难以辨识）；

2. 在一个图标中设计了太多的元素（windows vista的图标是反面教材）；

3. 加入不必要的元素；

4. 一套图标中的图标统一性不足（颜色主题，透视角度，尺寸，绘图技法等）；

5. 在小图标中（24X24以下）使用不必要的透视和阴影；

6. 过度原创使语义不明确（比如将回收站设计成碎纸机的样式）；

7. 国家区域和文化特征没有被考虑进设计中；

8. 在图标中使用纯界面化的元素（比如泛滥的mac aqua效果，用户会认为你的产品是苹果的产品）

9. 在图标内部使用文字（特别是不容易辨识的）；

10. 图标外部边缘没有做像素化处理。