Semuanya tentang CSS "Sprites"

Berikut ini cara atau tutorial untuk membuat "sprites" image, baik itu untuk menu dan lainnya. Penggunaan CSS Sprites ini pertimbangannya untuk mempercepat akses dibanding dengan penggunaan image terpisah.

Ini salah satu contoh sederhana penerapan "sprites", untuk "image hover". Kunci dari penerapan sprite ini pada "background position", lihat pada penerapan berikut:



code css:

#menu .beranda a {
width: 29px;
height: 29px;
text-indent: -9999px;
display: block;
overflow: hidden;
background: url(http://lh3.ggpht.com/_dfnTVAxeWMI/SjJbyLZoDXI/AAAAAAAAA64/JDeHssaGv4Y/home.gif) 0 0 no-repeat;
}

#menu .beranda a:hover {
background-position: 0 -29px;
}

Alamat tutorial dan penerapan "sprites" lainnya:

CSS Sprites: Image Slicing’s Kiss of Death

CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

Accessible and Search Engine Friendly Image Rollover with CSS and Sprites

Creating & Using CSS Sprites

How to Create a CSS Menu Using Image Sprites

Image Sprite Navigation With CSS

Advanced CSS Menu

Animated GIF For CSS Sprites

Fast Rollovers Without Preload

How to use CSS Sprites (video)

How to Use CSS Sprites (video)

CSS Sprites Generator

CSS Sprite Generator

lihat juga: The Mystery Of CSS Sprites: Techniques, Tools And Tutorials

Posted in: CSS / HTML,Tutorial