CssGaga

安装 Win8 系统：略过此步 Win7 系统：下载并安装 Microsoft .NET Framework 4.0 XP 系统： 下载并安装 Microsoft .NET Framework 3.5 下载并安装 Microsoft .NET Framework 4.0 下载 CssGaga 最新绿色版，并解压到硬盘中，如 D:\CssGaga 双击 D:\CssGaga\CssGaga.exe 运行 CssGaga 若遇到这样的提示 请取消勾选打开此文件前总是询问，并点击运行按钮 由于

视频演示 优酷 备用地址：百度网盘 Youtube 腾讯视频 功能介绍 该功能分为三个部分： 适用于换肤的纯色 Icon 1toN，一张图片批量生成 N 套皮肤不同颜色的 Icon （比如 Qzone V8 中的 Icon 跟肤） 适用于移动客户端 Native App 的 Icon 1toN，一张图片批量生成 iOS、Android 需要的各种尺寸的图片 以上二者的叠加，纯色 Icon 先生成 N 套不同颜色的，之后再生成对应的移动端各种尺寸 最终生成的图片都会经过 CssGaga 的压缩 纯色 Icon 1toN

界面调整 去除 AutoSprite 选项，默认开启 去除 DataURI 选项，默认开启 目录调整 为了减少文件夹操作的复杂度，并提升灵活性，对 CssGaga 的几个目录进行了一些小调整 假设 CSS 文件放置在 css 目录中 before CSS文件存放位置 css/ 需转为绝对路径的 cur 及需自动生成IE6半透明滤镜的png图片目录，css书写规则见 /615 css/absolute/ 需转为DataURI的图片目录，CSS 书写规则见 /619 css/base64/ 非 AutoSprite 图片目录，同步资源功能所使用的目录 /851 css/img/ AutoSprite

