CSS Sprites (CSS Image flattening technology) Tutorial tool

What is CSS Sprites?

The word "Sprite" in computer graphics has its unique definition, because the game, video and other picture quality more and more high, there must be a technology can intelligently handle materials and stickers, and to keep the picture smooth. "Sprite" is a technique that combines many pictures into a grid and then navigates the contents of each grid to the screen through a program.

The sprite is positioned on a static picture and is correctly positioned on the screen through a simple program or hardware, and a picture is like being "changed", and they do not occupy memory alone, so they are named "Sprite Sprites".

A combination of Pokemon pictures, you can click here to enjoy more. Not load each but with a picture

As time goes by 2000, web design is moving in the direction of refinement and ingenuity. Designers began to consider the use of non-JavaScript to make mouse-over, hover menu effect, when the CSS sprite came into being, it is based on the same principle as the game sprite mentioned above, and the use of CSS more easily controlled, quickly popular.

In 2004, Dave Shea proposed a scheme that uses CSS to control the combination of pictures, to combine small images, and to use CSS to define background properties to control where and how images are displayed.

When the page loads, instead of loading each individual picture, it loads the entire combined picture at once. This is a remarkable improvement, which greatly reduces the number of HTTP requests, eases server pressure, and shortens the time lag required for hover loading pictures, making the results smoother and without pauses.

Where is the CSS sprites used?

CSS sprites can be used on many occasions, large sites can combine many individual images in an organic way, making them easy to maintain and update. There is usually a large gap between the pictures, so that the picture does not affect the content of the page. But at the same time the CSS sprite is mostly used for the fixed pixel positioning, its elasticity is poor, received positioning and other factors constraints. So, you need to weigh the pros and cons between maintainability vs reduced load and choose the best way to fit your project.

Here are some examples of how CSS sprites are used:

Xing

This website makes CSS Sprites with buttons, icons and logos:

Amazon

Amazon uses a large, neat, smart CSS Sprites:

Apple

The Apple website uses CSS sprites to make the navigation menu mouse hover effect:

Youtube

YouTube uses a 2008-pixel high CSS Sprites:

Cnn

CNN uses a very simple and cautious approach:

Digg

Digg's approach is complex:

Yahoo

Yahoo has arranged their beautiful icons equidistant:

Google

Google uses an extremely simplified approach:

Dragon Interactive

A colorful CSS sprites scheme:

TV1.rtp.pt

A very big and cool CSS sprites scheme

CSS sprites are commonly used to combine frequently-applied graphical elements such as navigation, logos, split lines, RSS icons, buttons, and so on. Typically, they do not appear as Web content, because images that involve content are not the same for each page.

Articles about CSS Sprites

CSS sprites:image slicing ' s Kiss of Death

Chinese version: Style sheet map positioning (CSS Sprites): Image slicing Death kiss

One of the most authoritative CSS sprites introduction articles

CSS Sprites:what They is, why they ' re Cool and what to use them

An illustrated introduction to the article

How yahoo.com and aol.com Improve Web performance with CSS Sprites

This paper introduces Yahoo, AOL and other websites using CSS sprites to reduce the pressure of server cases.

What is CSS Sprites?

Another introductory article

Sprite optimization

Dave Shea's thinking: Is it really necessary to resume a complex large CSS Sprites? The answer is NO! Don't get too complicated, finding a compromise solution is the way to go.

Creating easy and useful CSS Sprites

Note: related website Construction Skills Read please step to the building station tutorial channel.

A tutorial whose source files can be downloaded for learning

Fast rollovers without preload

An example of a quick flip effect

CSS Sprites + rounded corners

Another example: using CSS sprites to achieve a background fillet

CSS Image Sprites

A tutorial

Optimize Your Website Using CSS Image Sprites

A very detailed tutorial, introduced the principle of CSS sprites and application methods.

Animated GIF for CSS Sprites

A more specific application

Image Sprite Navigation with CSS

How to make a simple hover menu effect

Advanced CSS Menu

or hover effect

Creating and Using CSS Sprites

A very basic tutorial

CSS Sprites Video Tutorial

How to use CSS Sprites

David Perel explains the basic concepts of CSS sprites and demonstrates how to use it in a Web page, length: 10 minutes

