CSS Sprites
De CSS sprites techniek is een manier om het aantal HTTP-verzoeken voor afbeeldingsbronnen te verminderen door afbeeldingen in één bestand te plaatsen.CSS afbeeldings sprites
Een sprite is een verzameling afbeeldingen die in één bestand zijn geplaatst. Het laden van een webpagina met veel afbeeldingen kan lang duren en er worden meerdere serververzoeken gegenereerd. Door het gebruik van sprites kunnen we het aantal server verzoeken verminderen, hierdoor is het mogelijk om bandbreedte te besparen.
CSS sprites in één bestand
In plaats van drie afzonderlijke afbeeldingen te gebruiken, gebruiken we een enkele afbeelding zoals hieronder wordt weergegeven:
Met CSS kunnen we precies dat deel van de afbeelding laten zien dat we nodig hebben. In het volgende voorbeeld geven we met CSS aan welk deel van de bovenstaande afbeelding moet worden weergegeven.
Voorbeeld:
.icon_facebook {
display: inline-block;
width: 50px;
height: 50px;
background: url(images/navsprites.png) 0 0;
}
.icon_feeds {
display: inline-block;
width: 50px;
height: 50px;
background: url(images/navsprites.png) -57px 0;
}
Voorbeeld in het kort uitgelegd:
display: inline-block;
width: 50px; height: 50px;
background: url(navsprites.png) 0 0;
CSS naviagtie met sprites
In dit voorbeeld hebben we een navigatie gemaakt van sprites. We hebben dus van een enkele bestand 3 afbeeldingen uitgehaald en er een klikbare menu van gemaakt.
Voorbeeld:
#navlist {
position: relative;
}
#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
#navlist li, #navlist a {
height: 50px;
display: block;
}
#icon_facebook {
left: 0px;
width: 50px;
background: url('images/navsprites.png') 0 0;
}
#icon_feeds{
left: 57px;
width: 50px;
background: url('images/navsprites.png') -57px 0;
}
#icon_linkedin{
left: 114px;
width: 50px;
background: url('images/navsprites.png') -114px 0;
}
CSS sprites en hover effect
We gaan nu een hover effect aan onze voorbeeld toevoegen. Hiervoor gaan we een nieuwe afbeelding gebruiken, deze bevat drie navigatieafbeeldingen en drie afbeeldingen om te gebruiken voor een muis over (hover).
Omdat dit één enkele afbeelding is en geen zes afzonderlijke bestanden, is er geen laadvertraging wanneer een gebruiker de muisaanwijzer op de afbeelding plaatst.
We voegen slechts drie regels code toe om het hover effect te kunnen gerbuiken:
Voorbeeld:
#icon_facebook a:hover {
background: url( 'images/navsprites_hover.png' ) 0 50px;
}
#icon_feeds a:hover {
background: url( 'images/navsprites_hover.png' ) -57px 50px;
}
#icon_linkedin a:hover {
background: url( 'images/navsprites_hover.png' ) -114px 50px;
}
