Koncept škriatkov existuje už nejaký čas. Je to jedna z najbežnejšie používaných techník v hernom priemysle na urýchlenie procesu zobrazovania animácií na obrazovke. V tomto článku sa zameriame predovšetkým na to, ako nám táto technika môže pomôcť zlepšiť dojem používateľa na webových stránkach pomocou CSS Sprites v nasledujúcom poradí:
- Čo je to škriatok?
- Čo je CSS Sprite - rýchly prehľad?
- Príklad toho, ako pomáha pri vývoji webu?
- Výhody použitia CSS Sprites
- Čo musí vývojár urobiť pri práci s CSS Sprites?
- Ako vytvoriť Sprite hárok CSS?
- Ako pracovať s CSS Sprites?
- Spoločnosti využívajúce CSS Sprites
Čo je to škriatok?
Sprite je jediný obrázok, ktorý je súčasťou väčšej scény v hre. Viacerí skřítci sa potom skombinujú do veľkého obrázka, ktorý sa nazýva škriatok. Akonáhle je hárok sprite vložený do pamäte, v rýchlom slede sa vykreslia rôzne skřítci, aby vytvorili ilúziu animácie. Toto sa deje súčasne pre desiatky až stovky rôznych duchov, aby sa vytvorila scéna v hre.
Základnou myšlienkou je, že načítanie obrázka a zobrazenie jeho časti je oveľa rýchlejšie v porovnaní s načítaním a zobrazením viacerých obrázkov, kedykoľvek je to potrebné.
Čo je CSS Sprite: rýchly prehľad?
Sprite CSS je technika, ktorú často používajú weboví vývojári na optimalizáciu výkonu webových stránok. V tejto technike sa kombinuje viac menších obrázkov zvyčajne rovnakých rozmerov do jedného veľkého obrázka s názvom a škriatok alebo sada dlaždíc . Tento spriteový list sa potom používa na zobrazenie jednotlivých prvkov všade, kde ich potrebujeme.
Prvky ako logá, navigačné šípky, tlačidlá sú zvyčajne zahrnuté v sprite liste, pretože majú takmer rovnaké rozmery a na webovej stránke sa často používajú.
Príklad toho, ako pomáha pri vývoji webu?
Spravidla sa pri navrhovaní webových stránok obrázky ukladajú a používajú ako jednotlivé súbory. Keď teda používateľ otvorí webovú stránku, musí prehliadač vytvoriť požiadavku HTTP pre každý z týchto súborov, stiahnuť ich samostatne a zobraziť ich. To vedie k vyšším časom načítania stránky, pretože konkrétna webová stránka môže obsahovať veľké množstvo menších obrázkov, ako sú tlačidlá, ikony a logá.
Sprites CSS pomáhajú vývojárom spojiť tieto často používané malé obrázky do jedného veľkého obrázka. Prehliadač potom musí stiahnuť iba jeden súbor, na ktorý je potom zvyknutýzobrazte požadovanú časť posunutím obrázka.
Výhody použitia CSS Sprites
Existujú dve hlavné výhody použitia skriptov CSS oproti normálnym obrázkom:
Rýchlejšie načítanie stránky: Zvyšuje čas načítania stránky, pretože obrázky použité na webovej stránke sa zobrazia hneď po stiahnutí hárka.
Vyššia priepustnosť a nižšie využitie zdrojov: Nielen táto technika zlepšuje dojem koncového používateľa vďaka rýchlejšiemu načítaniu stránky,ale tiež znižuje preťaženie siete, pretože sa vytvára menší počet požiadaviek HTTP.
Čo musí urobiť vývojár pri práci s CSS Sprites?
Pri práci s jednotlivými obrázkami môže vývojár jednoducho pracovať so značkou HTML a podľa potreby ho upravte v CSS. Pri práci s CSS Sprites však musí vývojár urobiť dve konkrétne veci:
anonymná trieda v jave]
- Vytvorenie Sprite Sheet
Pri vývoji webovej stránky, ak sa vývojár rozhodne použiť spritov CSS, musí najskôr vytvoriť sprite list zlúčením všetkých požadovaných prvkov, ako sú tlačidlá, logá atď., Do mriežkového vzoru. To je možné vykonať pomocou ľubovoľného programu na úpravu obrázkov, ako je Photoshop alebo Gimp. Existuje tiež veľa online nástrojov, ktoré vám pomôžu vytvoriť sprite list. Tieto nástroje sú popísané ďalej v tomto článku.
- Prístup k určitému prvku sprite pomocou Pozícia CSS na pozadí nehnuteľnosť
Keď je hárok Sprite pripravený, musí vývojár pomocou atribútov CSS získať prístup k rôznym častiam hárka.
- šírka: Šírka sprite
- výška: Výška sprite
- pozadie: Odkaz na sprite list
- Pozícia na pozadí: Ofsetové hodnoty (v pixeloch) pre prístup iba k požadovanej časti tabuľky sprite
Ako vytvoriť Sprite hárok CSS?
Na zoradenie menších obrázkov do mriežky môžete použiť akýkoľvek softvér na úpravu obrázkov, ale nižšie sú popísané dve jednoduchšie metódy:
1. Online nástroj na tvorbu Sprite Sheet
ODKAZ: toptal.com/developers/css/sprite-generator/
Tento nástroj je nielen zadarmo použiteľný, ale tiež vám poskytne požadovaný kód CSS, ktorý je možné použiť pri odkazovaní na sprite list. Môžete sa tiež popasovať s rôznymi vlastnosťami, ako je polstrovanie medzi prvkami a zmena ich zarovnania.
2. Generovanie Sprite Sheet s Sprity
Ak používate Grunt, Node alebo Gulp, môžete si nainštalovať balíček s názvom Sprity, ktorý vám pomôže vytvoriť sprite list v rôznych formátoch, ako sú PNG, JPG atď.
Najskôr budete musieť nainštalovať Sprity pomocou:
npm install sprity -g
Potom na vygenerovanie sprite listu použite nasledujúci príkaz:
sprity ./output-directory/ ./input-directory/*.png
Ako pracovať s CSS Sprites?
V tomto príklade použijeme nasledujúci sprite list:
Ako vidíte na obrázku vyššie, šesť ikon (Instagram, Twitter a Facebook) je usporiadaných do mriežkovitého vzoru. V prvom riadku máme normálny stav a v druhom rade máme ich stav vznášania (obrázok, ktorý sa objaví, keď na ne umiestnime kurzor myši).
Ak ste vytvorili sprite list pomocou nástrojov, o ktorých sme hovorili vyššie, potom už viete, aké sú korekcie požadované v CSS, ale ak ste použili iný nástroj alebo ste dostali nejaký sprite sheet, nebojte sa, budeme diskutovať o metóde, ktorá vám pomôže získať kompenzácie pre požadovaný prvok.
Pozrime sa teraz na veľmi jednoduchý spôsob, ako získať požadované vyrovnania pre každú zo šiestich ikon pomocou programu MS Paint. Možno to nebude ideálne riešenie pre prácu so spritmi, ale pretože má funkciu, ktorá poskytuje súradnice kurzora myši, je možné ju použiť na získanie požadovaných súradníc X a Y.
Najskôr otvorte obrázok listu sprite (mriežka obsahujúca všetky menšie obrázky) a umiestnite kurzor myši do ľavého horného rohu sprite, ktorého chcete chytiť.
Keď budete mať súradnice ľavého horného bodu vášho sprite (obrázok Instagramu vľavo hore), môžete pomocou kódu CSS zobraziť tohto konkrétneho sprite, kedykoľvek to bude potrebné:
background: url ('img_sprites.png')
Pozícia na pozadí: 0 0
šírka: 125px
výška: 125 pixelov
Používame šírku a výšku ako 125 pixelov, pretože naše ikony majú túto dimenziu. Na získanie nasledujúceho obrázka (Twitter) v rovnakom riadku použijeme nasledujúci kód:
background: url ('img_sprites.png')
Pozícia na pozadí: -128px 0px
šírka: 125px
výška: 125 pixelov
Vo vyššie uvedenom úryvku si všimnite atribút Pozícia na pozadí. (-128px, 0) znamená, že posunieme náš spriteový list doľava o 128 pixelov (berúc do úvahy polstrovanie medzi prvkami) a 0 pixelov na osi Y. Ak by sme mali získať prístup k ikone twitter hover, náš atribút Pozícia na pozadí by bol:
Pozícia na pozadí: -128px -128px
Týmto spôsobom teraz môžeme pristupovať ku každej súčasti našej tabuľky sprite pomocou CSS. Poďme si prečítať kompletný kód HTML a CSS, ako na to.
Krok 1: Písanie požadovaného kódu HTML
V nižšie uvedenom kóde jednoducho pridávame tri odkazy. Prepojíme tiež náš HTML s hárkom štýlov (screen.css).
Krok 2: Písanie potrebných CSS. Najskôr vytvoríme štýl našej zdieľanej triedy ikon. Tu vidíte, že odkazujeme na spriteový list, ktorý sme vytvorili.
/ * Zdieľaná ikona Trieda * /
rozpätie. ikona odkaz,
rozpätie. ikona a: navštívil{
displej:blokovať
odsadenie textu:-9999 pixelov
obrázok na pozadí: url (./ img_sprites.png)
opakovanie pozadia:neopakovať
}
Krok 3: Získanie jednotlivých ikon z tabuľky sprite pomocou vyrovnaní.
/ * Ikona Instagramu * /
span.instagram odkaz,
span.instagram a: navštívil{
šírka:125 pixelov
výška:125 pixelov
Pozícia na pozadí:0 0
}
/ * Ikona Twitteru * /
span.twitter odkaz,
span.twitter a: navštívil{
šírka:125 pixelov
výška:125 pixelov
Pozícia na pozadí:-128px 0
}
/ * Ikona Facebooku * /
span.facebook odkaz,
span.facebook a: navštívil{
šírka:125 pixelov
výška:125 pixelov
Pozícia na pozadí:-257px 0
ako používať triedu skenera v
}
Krok 4: Získanie ikon umiestnenia kurzora z tabuľky sprite pomocou vyrovnaní.
span.instagram a: vznášať sa{Pozícia na pozadí:0 -128px}
span.twitter a: vznášať sa{Pozícia na pozadí:-128px -128px}
span.facebook a: vznášať sa{Pozícia na pozadí:-255px -128px}
Spoločnosti využívajúce CSS Sprites
Mnoho veľkých mien v odbore používa CSS Sprites na zlepšenie odozvy svojich webových stránok. Spoločnosti ako Google, Facebook alebo Amazon túto metódu vo veľkej miere používajú, pretože im pomáha znižovať počet požiadaviek HTTP na reláciu pre konkrétneho používateľa. To je obrovská výhoda, keď vezmeme do úvahy, že tieto spoločnosti v danom okamihu obsluhujú milióny zákazníkov.
Teraz, keď máte prehľad o tom, čo sú CSS duchovia a ako s nimi pracovať, ste o krok bližšie na svojej ceste za učením sa CSS. Koncepty ako skřítci v dnešnej dobe menia hru, pretože pre vývojárov je nesmierne dôležité vyťažiť z webovej stránky každý kúsok výkonu.
Vyskúšajte naše ktorá prináša živé školenie vedené inštruktorom a skúsenosti s projektmi v reálnom živote. Toto školenie vám pomôže získať zručnosti v oblasti práce s webovými technológiami typu back-end a front-end. Zahŕňa školenie zamerané na vývoj webových aplikácií, jQuery, Angular, NodeJS, ExpressJS a MongoDB.
Máte na nás otázku? Uveďte to v sekcii komentárov v blogu „HTML Images“ a my sa vám ozveme.