论坛首页 Web前端技术论坛

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

浏览 11264 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2009-02-01   最后修改:2009-03-20
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-”


待续。。。。
   发表时间:2009-02-02  
继续 最后别忘了Demo
1 请登录后投票
   发表时间:2009-02-02  
最近也在学习css ,期待后续的文章,很有创新。
0 请登录后投票
   发表时间:2009-02-02  
来先给个样例图片看看吧,哈哈~光看描述有点晕眩~
0 请登录后投票
   发表时间:2009-02-02   最后修改:2009-02-02
要说例子:
这里这个spinner的上下翻滚的按钮算是一个(制作图片的时候偷懒,鼠标放上去的时候,并没有做任何修改)。
http://www.xidea.org/project/jsiside/decorator/spinner.html

其实我要说的事情很简单。就是如何去组织你的小图片,找到这些小图片的关系,能后按照灵活统一的方式去处理。
0 请登录后投票
   发表时间: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的人和做图片的人都不用关心图片合并问题,发布又完全是自动化的。
0 请登录后投票
   发表时间:2009-02-02   最后修改:2009-02-02
恩,我这里就是在推荐一种CSS背景图片合并的规范。
希望能减少ui和csser们的沟通成本。

Quake Wang提到的这个想法看上去很强悍,不过感觉也是很危险的事情,至少我是想不出可靠的办法:(
0 请登录后投票
   发表时间:2009-02-03  
google了一下,发现有人和我有类似的想法,并且已经做好了一个工具出来:
http://smartsprites.osinski.name/

他是通过CSS注释来指定规则,有java和php 2个版本提供,很棒!
0 请登录后投票
   发表时间:2009-02-03  
^_^,牛人年年有,今年特别牛哦,去拜读一下,^_^
0 请登录后投票
   发表时间:2009-03-18  
CSS背景图合并工具,你可能感兴趣
http://yukaizhao.iteye.com/blog/293757
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics