Deze tutorial maakt deel uit van een serie van vijf:
- Menu met achtergrondafbeeldingen (Zelfstudiehandboek pag.331)
- Gepositioneerd menu (Zelfstudiehandboek pag.333)
- Menu met sprites
- Elastic menu met afbeeldingen (Zelfstudiehandboek pag.334)
- Sprites met clips
In het artikel http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html staat beschreven hoe je met de CSS eigenschap clip op basis van één afbeelding meerdere thumbnails kunt maken op een pagina. Voordeel is, net als bij CSS sprites, dat één afbeelding waarin de verschillende losse afbeeldingen van een pagina zijn geplaatst, minder kB's heeft dan de losse afbeeldingen. Bovendien is er slechts één http-request nodig, dit zal altijd laadtijd schelen in vergelijking met een http-request voor iedere afbeelding afzonderlijk.
In het voorbeeld hieronder zie je een simpele opzet waarin het principe is toegepast. De vier iconen maken deel uit van één en dezelfde afbeelding, met de eigenschap clip in CSS worden de andere iconendie ook op de afbeelding staan steeds verborgen zodat slechts het gewenste deel van de afbeelding in beeld komt. Kijk in de code als je wilt weten hoe het is gedaan.
Bewerk- Verwijder
- Terug
- Vooruit
Zie ook de tutorials over clip op www.webdesignerwall.com en http://css-tricks.com/css-sprites-with-inline-images/.
Helaas is clip niet geschikt voor Mobile Web, het wordt niet goed weergegeven.