CssGaga

A collection of 33 posts

CssGaga

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 若遇到这样的提示 请取消勾选打开此文件前总是询问,并点击运行按钮 由于

  • ytzong
    ytzong
CssGaga

CssGaga - Icon 1 to N

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

  • ytzong
    ytzong
Chrome

在Chrome中像调试SASS一样调试LESS

看完本文后在Chrome中调试LESS时所带来的便利有 不用在页面中调用less.js 页面调用less时rel用普通的css写法即可 <link rel="stylesheet" href="style.less">,不用写成 <link rel="stylesheet<strong>/less</strong>" href="style.less"> Chrome开发工具审查元素时可以看到css所在LESS文件的行号,这是最重要的一点 Chrome内置了调试SASS的功能,原理就是将SASS文件映射到同名的CSS文件进行调试,CSS文件格式含有如下格式的调试信息标明源文件名及行数反馈给Chrome开发工具 @media -sass-debug-info{filename{

  • ytzong
    ytzong
CssGaga

CssGaga 支持 LESS

为什么选择LESS? Why Less? Why did Twitter use LESS instead of Sass for Bootstrap? http://www.quora.com/Quora-Infrastructure/Why-does-Quora-use-LESS-instead-of-SCSS-SASS-for-its-stylesheet-language 目前的支持方式是拖进 *.less 文件生成 *.css 文件(注:会覆盖同名的css文件),以后会根据日常使用情况调整,It’s just the beginning. ——- 2014-1-26 ——- 最新版本的 CssGaga 已经去除 LESS 相关功能

  • ytzong
    ytzong
CssGaga

CssGaga 界面及目录规则调整

界面调整 去除 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

  • ytzong
    ytzong
CssGaga

CssGaga - AutoSprite算法简介

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

  • ytzong
    ytzong
CssGaga

CssGaga - Image to Code

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

  • ytzong
    ytzong
CssGaga

CssGaga 一键网站变灰快速上手指南

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

  • ytzong
    ytzong
CssGaga

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 – 帮助索引

  • ytzong
    ytzong
CssGaga

CssGaga - 介绍 for web标准化交流会

本周六我将在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

  • ytzong
    ytzong
CssGaga

CssGaga加入自动更新功能

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

  • ytzong
    ytzong
CssGaga

CssGaga - AutoSprite

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

  • ytzong
    ytzong
CssGaga

CssGaga - 皮肤1toN

细心的朋友们也许早已发现这个选项了,不过一直懒着没写说明,现在补上:) 每改动一点点皮肤要手动更改校友的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#

  • ytzong
    ytzong
CssGaga

CssGaga – 哀悼日网站一键变灰

勾选去色 css去色 将css中的色值(包括rgb、rgba、英文单词色值如red等)转为黑白,生成文件名 *.cs → *.gray.css 图片去色 可处理 css/jpg/png/gif 图片生成位置:当前目录下的gray文件夹 .jpg → gray/.jpg 一键变灰 同时勾选去色及抽取图片,将css拖拽进来即可 抽取图片功能 详见CssGaga – 抽取图片 此操作后: 生成变灰的css *.cs → *.gray.css 生成变灰的图片并替换css中的路径 url(原地址) → url(img-css文件名/gray/) 若同时使用同步功能则自动同步至相关服务器并生成提单文件列表 网站页面变灰则只需在哀悼日改变css的文件名为*.gray.css,并上传gray目录的图片,

  • ytzong
    ytzong