网页图片整理术之CSS Sprite的应用
-

怎样在网页中应用手绘风格,以改善网站的用户体验
手绘风格非常有利于展示人性色彩,形成独特的识别度,为用户带来真实感。当你收到好友寄来的明信片时,你总是希望看到卡片是手写的,带着好友独特的笔迹,而不是用电脑打印出来的。一
-

解析网站404网页设计那些不得不说的事
前阵子做我们一淘优惠商家统一的报错页面, 整理了一些有意思的404页面(后简称404),加之最近网友热议的QQ空间公益404页面,在这里一起拿出来跟大家分享一下。
-

z-index属性的使用方法和层级树CSS教程
CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识. 与此同时, 我们总是对堆叠顺
网页读取优化:考虑到网页页面优化的处理,这个算是让设计师们选择使用 CSS Sprite 的最大诱因了。对于网页设计师来说,越多图档就表示每次浏览器都得向服务器逐一要求各个图档,与其让每个用户的浏览器频繁不断的跟服务器要求档案,不如将这些档案合并在一起,如此一来仅需处理一次要求即可,大幅减少了服务器的负担!
CSS Sprite 并不是一个新的概念,早在红白机年代(或更早)的传统的 2D 游戏设计中,游戏制作者就想到这种将角色图片并排在一起以达到角色动画效果的作法,不但可以降低游戏体积,还可以提高机器运行效率(在那个硬件不发达的年代更为重要):

同样的技巧也可以应用在网页上,以往在网页中想要出现动画的图像,几乎都只有从 Gif Animation 图档格式或是 Flash SWF 两者中选择一个使用,前者支持广泛,规格却不是很够用,像是仅支持 256 色等;而 Flash 功能强大、目前却面临着支持度的挑战。这个问题似乎一直很难找到一个满意的解决方式。
而CSS Sprite 的出现为这个情形提供了一个新的解决方式,像是Dumb Ways To Die 的官方网页,即使了此方法重现了许多该影片中的动画片段。

如果去检查网页中使用的图档,就可以找到如以下的动画截图:



























