CSS Sprites图片样式在线生成

CSS Sprites 在显著降低 HTTP 请求方面功不可没,但 CSS sprite 可不是个简单的技术,Sprite generator 可以帮你做这些繁复的工作,将你的图片打包成 zip 上传上去,他们会把你的图片组合成 sprite,还帮你生成 CSS 代码。

spritegenerator

官方网址:http://spritegen.website-performance.org/

还有中文版的:http://cn.spritegen.website-performance.org/

大家可以看看CSS Sprites的其他工具和文章:http://www.css88.com/archives/tag/css-sprites

【推荐】CSS Sprites 样式生成工具 v2.3

以前也推荐过《【推荐】CSS Sprites 样式生成工具》, 原文地址: http://www.css88.com/archives/758
那时候还是1.5版本的,部分功能使用起来不灵活,所以一直没在实际开发中应用。前几天鬼哥有更新了,我又试用了一下,感觉改进了很多,真好手头有几个页面要做,就决定实际应用一下。

今天终于切页面了,CSS Sprites 样式生成工具使用起来非常方便,特别是写功能性的选项,比如是否输出宽高,复制当前样式等等,更有强大的快捷键和对改当前定义的保存,方便下次重新打开和修改。

2009-06-02_235912 继续阅读

【推荐】CSS Sprites 样式生成工具

CSS Sprites 68375F0F751F62105DE55177 v1.4.1

CSS Sprites 样式生成工具是有腾讯的鬼哥使用RIA开发一个针对CSS Sprites 的样式生成工具,小巧,实用,可惜部分功能使用起来还不是很灵活,希望鬼哥继续升级。

 

CSS Sprites在开发的时候比较麻烦,你要通过photoshop或其他工具测量计算每一个背景单元的精确位置,这是针线活,没什么难度,但是很繁琐,还要书写出css;实用这个工具就能在很大程度改善这个问题;

  继续阅读

谈谈CSS Sprites(css精灵)

CSS Sprites在国内很多人叫css精灵,其实这个技术不新鲜,这个技术老到什么程度呢,我不敢确定,但是我看到最早的关于CSS Sprites是在Dave Shea的《CSS Sprites: Image Slicing’s Kiss of Death》,时间是March 05, 2004 ,整整5年了,那时我还没参加工作呢?

 

这个技巧已经广泛的应用到现在的页面的前端开发中,甚至YUI将他定为《提高网页效率的14条准则》的第一条准则“Make Fewer HTTP Requests” ,可见这个技术的重要性,也正是YUI的推荐
使这个CSS技巧得到了广泛的推广和应用。

 

先来看个最简单的DEMO:
这是背景图片


这是一个简单的CSS Sprites的demo:

 

XML/HTML代码
  1. <div style=“float:left; width:120px; padding-left:20px; background:url(ico.png) left top no-repeat”>这里显示红叉</div>  
  2. <div style=“float:left; width:120px; padding-left:20px; background:url(ico.png) left -32px no-repeat”>这里显示绿勾</div>  
  3. <div style=“float:left; width:120px; padding-left:20px; background-image:url(ico.png); background-position:left top; background-repeat:no-repeat”>这里显示红叉</div>  
  4. <div style=“float:left; width:120px; padding-left:20px;  background-image:url(ico.png); background-position:0 -32px; background-repeat:no-repeat”>这里显示绿勾</div>  

看看页面中的显示!

  继续阅读