Creating rounded Buttons with CSS Sprites

Continue with the tutorial above and show how to make a slide button

Exactly how to use CSS Sprites

Andres Fernandez shows how CSS sprites can speed up load times and reduce the number of requests

How to use CSS Sprites

Chris Coyier shows an example of a CSS sprites that combines 8 images and uses jquery to create a small program.

Faster Page Loads with Image concatenation

For complex sites, reducing the number of picture requests can reduce the burden on the server, which is what many webmasters would like to see.

CSS Image Sprites in Minutes

Another tutorial on navigating the menu

Css:using percentages in Background-image

Introduction to the method of background image positioning

Creating image maps with CSS Sprites

Using CSS Sprites, you can load a flip effect on a small part of an object, use a negative background image position (background-position), you can create a CSS-based image map, and the following article describes this technique:

CSS Image Maps Using Sprites

A simple example of CSS-based image mapping. You can compare the pros and cons with the traditional way.

City guide Map Using Sprites

Another example of horizontal positioning

Advanced Map Using Sprites

A more advanced technology.

CSS Sprites Technology

CSS Sprites 2

Dave Shea uses jquery to extend the classic CSS Sprites, and his technology lets you use a combination of images between different links, even if the user disables JavaScript.

CSS Sprites2 refactored:building an unobtrusive jQuery plug-in

The jquery plugin, made by Joel Sutherland, organizes the functions of Dave Shea and simplifies the initialization settings.

Background Repeat and CSS Sprites

What is the use of CSS Sprites

CSS Sprite:photoshop Script combines-Images for CSS Hover

This is an action setting that can be imported into Photoshop, allowing you to quickly make a background image of the rollover button.

Extending CSS spriting

Jennifer Semtner extends the classic CSS sprites technology and tells you when it should be used.

Sliding Doors meets CSS Sprites

Sliding door Technology "Sliding Doors of CSS."

How to preload Images if you Can ' t use CSS Sprites

How to deal with the effect of CSS sprites on Web content

JavaScript Sprite Animation Using jQuery

Alex Walker combines CSS sprites and jquery to achieve the "open page" effect

IE6, CSS Sprites and Alpha Transparency

Julien Lecomte about the transparent hack problem under IE6

CSS Sprite Making Tools

Data URI Sprites

DURIS (Data URI [CSS] Sprites) is a new tool for managing Web page images, which can help you minimize the number of background images and reduce the number of requests.

Spritr

A simple tool for building CSS Sprites

Sprite Creator 1.0

Ditto

CSS Sprite Generator

Make CSS Sprites's Drupal plugin

CSS Sprites Generator

This tool allows you to upload multiple images to generate CSS sprites and CSS code

Projekt fondue CSS Sprite Generator

It has many features, such as ignoring duplicate images, adjusting image accuracy, determining landscape and portrait offsets, specifying background color and transparency, and specifying CSS prefixes.

Smartsprites

Java-based desktop programs

You can continue to write CSS in your own way and use the image, there is a tool can automatically set up for you CSS Sprites, here is the PHP version, it is open source, specifically can see: Chris Brainard ' s Sprite Creator 1.0.

Attached: CSS properties background-position (image background position) how to set

Background-position (image background position) This property is a very important property in CSS.

According to the CSS specification, the Background-position property contains two (optional) variables: horizontal position (horizontal) and vertical position (vertical), for example:

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];}

Using this property, you can define the position of the background image of the block-level element, use% or px pixels to define where the image will start, or use keywords: top left, top center, top right, center left, center center , center right, bottom left, bottom center, bottom right.

In "background-position:x% y%; "In such a statement, percent X refers to the horizontal offset, y% refers to the vertical offset, the upper left corner is: 0%, 0%, the lower right corner is: 100%, 100%, the default is 50%.

For example, you can define this:

1. UL Li {

2. Background-image:url (bg.gif);

3. background-position:19px 85px;

4.},

This allows the background image to be positioned 19 pixels from the left and 85 pixels from the top.

For this attribute, you can find more detailed information here: Background-position (CSS property).

Note: related website Construction Skills Read please step to the building station tutorial channel.

CSS Sprites (CSS Image flattening technology) Tutorial tool