CSS雕虫小技：八卦五行布图法介绍

本质和优点

先申明一下，这里不是在谈玄论道，说八卦五行，我只是利用了一下这几个数字传统的知名度，以及阴阳说中问题归纳和状态演化的技法。


这里所说的布图，就是一种将诺干背景小图片合并在一起（传说中的CSS滑动门技术）；这里说的布图说的就是如何组织这些零散的小图片。



口诛笔伐：糟糕的绝对位置布图法：

常见的办法是把一堆相关的图片通过绝对位置放在一个文件中，比如【0，0】放置一个编辑按钮，【0，40】放置一个删除按钮【0，60】放置一个保存按钮。等等。

如此最大的问题是：无关的图片被杂乱无章的堆砌在一起。后期的维护将越来越繁琐。最后将是一场噩梦。
那么，我们如何更好的布图呢？

首先，让我们抛弃我们使用绝对位置的习惯，理由是：

1.绝对位置不便记忆：
绝对位置都是一些数字标示，非常难记，相对位置是个有限集合，绝对位置有无限的状态。

2.绝对位置不便适应需求的变更：
比如我们一个小图片，最初是 18*18，于是，我们布图的时候，间隔为20.
但是后来开发了一套大图标皮肤，小图标的大小变成21*21，溢出了。。。,改吧，慢慢改吧，我们有的是时间。。。

3.绝对位置在编辑的时候也比较麻烦：
而相对位置，你可能只要打开你的布局管理器，轻轻点击几下对齐图标。
如果有一些小调整，绝对位置布局的时候，我们要小心的计算出新的布局位置，更新文档，更新相关代码，通知相关工程师。。。。

4.增加沟通成本：
因为绝对位置的无穷性，我们无法给数值表示的相对位置赋予通用的适合的语意，无穷的状态我们需要依赖无穷的文档。

（我们估计没有这种文档，一旦需要调整，打电话问吧，希望你能找对人。。。）。

而相对位置，只有有限的状态，我们可以清晰的给出位置的约定语意。文档的最高境界也就是不需要文档。

5.糟糕的自适应性：
这点不必解释，绝对布图法根本就不具备这一特征。


太极生两仪，两仪生四相，四相生八卦。

最朴素的图标只有一个状态，这很简单，我们制作一张很朴素的图片即可。
然后我们想加上一个鼠标放上去的激活效果。于是我们有了两种状态。这时候，我们可以采用左右两端布图。
之后呢，鼠标按下去是不是也要有一个新的状态？哦，还差点忘了，更重要的，功能禁用了我们也需要一个状态。至此四大天王到齐了，各自找个角落呆着吧。

我们常见的也就是这四种状态：
1.正常：
2.鼠标放上
3.鼠标点击
4.禁用


如果我把这四种状态自左上起，顺时针排列，我们还可以达到一个惊人的自适应性。
当我们只准备了一个图标的时候，吧他做成整幅度的图片，那么四种状态都显示为正常的图标。
需要增加状态2的时候，只需要扩展右段新图片。同样，一切正常（disablle状态不被支持，显示为正常状态，按下和鼠标移上效果一致也是一个理想的巧合）。
当需要鼠标按下的时候，扩展下方图标。同样，一切正常。

这四种状态的组合，我称之为斜四相。对应样式单为 ".quad-x-"

但是，我们的八卦可是有八个方位的，不要轻易浪费了，怎么办呢？

老子说了："万物负阴而抱阳，冲气以为和"。

这是我们客观世界普遍纯在的规律。

比如，我们有一个展开的图标，那么我们极有可能需要一个关闭的图标。我们有一个保存按钮，那么，我们极有可能也需要一个打开的功能。

这两类事物相互对立的东西必然有紧密关联，完全应该安排在一起。

于是，我们吧原来的布局位置，顺时针旋转45度，一个正四相产生了。对应样式为：“.quad-y-”


待续。。。。

评论

17 楼 ytzong 2009-03-26  

<p>可以参考下Yahoo和Gmail的处理方式，这里有分析http://ytzong.blogspot.com/2009/03/yahoogmailcss-sprites.html，从模块化角度考虑用Gmail的比较好，从HTML结构考虑用yahoo的方式比较好 </p>

16 楼 whaosoft 2009-03-25  

这个图 在什么项目里用啊!~

15 楼 jindw 2009-03-20  

zhuyx808 写道

jindw 写道

首先，让我们抛弃我们使用绝对位置的习惯，理由是：
。。。
这点不必解释，绝对布图法根本就不具备这一特征。

LZ 讲的两个位置把我搞的头晕，拜托LZ把相关字修改下好吗？

