CSS Sprite – maakt je leven (en site) gemakkelijker!

Als je een menubalk hebt met knoppen, heb je meestal diverse standen van een knop: de gewone stand, een mouseover stand en een stand als de knop actief is. Drie afbeeldingen zou je denken voor drie standen. Je kunt het echter ook met één afbeelding en wat CSS voor elkaar krijgen. Een techniek die je op veel meer plaatsen en voor meer doeleinden kunt toepassen.

Voordelen van het gebruik van een sprite
Het gebruik van een sprite heeft heel wat voordelen:
1) je hoeft maar één afbeelding te onderhouden
2) je hoeft maar één afbeelding in te laden die ook nog eens kleiner is (waardoor je website sneller inlaadt)
3) het ziet er in Internet Explorer beter uit (geen flikkering bij een mouseOver)
4) en je kunt alles met CSS regelen
Dus, hoe werkt het en hoe kan je die zelf maken?

Hoe ziet een sprite eruit?
Een goed voorbeeld van een sprite is die van Google. Zoals je ziet is deze afbeelding een combinatie van maar liefst 24 afbeeldingen van een Google pagina. Ze staan heel strak op elkaar maar worden met behulp van CSS op de juiste manier getoond.

Hoe werkt een sprite?
Een sprite laad je in als een achtergrondafbeelding. Afhankelijk van het plaatje dat je wilt laten zien verschuif je je achtergrond naar links, rechts, boven of onder. De breedte die je instelt bepaalt hoe groot het deel is dat je laat zien. Een voorbeeld:

.csb, .ss {
background:transparent url(/images/nav_logo4.png) no-repeat scroll 0 0;
display:block;
height:26px;
}

2</a>

Deze code gebruikt Google om boven de 2 (de link naar de volgende pagina onderaan de zoekresultaten) alleen de O van het woord Google te laten zien. Via het stylesheet was de achtergrondafbeelding aangeven met een hoogte van 26px (niet herhalend). De achtergrondpositie van de sprite wordt vervolgens gezet op -60px (de startpositie van de gele O vanaf de linkerkant) en de breedte op 16px (dat is precies de breedte van de gele letter O).
Als je voor een hyperlink bij mouseover (a:hover) een andere classe gebruikt kan je dit effect ook bewerkstelligen bij menu's…

Hoe maak je een sprite?
Het maken van een sprite kan bijvoorbeeld met programma's als Photoshop/Imageready of Fireworks. Zet elke losse afbeelding binnen een layer en rangschik dit net zolang totdat het een zo klein mogelijke afbeelding is. Pas hierna je stylesheet hierop aan.
Heb je hier geen zin in? Probeer dan eens een online alternatief, zoals van WebsitePerformance (meer hierover later).

Stem / Bookmark [?]

Vind je dit interessant? Neem dan een abonnement op mijn RSS feed [?] of e-mail service!
Heb je er veel aan gehad? Overweeg dan een donatie voor Dejana van Houten.
Heb je suggesties, aanvullingen of vragen? Reageer hieronder!