用法 延续之前的使用方式，不同之处是将要拼成 png32 的 slice 命名为 *.32.png 即可 例如： .icon1{width:16px;height:16px;background-image:url(img/slice/icon1.32.png)} .icon2{width:16px;height:16px;background-image:url(img/slice/icon2.32.png)} 优先级 IE6 下划线 hack 优先 例如： .icon1{width:16px;

都不爱看文档啊大家，录了段从下载CssGaga到使用AutoSprite的视频，适合新手观看。亲看完若有意向继续使用，请一定通读一遍文档 /542 百度云网盘观看地址： http://pan.baidu.com/s/1mgiQvJa Youtube 观看地址：http://www.youtube.com/watch?v=tz5nVm1KeXg

朋友网 http://www.pengyou.com QQ空间 http://qzone.qq.com 腾讯应用中心 http://qqapp.qq.com 腾讯视频 http://v.qq.com QQ音乐 http://y.qq.com 企鹅FM http://fm.qq.com 微众银行 http://www.webank.com 画报 http://huabao.qq.com/ 排名不分先后，欢迎在评论中补充~

CssGaga最新版（当前是build 163）改进了AutoSprite算法，图片排列紧密程度已完全超越人类，带来的好处是图片面积越小客户端所占内存越小，详见谨慎使用 CSS Sprites CssGaga是个闭源项目，你只要用就好，不必浪费时间纠结于如何实现 淘宝的文河（yyfrankyy）同学曾问我要过CssGaga的源码，被我拒绝，我觉得授人与鱼不如授人与渔，让他去用Reflector反编译，他说他学过C# D2前端技术沙龙(北京场)纪录中 D:百度空间的编译平台能不能开源，能否推广出来？ 李成银：都是基于第三方开发的，但是整体没有开源，包括编码规范公司有差异，不可能迁移过来，大家就算去用很多也要花很长时间； 不打算开源百度编译平台的李成银同学在twitter上说 @ytzong 是完全自动化的么？求小图片拼大图最小面积实现算法。我们现在只做了完全自动垂直合并和水平合并。 @ytzong 求实现方法，还有对于background-position里用到right,bottom等位置是怎么处理的？ 我觉得成银看不懂C#，也不想他学了C#转做Windows Phone开发，

勾选检查关联性开启该功能 例如：将reset.css拖进来，则当前目录所有调用reset.css的css文件都会自动处理 注：此功能山寨小李刀刀同学的CssToolkit 返回CssGaga – 帮助索引

这里的会话指拖进来的文件列表 按F5可直接运行上一次的会话 每处理完一批文件后右下角会出现“保存会话”，点击后将会话保存至桌面，为.log格式文件，将此文件拖进CssGaga则可处理其中的文件 注：在处理会话之前可重新编辑地址栏及右侧选项 返回CssGaga – 帮助索引

CssGaga – AutoSprite 对 slice 的 class 写法有些硬性要求，类似如下格式： .icon{width:16px;height:16px;background-image:url(img/slice/icon.png);} 每次都去看图片属性查大小写url也是浪费生命，于是增加了 image to code 功能，使用方法： 拖拽 img 目录（或子目录）中的图片到 CssGaga，支持批量操作 复制 CssGaga 输出的 Image code 到你的 css 代码中 默认的 Image code

为了应付有可能会到来的突发状况，给有需要的人士临时抱抱佛脚 目标： 将css中的色值变灰 将css中调用的图片抽取出来变灰，并将css中的图片地址替换为变灰后的地址 数秒内完成 前提： css中的图片以相对路径调用（能本地访问）或以http方式调用（能联网访问） css、图片文件名小写，文件名及目录名中无空格和特殊字符 操作步骤： 下载CssGaga最新绿色版 打开CssGaga后检查右侧选项，仅勾选如下选项：抽取图片、临时目录，点击右下角的更多后勾选：去色 假设要变灰的css文件在E盘，则在CssGaga地址栏填入 E: 将要变灰的css拖拽至CssGaga的文本框 在该css所在的目录，找到名为_gaga_temp的目录，变灰后的css及图片在此 注意： 以上仅用于应急，若使用完整功能请把CssGaga帮助索引完整过一遍

勾选此项，会为 url() 方式调用的资源后附加时间戳（用于刷新客户端缓存） 格式为?d=月日小时分钟 另外由于cdn支持通过传递max_age参数来配置max-age（详见杨建：网站加速–Cache为王篇 四，我对HTTP协议做的一点创新(?maxage=6000000)），例如当max_age=31536000时： Response Headers Cache-Control:max-age=31536000 综上，生成后为： background-image:url(sprite/index-py.png?max_age=31536000&d=05231747) 返回CssGaga – 帮助索引

勾选此项，会将当前css中以相对路径调用的css目录下的img、image、images、 absolute以及未勾选Data URI时的base64目录中的文件同时拷贝到目标环境 同步的资源会出现在输出的文件列表中 若文件不存在，CssGaga会有提示，可用来预防404 返回CssGaga – 帮助索引

本周六我将在web标准化交流会上介绍CssGaga，ppt及视频奉上，欢迎现场交流:) **[CssGaga](http://www.slideshare.net/ytzong/cssgaga "CssGaga")** View more [presentations](http://www.slideshare.net/) from [ytzong](http://www.slideshare.net/ytzong)**[CssGaga – 哀悼日一键变灰](http://www.slideshare.net/ytzong/cssgaga-7042943 "CssGaga - 哀悼日一键变灰")** View more [videos](http://www.slideshare.net/) from

一时鸡冻搞出了bug，囧 请到/610下载最新版后覆盖即可 若覆盖失败请强行关闭进程中的 Update.exe 再进行覆盖 PS：新增GIF动画压缩功能

随着使用人数的增多，从2010-5-10的第一个版本开始历经74个小版本（平均每周2次更新）终于为CssGaga加入了自动更新功能（之前对内部一线使用者用svn更新，博客又不想写太多骚扰性的更新信息，从而忽略了二线、三线使用者），同时带来的还有Win7任务栏显示处理进度等UI小变化，以后的升级细节会写在更新提示中，同时更新对应功能的博文 老的CssGaga用户下载后直接覆盖即可 请到/610下载最新版

市面上有一些CSS Sprite Generator，要么是需要手动调整图片位置，要么需要保存图片并拷贝粘贴css代码，用起来很是麻烦，想必这也是没有大规模使用起来的原因吧。 CssGaga使用了不同的思路，简化了所有这些操作，使用时只需将css拖进CssGaga这一步即可完成所有操作！ 下面通过一个例子来说明： 比如HTML： <s class="i1"></s><s class="i2"></s><s class="i3"></s><s

细心的朋友们也许早已发现这个选项了，不过一直懒着没写说明，现在补上:) 每改动一点点皮肤要手动更改校友的10+个皮肤文件多有点慢性自杀，更别提Qzone的4、50套皮肤了。有了CssGaga的皮肤1toN，你就可以只维护其中一套皮肤，当然还有一个替换规则文件skin.csv。 1. 皮肤文件的组织方式 根据项目现有的规则，比如有3套皮肤： skin/py1.css skin/py2.css skin/py3.css 比如只维护py1，其余的py2、py3自动生成，则将替换规则文件skin.csv放置在skin文件夹中，即 skin/py1.css skin/skin.csv 2. skin.csv编写原则 skin.csv可以用office的excel来编辑 备注py1py2py3链接色#077D01#A86000#

小李刀刀同学制作了一段很赞的CssGaga功能演示视频，主要介绍了**哀悼日网站变灰**等功能，点下面链接下载： 下载CssGaga功能演示视频