In CSS heb je de mogelijkheid om van elke background-image (achtergrondafbeelding) slechts een stuk te laten tonen door de browser. Door de background-position property heb je de mogelijkheid precies in te defniëren welk deel getoond moet worden. Hierdoor wordt het mogelijk om meerdere losse achtergrondafbeeldingen tot een te voegen omdat je vast kan stellen welk deel getoond moet worden.

Elke losse achtergrondafbeelding die hierin is gezet, is een “sprite”. In CSS kun je definiëren welke sprite wordt gebruikt, vandaar de naam CSS Sprites. Het leuke van deze techniek is dat Internet Explorer 6 het ook goed weergeeft!

Grote websites (google.com, facebook.com) gebruiken deze techniek vaak om de server belasting laag te houden.

In dit artikel ga ik uitleggen (met een simpel voorbeeld) hoe je CSS Sprites kunt toepassen in alledaagse websites. Bekijk de demo.

Update 2010-8-08: verderbouwend op dit artikel heb ik nog een artikel geschreven: CSS Sprites: hoeveel scheelt het in (K)B’s?.

Voorbeeld: een link

We beginnen met het maken van een link die we omstijlen tot een knop. Dit voorbeeld werkt in alle moderne browsers:

• Internet Explorer 6+
• Firefox 2+
• Chrome 1+
• Safari 1+
• Opera 8+

1. Ik maak een normale link (tekst “download”) erin. Ken deze link de property

2. display:block; toe zodat een breedte en hoogte definieerbaar wordt:

3. width="98px" en height="29px". Hier voegen we de property

4. background:url(images/jouw_afbeelding); toe waarin we definiëren welke afbeelding we willen gebruiken.

Zoals hieronder (figuur 1) te zien is, staat de tekst “download” nog in de link. Deze tekst verplaatsen we buiten het block zodat deze niet meer zichtbaar is door de property text-indent:-9999; te definiëren.

Normaal wordt de property text-indent gebruikt om de het eerste woord van een tekst te laten inspringen. Door een negatieve waarde te definiëren, wordt de tekst buiten het scherm getoond. Experimenteer ermee als je er nog geen ervaring mee hebt.

5. Voeg nu text-indent:-9999px; toe. “download” valt nu buiten het scherm.

Als je text-indent:-9999px; vastzet, dan zal Mozilla Firefox een outline tonen wanneer je op de knop klikt (figuur 2). Om dit te voorkomen definiëren we

6. outline:none; vast.

Zie figuur 3 voor het resultaat. Deze code is gebruikt:

.example-one a { display:block; width:98px; height:29px; outline:none; background:url(images/download-button_bg.png) no-repeat; text-indent:-9999px;}

Nu de hover, active/focus state toevoegen

• a:hover state gaat in wanneer de cursor boven het element hangt (hover)
• a:active state gaat in wanneer geklikt wordt op het element (active)
• a:focus state gaat in wanneer er geklikt was op het element (focus dus). Als er op een ander element wordt geklikt, gaat dit element weer terug naar de normal state.

In feite gaat zijn de hover, active en focus ‘gemoedstoestanden’ waarin de link kan verkeren. Deze gemoedstoestanden kun je allemaal los vormgeven geven.

Hierboven werd duidelijk dat het mogelijk is dat er slechts een stukje van de background wordt getoond. Door background-position kunnen we dit aanpassen.

background-position: (naar) links* (naar) beneden**;

Het aantal pixels (of andere eenheden) dat de achtergrond:

* naar links schuift,

** naar beneden schuift.

Je kunt ook negatieve waarden invullen waardoor een omgekeerde effect optreedt. Dit gaan wij nu doen.

De knop is 29px hoog en in figuur 4 is te zien dat direct onder de “normal state” de “hover state” zit. De background moet dus 29px omhoog verschuiven in de “hover state”.

Om de background-image 29px omhoog te schuiven en moeten we dus background-position:0 -29px; invullen bij de “hover state”.

7. Vul bij de a:hover de property background-position:0 -29px;.

Zie figuur 5 voor het effect wat bereikt is met het onderstaande stukje script:

.example-two input:hover { background-position:0 -29px;}

Nu gaan we de active en focus state toevoegen zodat duidelijk te zien is dat er op de knop ‘geklikt’ is. We passen dezelfde techniek toe als bij de “hover state”.

8. Vul bij a:active, a:focus de property background-position:0 -58px; in.

Met dit stukje code hieronder bereiken we wat in figuur 6 te zien is.

.example-one a:active, .example-one a:focus { background-position:0 -58px;}

Dat is alles! Hoewel dit een relatief simpel voorbeeld is, laat het goed zien wat mogelijk is met CSS Sprites. Dit kan een goede optimalisatie betekenen voor jouw website! Zowel de gebruiker als servers profiteren hiervan.