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