• 1
  • 2
Home > Tips

What Are CSS Sprites and How to Use CSS Sprites?


Important Note to Beginners: CSS Sprites are really cool; this technology will surely make your webpage load faster, so we highly recommend you to use this technology through SliceMaker products. How to use CSS Sprites with SliceMaker products? You just need to tick the box (Like the picture shown below) to tell the software you will use CSS Sprites before generating your webpage with SliceMaker products and then this technology will be automatically applied to your webpage after the webpage is generated.

(Location: Menu Bar > Tools > Options > Basic)

 

 Knowledge Expansion: What Are CSS Sprites?

It might be a little difficult for you to understand the meaning of CSS Sprites. The name CSS Sprites might be a little misleading, because sprites aren't little images like you might be picturing, a sprite is actually one big image. Have you ever seen the CSS technique where the 'on' and 'off' states of a button are contained within the same image and are activated by shifting the background-position?

Here is an example of that:

 

Think of CSS Sprites as an extension of that technique. The difference is that instead of just two or three images being combined into one, you can combine an unlimited number of images into one. The origin of the term 'sprites' comes from old school computer graphics and the video game industry. The idea was that the computer could fetch a graphic into memory, and then only display parts of that image at a time, which was faster than having to continually fetch new images. The sprite was the big combined graphic. CSS Sprites is pretty much the exact same theory: get the image once, shift it around and only display parts of it, saves the overhead of having to fetch multiple images.

 

 How to Use CSS Sprites with SliceMaker Products?

Although CSS Sprites are cool, many people still cannot understand how to use this technology especially for those who have little skills on programming. Now, things will become much easier with the help of SliceMaker products. The below passage will show you how to use CSS Sprites with SliceMaker products.

1) Open the CSS Sprites setting dialog (Menu Bar > Tools > Options > Basic) and then tick the box to tell SliceMaker Products you will apply CSS Sprites to the webpage that is currently being designed with SliceMaker Products.

2) After finishing designing your webpage with SliceMaker products, please simply generate the webpage and then the CSS Sprites technology will be automatically applied to your webpage.


View the Sample Combined Images after Using CSS Sprites with SliceMaker Products:
http://www.slicemaker.com/images/index/bgs.png



 Contact Us for Help

If you cannot find a proper solution to your issue through the above methods, our support team is always on standby for whatever problems youve got. We promise to you we will deal with your issues within 24 hours. Contact Our Support Team

Whats Next:


Choose a SliceMaker Product to Create a Website on Your Own-30 Day Freetrial
SliceMaker Standard V3.6 - Freeware
SliceMaker Standard V3.6 - Freeware
The anyone-can-master webpage making software. You can create exceptional webpage/website on your own even if you're unfamiliar with webpage making.
$0
$0
SliceMaker Platinum V3.6 - Freeware
SliceMaker Platinum V3.6 - Freeware
The bestselling webpage making software, helps you create exceptional webpage/website without writing complicated CSS and DIV codes.
$0
$0
SliceMaker Deluxe V3.6 - Freeware
SliceMaker Deluxe V3.6 - Freeware
The all-in-one webpage making software, helps you create webpage/website of any style. It's the idea tool to create webpage/website.
$0
$0