呵呵，多谢指出，都写乱了呵呵，已经更正

14 楼 xieye 2009-03-20  

我自己用spriter的感受是：
只能把不重复。top。left。的图片进行合并，不知大家做的怎样？

13 楼 zhuyx808 2009-03-20  

jindw 写道

首先，让我们抛弃我们使用绝对位置的习惯，理由是：

1.相对位置不便记忆：
绝对位置都是一些数字标示，非常难记，相对位置是个有限集合，而绝对位置有无限的状态。

2.绝对位置不便适应需求的变更：
比如我们一个小图片，最初是 18*18，于是，我们布图的时候，间隔为20.
但是后来开发了一套大图标皮肤，小图标的大小变成21*21，溢出了。。。,改吧，慢慢改吧，我们有的是时间。。。

3.相对位置在编辑的时候也比较麻烦：
而相对位置，你可能只要打开你的布局管理器，轻轻点击几下对齐图标。
如果有一些小调整，绝对位置布局的时候，我们要小心的计算出新的布局位置，更新文档，更新相关代码，通知相关工程师。。。。

4.增加沟通成本：
因为相对位置的无穷性，我们无法给数值表示的相对位置赋予通用的适合的语意，无穷的状态我们需要依赖无穷的文档。

（我们估计没有这种文档，一旦需要调整，打电话问吧，希望你能找对人。。。）。

而相对位置，只有有限的状态，我们可以清晰的给出位置的约定语意。文档的最高境界也就是不需要文档。

5.糟糕的自适应性：
这点不必解释，绝对布图法根本就不具备这一特征。

LZ 讲的两个位置把我搞的头晕，拜托LZ把相关字修改下好吗？

12 楼 bencode 2009-03-19  

有意思, 下次用在项目中..

11 楼 hexawing 2009-03-19  

希望LZ早点出图示版……这样纯文字看不太懂的说=_=

10 楼 yukaizhao 2009-03-18  

css背景图用的方式不一样，我个人认为还是需要手动做一些设置的。

9 楼 yukaizhao 2009-03-18  

CSS背景图合并工具，你可能感兴趣
http://yukaizhao.iteye.com/blog/293757

8 楼 jindw 2009-02-03  

^_^，牛人年年有，今年特别牛哦，去拜读一下，^_^

7 楼 QuakeWang 2009-02-03  

google了一下，发现有人和我有类似的想法，并且已经做好了一个工具出来：
http://smartsprites.osinski.name/

他是通过CSS注释来指定规则，有java和php 2个版本提供，很棒！

6 楼 jindw 2009-02-02  

恩，我这里就是在推荐一种CSS背景图片合并的规范。
希望能减少ui和csser们的沟通成本。

Quake Wang提到的这个想法看上去很强悍，不过感觉也是很危险的事情，至少我是想不出可靠的办法：（

5 楼 QuakeWang 2009-02-02  

之前我看到过有网站提供CSS Sprite生成器的服务：http://spritegen.website-performance.org/，JavaEye的会员也有发布过一个客户端软件：http://yukaizhao.iteye.com/blog/293757，但是这2个工具还是需要将生成的结果用手工在CSS文件中去修改，有没有工具可以帮助人来自动化处理呢？或许可以通过制定一些规则来实现？一些想法：
1. 在开发模式下，还是采用单个的小图片，用CSS直接指定单独的背景图片:

.sprite-foo {
  background-image: url(/images/foo.png)
}

.sprite-bar {
  background-image: url(/images/bar.png)
}

2. 在发布的时候，通过一个脚本，自动将符合规则的图片进行合并，然后更新position，CSS自动化变成了：

#container li {
   background: url(merged.png) no-repeat top left;
}

.sprite-foo {
  background-position: 0 -30px;
}

.sprite-bar {
  background-position: 0 -80px;
}

这样好处是，在开发的时候，写CSS的人和做图片的人都不用关心图片合并问题，发布又完全是自动化的。

4 楼 jindw 2009-02-02  

要说例子：
这里这个spinner的上下翻滚的按钮算是一个（制作图片的时候偷懒，鼠标放上去的时候，并没有做任何修改）。
http://www.xidea.org/project/jsiside/decorator/spinner.html

其实我要说的事情很简单。就是如何去组织你的小图片，找到这些小图片的关系，能后按照灵活统一的方式去处理。

3 楼 Snow_Young 2009-02-02  

来先给个样例图片看看吧，哈哈~光看描述有点晕眩~

2 楼 风雪涟漪 2009-02-02  

最近也在学习css ，期待后续的文章，很有创新。

1 楼 swain 2009-02-02  

继续 最后别忘了Demo