Eenvoudig CSS-sprites maken

Wanneer we het over performante sites hebben, komen CSS-sprites vaak ter sprake. Het aantal requests is bepalend voor de performantie van een website. Elk extern bestand dat ingeladen wordt, is een r equest. Hoe lager het aantal request, hoe sneller je site. In dat opzicht is het beter één afbeelding te laden dan tientallen verschillenden. Via CSS kan je één bepaald stuk van een afbeelding tonen. Dit is het concept van CSS sprites. Je kan er gratis maken op http://wearekiss.com/spritepad

Een voorbeeld van een CSS sprite. Alle afbeeldingen in één afbeelding:

Ga naar http://wearekiss.com/spritepad.

Belangrijk: de site werkt enkel onder de browsers Chrome en Firefox

Klik op Get started of ga naar http://spritepad.wearekiss.com/

Sleep alle aparte figuren op het grid.

Aan de rechterkant verschijnt de code. Per figuur krijg je een klasse die je op die manier kan tonen.

Druk op Download. Je krijgt nu de spritefiguur en de nodige code.

Zo kan je de figuren invoegen. Indien je een link wenst te maken, kan dat via een transparante figuur:

<div class="twitter"><a
      href="#"><img src="images/leeg.png"
      /></a></div>
<div class="pinterest"><a href="#"><img src="images/leeg.png" /></a></div>
<div class="rss"><a href="#"><img src="images/leeg.png" /></a></div>
<div class="login"><a href="#"><img src="images/leeg.png" /></a></div>

Een mogelijk resultaat:

Gerelateerd:

o   Test of je website performant is via PageSpeed Tools

o   Hoe bekom je een snellere website?

Meer van dit lekkers

BEKIJK ALLE TUTORIALS!

Sharing is caring

Iets bijgeleerd? Deel deze tutorial!

U bent niet alleen

deze pagina
totaal

© 2000 - 2016 Zelfstudie.be - Alle rechten voorbehouden

Website laten maken: kerfuffle.be - Website publiceren: zelfhosting.com