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-”

待续。。。。

发表评论

电子邮件地址不会被公开。 必填项已用*标注