A sprite egy olyan kép, amely sok kisebb képet tartalmaz, például ikonokat, akár több tízet, sőt, százat. Vagyis a rengeteg kép helyett csak egyetlen képnek kell letöltődnie a látogató gépére, ami felgyorsítja az oldal betöltődését.

Számos megoldás van sprite készítésére, ha rákeresel hogy css sprite generator, akkor találhatsz jó sokat.

Hogy legyen egy konkrét példa, ez is egy ilyen program. Előnye, hogy el lehet menteni a sprite összeállításokat ("Save project"), mint projekt és később meg lehet nyitni ("open"), módosítani és annak megfelelően legyártja az új CSS kódokat.



A kezdéshez csak húzd a képeket a bal oldali dobozba, vagy



A generálandó CSS class módosítható, ha egy képet kiválasztasz.




Combined Image Filepath: hova kerüljön a sprite

Combined Image URL: a CSS-ben lévő háttérkép url

Label: megjegyzés a CSS-ben

Ha minden kész, akkor "Generate".

Ilyesmi lesz a CSS:

/* iconfinder_-38_3057674.png */
.sprite1
{
background:url('/images/css-sprites.png') -128px -0px;
display:inline-block;
width:128px;
height:128px;
}

/* iconfinder_Twitter-icon_380450.png */
.sprite2
{
background:url('/images/css-sprites.png') -256px -0px;
display:inline-block;
width:128px;
height:128px;
}

De minta HTML-t is generál.

Érdekel a webfejlesztés, weboldalak készítése?

Kattints ide oktató videókért!