纯css3实现酷炫网站icon

heluyao — Fri, 26 Mar 2010 03:32:15 +0000

预览效果：demo

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

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

原文地址：Pure CSS social media icons

图标设计中的10种错误

heluyao — Thu, 07 Aug 2008 08:59:25 +0000

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

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

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

3. 加入不必要的元素；

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

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

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

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

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

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

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

Heluyao's Blog » icon

纯css3实现酷炫网站icon

图标设计中的10种错误