彬Go:CSS Sprites教程、工具介绍

今天找到了应该是前一篇关于CSS Sprites介绍的完整本吧,现在将后面没有的部分补充上,非常感谢彬GO的整理,原文为: 最全的CSS Sprites(CSS图像拼合技术)教程、工具集合

关于CSS Sprites的文章

CSS Sprites: Image Slicing’s Kiss of Death

中文版:样式表贴图定位(CSS Sprites):图像切片的死亡之吻

最权威的CSS Sprites介绍文章之一

css-sprites-教程

CSS Sprites: What They Are, Why They’re Cool And How To Use Them
一篇图文并茂的介绍文章

css-sprites

How Yahoo.com and AOL.com Improve Web Performance With CSS Sprites

介绍Yahoo、AOL等网站使用CSS Sprites降低服务器压力的案例。

What Are CSS Sprites?
又一篇介绍文章

css-sprites

Sprite Optimization

Dave Shea的思考:是不是真的有必要简历复杂的大型CSS Sprites?答案是不!不要搞得太复杂,找到一个折中的方案才是正道。

CSS-教程

Creating Easy and Useful CSS Sprites

一篇教程,其源文件可下载学习

css-sprites

Fast Rollovers Without Preload

一个快速翻转效果的例子

css-sprites

CSS Sprites + Rounded corners

另一个例子:使用CSS Sprites实现背景圆角

css-sprites

CSS Image Sprites

一篇教程

Optimize Your Website Using CSS Image Sprites

非常详细的教程,介绍了CSS Sprites的原理和应用方法。

css-sprites

Animated GIF For CSS Sprites

一个比较特别的应用

css-sprites

Image Sprite Navigation With CSS

怎样制作简单的悬停菜单效果

css-sprites

Advanced CSS Menu

还是悬停效果

css-sprites

Creating and Using CSS Sprites

一个非常基本的教程

css-sprites

CSS Sprites视频教程

How to Use CSS Sprites
David Perel解释了CSS Sprites的基本概念,并演示了如何在网页中使用它,长度:10分钟

Creating Rounded Buttons With CSS Sprites
继续上面的教程,展示了如何制作滑动按钮

Exactly How to Use CSS Sprites
Andres Fernandez  展示了 CSS sprites如何加快加载时间和减少请求次数

How To Use CSS Sprites
Chris Coyier 展示了一个 CSS sprites的范例,他将8幅图片组合在了一起,并且使用jQuery制作了一个小程序。

Faster Page Loads With Image Concatenation
对于复杂的网站,减少图片请求数量可以减轻服务器负担,这是许多站长所希望看到的。

CSS Image Sprites In 10 Minutes
另一个关于导航菜单的教程

CSS: Using Percentages in Background-Image
介绍背景图片定位的方法

利用CSS Sprites制作图像映射(image maps)

使用CSS Sprites,你可以对一个对象的一小部分加载翻转效果,使用负值的背景图片位置( background-position ),你可以创建基于CSS的图像映射,下面的文章讲述了这一技术:

CSS Image Maps Using Sprites

一个基于CSS的图像映射的简单例子。你可以同传统的方式对比一下优劣。

css-sprites

City Guide Map Using Sprites
另一个横向定位的例子

css-sprites

Advanced Map Using Sprites
一个更高级的技术。

css-sprites

CSS Sprites技术

CSS Sprites 2

Dave Shea 使用jQuery扩展了经典的CSS Sprites, 他的技术可以让不同的链接之间使用组合图片,即使用户禁用了Javascript。

CSS Sprites2 Refactored: Building an Unobtrusive jQuery Plug-In
Joel Sutherland 制作的jQuery插件,整理了Dave Shea的功能,并简化了初始化设置。

css-sprites

Background Repeat and CSS Sprites

什么情况下使用CSS Sprites

CSS Sprite: Photoshop Script Combines Two Images for CSS Hover
这是一个可以导入Photoshop的动作设置,可以让你快速制作翻转按钮的背景图片。

css-sprites

Extending CSS Spriting
Jennifer Semtner 扩展了经典CSS Sprites技术,并讲述应该在什么时候使用它。

Sliding Doors Meets CSS Sprites
滑动门技术 “Sliding Doors of CSS.”

How to Preload Images When You Can’t Use CSS Sprites
如何处理CSS Sprites对网页内容的影响

JavaScript Sprite Animation Using jQuery
Alex Walker 结合CSS Sprites和jQuery,实现了“打开页面”的效果

css-sprites

IE6, CSS Sprites and Alpha Transparency
Julien Lecomte 讲述IE6下的透明hack问题

CSS Sprite 制作工具

Data URI Sprites

DURIS (Data URI [CSS] Sprites) 是一个管理网页图片的新工具,它可以最大限度的帮助你减少背景图片的数量,减少请求数。

css-sprites

Spritr
一个生成CSS Sprites的简单工具

Sprite Creator 1.0
同上

CSS Sprite Generator
制作CSS sprites 的Drupal插件

CSS Sprites Generator
这个工具允许你上传多张图片生成CSS Sprites和CSS代码

Projekt Fondue CSS Sprite Generator
它具有忽略重复图像,调整图像精度,确定横向和纵向偏移,指定背景色和透明度,指定CSS前缀等众多功能。

css-sprites

SmartSprites
基于java的桌面程序

你可以继续以你自己的方式编写CSS和使用图像,有一个工具可以自动为你设置CSS Sprites,这里是PHP 版本 ,它是开源的,具体可以看: Chris Brainard’s Sprite Creator 1.0.
附:CSS属性background-position(图像背景位置)该如何设置

background-position(图像背景位置)这个属性是CSS中非常重要的属性。

根据CSS规范,background-position属性包含了两个(可选的)变量:水平位置(horizontal)和垂直位置(vertical),例如:

1. .introduction {
2.     background-image: url(bg.gif);
3.     background-position: [horizontal position] [vertical position];
4.     }

.introduction {         background-image: url(bg.gif);         background-position: [horizontal position] [vertical position];         }

使用这个属性,你可以定义块级元素的背景图像位置,可以使用%百分比或px像素为单位来定义图像开始的位置,也可以使用关键字:top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right.

在“ background-position: x% y%;  ”这样一个语句中,x%指水平偏移,y%指垂直偏移,左上角是:0%,0%,右下角是:100%,100%,默认的是50%。

例如,你可以这样定义:

1. ul li {
2.     background-image: url(bg.gif);
3.     background-position: 19px 85px;
4.     },

这样背景图片就被定位到了距离左侧19像素,距离上边85像素。

关于这个属性,可以在这里找到更详细的资料:background-position (CSS property)

留意更新

订阅彬Go以查看前端开发/CSS相关最新教程及资源。

英文原文:The Mystery Of CSS Sprites: Techniques, Tools And Tutorials
翻译原文:解密CSS Sprites:技巧、工具和教程

相关日志