CSS sprites - what they are and how to use them. Create CSS sprites. Examples Download sprites png

Liked:
27

Dislikes: 4

No translation available.

sprite

before or after"before""after""after"

angry_bird angry.png. index.html

UTF-8 index.html windows-1251 style.css angry_bird

http://spritecow.com

angry.png,

angry_birdstyle file style.css imgs /.It turned out like this:

No translation available.

CSS sprites are graphics for your website combined into one graphic file. "Why one file?" - you ask. The fact is that this approach to storing images can improve the performance of web pages, as well as store graphic images in a more organized manner. Let's take a look at some of the best practices for using sprites. The very name of the sprites may remind you of game sprites, retro game consoles and even browser games that are so popular today:

So, applicable to Web Design, sprite is just one large file containing several images for your site, saving time to download and transfer the file over the network. When a sprite, for example, contains 20-30 images, this can significantly ease the load on the server, since if these images were stored separately, the server would have to make 20-30 separate requests, respectively, to get each such image. Thanks to the sprite, only one HTTP request is made to the server - to receive a single image. A sprite visually may not look entirely "readable" to the eye, since its main task is only to bring different "pieces" of your design together. For example, a sprite might look like this:

Most modern sites use sprites, and the well-known VKontakte is no exception. For example, this is how it stores "pieces" of the interface in one file - namely, the familiar icons:

The essential point of using CSS sprites is that the server needs to send only one graphic file containing all your images, and not many individual images - and through CSS you can display any small segment from this graphic file as a background for an element. Some people think that individually images load faster, but they are not. By uploading one graphic file with many pictures, we send only one request to the server, and when uploading a large number of pictures, we send more requests to the server. Combining images into one file allows not only to significantly reduce the number of HTTP requests, butand reduce the overall file size of the image.

Here's another example of a sprite. This is how one well-known western website stores graphic elements:

When is the best time to prepare a sprite, you may ask? There are two different approaches for this.

Different approaches - creating a sprite before and after website creation

There are two common approaches when creating a sprite sheet - make itbefore or aftercreating your website. You can place all images in the sprite sheet before creating the site. This is what we call the approach"before"... In addition, you can create all images as separate files, which makes editing easier. Once the site is built and all images are prepared, you can quickly and easily create a sprite sheet, either manually or using one of several tools. This we will call the approach"after"... If sprite sheets are new to you or you are new to Web design, then the approach is more suitable for you"after"... There are many utilities, services and programs to help you create sprites, most of which are distributed and available free of charge.

Arranging pictures in a sprite in an organized manner

When creating a sprite in Photoshop, it is advisable to immediately place all the images in an organized manner and in a certain sequence chosen by you, so that later it would be easy and simple to work with them. Try to always round off the space for each sprite image to the nearest 10 pixels, or leave more space around them if they are all the same size. When it comes to writing a CSS style, you won't have to write down the coordinate measurements, and you'll be less likely to forget the coordinates of the images you want to use. Here's an example of a good placement of different images in one sprite:

From theory to practice! How to Create an Animated Angry Birds Bird Using a Sprite

So, we got acquainted with the concept of a sprite in Web Design, but theory without practice is nothing. Therefore, now we will create our first sprite with you and learn how to make a simple animation on an HTML page. Our example will be based on a character from the game Angry Birds - a funny red bird. First, let's prepare a .PNG sprite image containing 4 phases of bird animation:

Create a directory somewhere on disk angry_bird- there we will put the files of our example. Save the sprite with birds to this directory and name the file angry.png. The next step is to create a file in the same directory with the name index.html- this will be our animation test page. Next, let's open this file in an editor and put the following code there:

Let me explain a little what we have done now. First, we set the encoding for our HTML document UTF-8, which means we must keep our index.htmlin this encoding. You can set another one, for example, windows-1251, - for our task it is not important. Next, we connected the style file to the document style.css (it is not yet in our catalog angry_bird, we'll create it a little later). We also set a link to an external script and connected the jQuery library - using jQuery we will dynamically change the pictures of our bird and change its "phases" from the sprite. We also prepared an internal JavaScript block, where we will place the code for animating the bird. Finally, the main body of the document contains a single hyperlink, inside which is a DIV block, and its ID is set as birdImage, and the default class is bird-sleeping. This means that when the page opens, our bird will "sleep" - this corresponds to the lower left image inside the sprite - where its eyes are closed. Now is the time to "cut" our sprite, i.e. select individual images from it.

Slicing a sprite using the SpriteCow.Com service

The task of "slicing" a sprite is quite time consuming - it requires care so as not to mistake the coordinates that define each image in the sprite. Fortunately, today there are services that completely remove this headache from the designer and layout designer. I use for slicing and recommend you the service http://spritecow.com. The essence of the service is simple and very convenient - we select each bird picture with the mouse, and SpriteCow gives us a ready-made CSS-code with coordinates. All we have to do is just set 4 styles for each bird phase! Having entered the site, we see 2 buttons - "Open Image" and "Show Example". We need the first button, click on it:

In the opened dialog - select our sprite file angry.png,after which we see how our sprite was uploaded to the site. Next, we need to define the background color, for this, click on the "Pick Background" toolbar and point to the white area of \u200b\u200bour sprite - this will allow us to correctly cut each phase of the bird:

Select the first image and automatically get the CSS code for it:

Now, it's time to create in our directory angry_birdstyle file style.css... There, we will insert 4 generated pieces of CSS-code, but instead of the standard.sprite class offered to us by SpriteCow, let's call our styles more clearly. Also, since the sprite image is stored directly in the root of the directory, we will remove the unnecessary path element from the background property - imgs /.It turned out like this:

/ * "regular" bird. Top left image in a sprite * / .bird-normal (background: url ("angry.png") no-repeat -12px -16px; width: 97px; height: 94px;) / * "Happy" bird. Top-right image in a sprite * / .bird-happy (background: url ("angry.png") no-repeat -118px -17px; width: 97px; height: 94px;) / * "Sleeping" bird. Bottom left image in sprite * / .bird-sleeping (background: url ("angry.png") no-repeat -12px -120px; width: 97px; height: 94px;) / * "Angry" bird. Bottom right image in a sprite * / .bird-angry (background: url ("angry.png") no-repeat -118px -120px; width: 97px; height: 94px;)

The last step is to write the jQuery code to create the animation.

Now that we have successfully sliced \u200b\u200bthe sprite and placed 4 styles for each image in our file style.csswe just have to write the jQuery code that will add animation when we hover over our hyperlink and when we click on the link. As we remember, by default we have the bird-sleeping class, i.e. our red bird will "sleep" when opening a document :)

All animation will be based on 3 jQuery methods:

• hover is a handler for hovering the cursor over a link and "leaving" the cursor from the link. When we hover the cursor, the bird will "wake up" - ie. the class will become bird-normal
• mousedown - handler for clicking the left mouse button on a link. In this case, the bird will become "happy" - ie. The DIV block will be assigned the bird-happy class
• mouseup - handler for releasing the left mouse button. When released, the bird will become "angry" - ie. DIV block is assigned classbird-angry

So, let's paste the following code in the place we prepared in the inner JavaScript block placed on the page:

$ (document) .ready (function () (// this is jQuery code to animate $ ("# birdImage"). hover (function () ($ (this) .removeClass ("bird-sleeping"); $ (this) .removeClass ("bird-angry"); $ (this) .removeClass ("bird-happy"); $ (this) .addClass ("bird-normal");), function () ($ (this ) .removeClass ("bird-normal"); $ (this) .removeClass ("bird-angry"); $ (this) .removeClass ("bird-happy"); $ (this) .addClass ("bird-sleeping ");)); $ (" # birdImage "). mousedown (function () ($ (this) .removeClass (" bird-sleeping "); $ (this) .removeClass (" bird-normal "); $ ( this) .removeClass ("bird-angry"); $ (this) .addClass ("bird-happy");)). mouseup (function () ($ (this) .removeClass ("bird-sleeping"); $ (this) .removeClass ("bird-normal"); $ (this) .removeClass ("bird-happy"); $ (this) .addClass ("bird-angry");));));

Done! Testing animation

That's it! Our bird is ready and has brought life to the page with its animation! :) You can watch the demo. Download an archive with an example - at the bottom of the article.

Sprites are a pretty interesting and simple technology. Now I will tell you a little more about it.

What are CSS sprites?

In short, CSS sprites are several images in one file. There is only one file, and there are several images inside it. At the same time, it is completely invisible to the visitor. Anyone who views the site thinks that he sees several separate pictures.

Why is this needed? Sprites reduce the number of page requests from the user and reduce the overall size of images. As a result, the visitor will see the site faster.

How it's done? A regular picture increases in width and height, that is, several images are simply placed side by side on a regular picture. Then each individual image from this set is substituted into the required block with a given width or height so that all other images cannot be seen. The entire set is cropped and only one picture remains. One sprite. All other pictures remain outside the specific block.

To make it clearer, I will give an analogy. Imagine looking through a keyhole. You only see a separate piece of the room on the other side of the door. If you move a little to the side and look into the hollow from a different angle, you will see some other piece of the same room.

Terminology

In order not to get confused, let's immediately define the terms:
Sprite is one picture from a file with several images.
Sprite set is the file itself with multiple images.

Features of using sprites

When should you use sprites? In general, the answer is one - sprites should be used if you have a lot of small images on your page. It doesn't matter what kind of images they are. If you have many gradients with the same arrangement, many buttons, many icons, etc. If there are a lot of small images on some particular page, then you can think about using sprites.

As a rule, there are three types of pictures on the page - jpg, png and gif. All of these formats have two download modes - regular and progressive download.

The jpg format can be regular (basic) and progressive (progressive). In normal mode, the picture starts to be displayed line by line as it is loaded and immediately in good quality. In progressive mode, the entire jpg image is loaded at once, but in poor quality and the quality increases as it is loaded.

The gif and png have the same behavior. GIF can be regular or interlaced. PNG can be regular or interlaced. Interlaced gifs and pngs behave similarly to progressive jpg. This behavior increases the file size slightly.

Total. The image may appear on the page immediately, or it may appear with a delay. This is important to know about sprites. It is desirable to make sprites interlaced or progressive. The user should see the pictures as quickly as possible, albeit in poor quality.

But! If the final file with all the sprites is too large, then despite all the progressiveness and interlacing, the visitor will have to wait even for a partial download of the file. Therefore, I do not recommend using large sprite sets. If the file is large, then the whole point of sprites is completely lost - to speed up the site. With large sets of sprites, the user will have to wait as much, if not more, as with regular split images.

Files over 30 kilobytes seem large to me. This is subjective. You may have some idea about the size of the file. A 30 kilobyte file will download in about 7 seconds at an internet speed of 56.6 kbps.

Examples of using sprites

Sprites with icons

In one sprite I will have icons for:

1. List box - one icon
2. Links - three icons
3. Search Forms - One Icon

That is, my first set of sprites will contain five images. All my pictures will be the same size - 16 by 16 pixels. You can make images with different resolutions with sprites, it is not necessary that the resolution of all images is the same. At different resolutions of pictures, it becomes a little more difficult to combine these pictures into one file.

As a result, the first example will look like this:

I found five icons. Then I simply combined them all in one file. Here is the file I ended up with:

Draw your attention. In this case, the icons are not located closely, there are small indents between them. How do you find these indents? You can, of course, calculate everything by pixels, but our case is quite simple, so here it is best to select these margins in the picture experimentally. First, we combine the images just by eye, then we take the topmost image, put it in the right place. If the picture is in its place, but at the same time a piece of another image is sticking out from somewhere, then the indentation needs to be increased.

One more point. The last icon for the list is the green arrow. Why is she the last one? We do not care about the location of the remaining icons in the picture, but any item in the list can take up several lines, and if the green arrow is somewhere in the middle, then other pictures will stick out on the next lines. Take a look at the picture of the list above to see what I'm talking about.

So. I found five icons, combined them into one file. What do we do next? Of course, we write the code:

• List item
• Another item on the list
• List item
• Another item on the list,
  but in two lines
• List item
• Another item on the list

This is the html code of the list. Now let's apply our sprite to it:

Ul li (padding: 0 0 0 21px; background: url ("sprites.png") 0 -94px no-repeat;)

What have we done here? Indent each