CSS sprity

CSS sprity jsou s námi, tak jako ikonové fonty, pěkně dlouhou dobu. Zhruba od roku 2006. Sprity byly v prvopočátku svého vzniku používány především ve hrách, kde se do jednoho souboru vložily obrázky všech objektů ve hře a tím se šetřil výkon procesoru.

Ve chvíli, kdy se webové stránky staly náročnými na objem dat přenášených v síti, jsme si začali uvědomovat, že je lepší vytvořit jeden větší soubor než desítky menších. Ulehčí to stahování dat, kdy rázem nemusíte vytvořit desítky requestů pro jednotlivé soubory, ale v kuse stahujete jeden soubor.

Ve větším měřítku ušetříte na velikosti souboru. Stačí vyexportovat jeden obrázek a při manipulaci se soubory máte stále jeden název a jednu cestu k souboru. Problém může pro někoho nastat, pokud bude velmi často měnit obrázky, ale to se liší projekt od projektu. Pokud navrhujete sprite dopředu a víte, že se bude často měnit, není problém si obrázek rozdělit na sekce. Např. prvních 300 px na výšku můžete vyhradit pro ikony, další 300 px pro tlačítka atp.

Aplikace je poměrně jednoduchá. Provádí se stejně jako u klasických pozadí s tím rozdílem, že je třeba definovat background-position a vybrat hodnoty podle pozice vašeho obrázku ve spritu.

					#logo {
						height: 51px; 
						width: 101px; 
						background: url("img/sprite.png") no-repeat; 
						background-position: 0 -166px; 
					}
				

Obrázek se nalézá 166 px od horního okraje a 0 px od levého. Pokud bychom chtěli objekt napravo od loga, stačí malá úprava:

background-position: -101px -166px;

Výběr zůstane na jednom řádku, ale posune se doprava (o šířku loga). Pokud máte několik objektů stejně velkých a dobře zařazených do mřížky, následné kódování se značně urychlí. Na jednom řádku můžete mít několik stavů tlačítek nebo obrázků, kdy při levém okraji máte základní obrázek a napravo od něj hover a active.

 

komentovat

 

21.05.2013 - 12:58

 

 

Meebio