Na moderních webech najdete velké číslo různé druhy grafiky: obrázky produktů, uživatelské avatary, obrázky tvořící design stránek, tlačítka, ikony, loga atd. A čím větší je projekt, tím více grafických souborů se používá. Když v prohlížeči otevřete samostatnou stránku webu, načtou se všechny její prvky. Proto, když je na něm příliš mnoho grafiky, má tendenci se rychlost načítání výrazně zpomalovat. Což je zase plné nepříjemností pro návštěvníky vašeho projektu.
CSS Sprites
Na domovská stránka K dispozici je formulář pro nahrání grafických souborů (pro každý soubor je samostatné tlačítko). Zpočátku jsou viditelná pouze tři tlačítka stahování. Pokud potřebujete více, klikněte na „Need More“.
Po výběru všech souborů pro budoucí sprite CSS klikněte na tlačítko „Možnosti“. Před vámi se otevře malý panel s nastavením. Zde můžete nastavit odsazení mezi prvky v pixelech, přidat rámeček pro obrázky, zarovnat všechny obrázky v hotovém spritu k levému nebo hornímu okraji a nastavit barvu pozadí ve formátu RGB.
Po kliknutí na tlačítko „Generovat“ okamžitě Tvorba CSS skřítek. Uvidíte také malý návod k použití, konkrétně CSS kód, který budete muset umístit na svůj web. Existuje dokonce příklad v HTML. Myslím, že není problém na to přijít.
Vizuálně je Dan's Tools CSS Sprite Generator docela pěkný generátor CSS sprite s mnoha nastaveními. Můžete si například zvolit vertikální nebo horizontální typ vkládání ikon do celkového obrázku.
CSS Sprites
Ve službě CSS Sprites je vše extrémně jednoduché jak v designu, tak v nastavení. Na výběr je výsledný formát obrázku: PNG, JPEG, GIF. Na stránce je odkaz adaptivní verze generování sprite - Responzivní CSS Sprites (i když jsem to nezkoušel).
Celkový. V zásadě jsme zvážili všechny nuance, jak vytvořit CSS sprity a použít je. Generátory pomohou urychlit proces vytváření prvků, ale můžete si vystačit s Photoshopem. Pokud máte nějaké dotazy, pište do komentářů.
Sprites jsou poměrně zajímavá a jednoduchá technologie. Nyní vám o tom řeknu trochu více.
Co jsou to CSS skřítci?
Stručně řečeno, CSS sprite je několik obrázků v jednom souboru. Existuje jeden soubor, ale uvnitř je několik obrázků. To je přitom pro návštěvníka zcela neviditelné. Někomu, kdo si prohlíží stránky, se zdá, že vidí několik samostatných obrázků.
Proč je to nutné? Skřítci snižují počet požadavků na stránku ze strany uživatele a snižují celkovou velikost obrázků. Díky tomu návštěvník uvidí stránky rychleji.
Jak se to dělá? Obyčejný obrázek se zvětší na šířku a výšku, to znamená, že se na obyčejný obrázek jednoduše umístí několik obrázků vedle sebe. Poté je každý jednotlivý obrázek z této sady nahrazen do požadovaný blok s danou šířkou nebo výškou tak, aby nebyly vidět všechny ostatní obrázky. Celá sada se ořízne a zůstane pouze jeden obrázek. Jeden skřítek. Všechny ostatní obrázky zůstávají mimo konkrétní blok.
Aby to bylo jasnější, uvedu přirovnání. Představte si, že se díváte klíčovou dírkou. Na druhé straně dveří vidíte jen nějaký samostatný kus místnosti. Když se posunete trochu stranou a podíváte se do jeskyně z jiného úhlu, uvidíte nějaký další kousek stejné místnosti.
Terminologie
Abychom se vyhnuli nejasnostem, definujme si ihned pojmy:
Skřítek- toto je jeden obrázek ze souboru s několika obrázky.
Sada Sprite je samotný soubor s několika obrázky.
Vlastnosti použití skřítků
Kdy byste měli použít sprity? Obecně existuje jedna odpověď – sprajty byste měli používat, pokud máte na stránce mnoho malých obrázků. Nezáleží na tom, o jaký druh obrázků jde. Pokud máte hodně přechodů se stejným umístěním, hodně tlačítek, hodně ikon atd. Pokud je na konkrétní stránce mnoho malých obrázků, můžete zvážit použití sprajtů.
Na stránce jsou obvykle tři typy obrázků – jpg, png a gif. Všechny tyto formáty mají dva režimy stahování – normální režim a režim postupného stahování.
Formát jpg může být běžný (základní) nebo progresivní (progresivní). V normální mód obrázek se začne zobrazovat řádek po řádku při načítání a okamžitě dobrá kvalita. V progresivním režimu obrázek jpg Stahuje se celý najednou, ale ve špatné kvalitě a se stahováním se kvalita zvyšuje.
Gif a png mají stejné chování. GIF může být pravidelný nebo prokládaný. PNG může být pravidelný nebo prokládaný. Chování prokládaných gifů a png je podobné jako u progresivních jpg. Toto chování mírně zvětší velikost souboru.
Celkový. Obrázek se může na stránce objevit okamžitě, nebo se může objevit se zpožděním. To je důležité vědět, pokud jde o skřítky. Je vhodné vytvořit skřítky prokládané nebo progresivní. Uživatel by měl vidět obrázky co nejrychleji, i když ve špatné kvalitě.
Ale! Pokud je výsledný soubor se všemi sprajty příliš velký, pak si přes veškerou progresivitu a prokládání bude muset návštěvník počkat i na částečné stažení souboru. Proto nedoporučuji používat velké sady sprajtů. Pokud je soubor velký, pak se celá podstata skřítků úplně ztrácí - zrychlit web. S velké sady Uživatel bude muset na sprity čekat stejně dlouho, ne-li déle, jako při použití běžných samostatných obrázků.
Soubory nad 30 kilobajtů se mi zdají velké. To je subjektivní. Můžete mít své vlastní představy o velikosti souboru. Soubor o velikosti 30 kilobajtů se stáhne přibližně za 7 sekund s rychlostí internetu 56,6 kbps.
Příklady použití skřítků
Skřítci s ikonami
V jednom sprite budu mít ikony pro:
- Seznam - jedna ikona
- Odkazy - tři ikony
- Vyhledávací formuláře - jedna ikona
To znamená, že moje první sada skřítků bude obsahovat pět obrázků. Všechny moje obrázky budou mít stejnou velikost – 16 x 16 pixelů. Sprites lze použít k vytvoření obrázků s různým rozlišením, není nutné, aby se rozlišení všech obrázků shodovalo. S různými rozlišeními obrázků je trochu obtížnější spojit tyto obrázky do jednoho souboru.
Ve výsledku bude první příklad vypadat takto:
Našel jsem pět ikon. Pak jsem je všechny jednoduše spojil do jednoho souboru. Toto je soubor, u kterého jsem skončil:
Upoutat vaši pozornost. V tomto případě nejsou ikony umístěny blízko, jsou mezi nimi malé odrážky. Jak vybrat tyto odrážky? Vše můžete samozřejmě spočítat pixel po pixelu, ale náš případ je docela jednoduchý, takže zde je nejlepší vybrat tyto odrážky v obrázku experimentálně. Nejprve obrázky spojíme pouhým okem, poté vyfotíme nejvyšší obrázek a vložíme jej na správné místo. Pokud je obrázek na svém místě, ale zároveň odněkud trčí kousek jiného obrázku, pak je potřeba odsazení zvětšit.
Ještě jedna věc. Poslední ikonou v seznamu je ikona seznamu – zelená šipka. Proč je poslední? Umístění zbývajících ikon na obrázku je nám lhostejné, ale v seznamu může kterákoli položka zabírat několik řádků a pokud je zelená šipka někde uprostřed, na dalších řádcích budou trčet další obrázky. Podívejte se na obrázek výše, abyste viděli, o čem mluvím.
Tak. Našel jsem pět ikon a spojil je do jednoho souboru. co budeme dělat dál? Kód samozřejmě napíšeme:
- Položka seznamu
- Ještě jedna položka seznamu
- Položka seznamu
- Ještě jedna položka seznamu
ale ve dvou řádcích - Položka seznamu
- Ještě jedna položka seznamu
Tento html kód seznam. Nyní na to použijeme našeho sprite:
Ul li( padding:0 0 0 21px; background:url("sprites.png") 0 -94px no-repeat; )
Co jsme tady udělali? Každý odsazený
Skončeme se seznamem. Nyní vytvoříme odkazy přibližně stejným způsobem:
A( padding:0 0 0 20px; background:url("sprites.png") 0 -42px no-repeat; ) a( padding:0 0 0 20px; background:url("sprites..png") 0 -21px neopakovat ;)
Co znamenají selektory a? Tento selektor zřejmě nutí prohlížeč, aby se použil tento styl na všechny odkazy, které mají atribut href, jehož hodnota začíná řádkem http://site/. Samotný sprite se používá v podstatě stejným způsobem jako v případě seznamu. Budu zvažovat pouze jeden odkaz - odkaz na můj blog.
- Definujeme požadovaný odkaz by href.. Můžete jednoduše přiřadit třídu k požadovanému odkazu nebo přidat styly do atributu style přímo v html kódu. Nebo identifikujte požadovaný odkaz pomocí jakékoli jiné metody.
- Od levého okraje konkrétního odkazu uděláme okraj 20 pixelů
- Uveďte jako obrázek na pozadí obrázek skřítci.png
- Obrázek, který jsem vybral pro svůj blog, je 21 pixelů od horního okraje, což znamená, že musíme posunout pozadí o 21 pixelů dolů. V css jsem to napsal takto: "0 -21px"
Domácí práce
Skřítci s přechody
Nyní se podívejme na druhý příklad. 
Tento obrázek ukazuje okno. Okno má záhlaví, tělo a zápatí. Každý z těchto prvků má nastaven gradient pozadí. Podívejte se blíže, pokud to není okamžitě vidět, dochází k barevnému přechodu od světlé po sytou.
Ukážu vám, jak lze z přechodů v tomto okně vytvořit skřítky. Záhlaví a zápatí okna bude mít pevnou výšku – 30 pixelů. Tělo okna se roztáhne v závislosti na délce textu.
Nyní napíšeme html kód pro okno:
Začněme používat sprajty. Začněme názvem okna:
#window-header( height:30px; background:#C0C0FF url("gradients.png") 0 0 repeat-x; )
V souboru gradients.png je nejprve přechod pro záhlaví, poté pro tělo a poté pro spodní řádek. To znamená, že sklon pro titul začíná úplně shora. Proto jednoduše nastavíme samotný soubor jako pozadí a polohu označíme jako „0 0“, tedy nikam neustupovat. Chcete-li, aby se přechod roztáhl vodorovně, napište „repeat-x“.
Chcete-li zajistit, aby se celý přechod vešel do záhlaví, nastavte výšku na 30 pixelů.
Nastavíme přechod pro zápatí stejným způsobem jako pro záhlaví:
#window-footer( height:30px; background: #C0FFC0 url("gradients.png") 0 -60px repeat-x; )
Pouze tentokrát posuneme obrázek o 60 pixelů dolů.
Složitější je situace s tělem okna. Naše tělo se na rozdíl od hlavičky a zápatí protáhne. To znamená, že pokud jednoduše uděláme jeden div pro tělo okna a vložíme tam přechod, pak se v tomto divu objeví všechny přechody najednou. Případně můžeme přechod pro tělo umístit svisle jako poslední, ale co když máme několik přechodů pro bloky, které se táhnou? Nemůžete dělat všechno najednou. Uděláme to trochu chytřeji.
CSS kód bude následující:
#window-body( position:relative; ) #window-body-gradient( position:absolute; left:0; top:0; width:100%; height:30px; background:url("gradients.png") 0 - 30px repeat-x; ) #window-body-text( position:relative; )
Nyní vám řeknu podrobněji, co jsme zde dělali. Zde je samostatně html kód těla okna:
Jak vidíte, máme v těle zasazené další dvě divy. První "window-body-gradient" bude zodpovědný za gradient. Druhý „text těla okna“ je pro text. Navíc, jak je zřejmé z kódu CSS, jsme použili pozici: relativní; pro celé tělo okna.
Pro přechodový div zadáme position:absolute. Tím jsme vyřadili gradient div z obecného toku. Nyní tento div nemá na nic vliv. Vzhledem k tomu, že jsme zadali pozici: relativní pro celé těleso, přechod div nepluje nikam dále než rodič. Připevněte jej k levému a hornímu okraji tělesa okna pomocí „left:0; nahoře: 0;". Nastavte výšku přechodu div na 30 pixelů. To znamená, že zde uvedeme výšku gradientu, který připojíme, pokud je výška divu větší než výška gradientu, tak v divu trčí další sprajty. A nakonec připojíme náš soubor gradients.png k přechodu div. Jako obvykle posuneme pozadí o požadovanou vzdálenost nahoru, v tomto případě posuneme pozadí o 30 pixelů nahoru.
Nyní máme v těle okna přechod. Ale to zakrývá text. Abychom zabránili zakrytí textu, zalomíme celý text do prvku div a přiřadíme mu pozici: relativní. Po přiřazení bude text nad přechodem.
To je v podstatě vše. Nyní jsme umístili všechny přechody do našeho okna. A v záhlaví, v těle a ve sklepě.
Dělám tak dlouhé vysvětlování, aby bylo vše naprosto jasné. Ale ve skutečnosti, pokud víte trochu o rozložení, pak vám pravděpodobně bude stačit podívat se na samotné příklady:
Ještě jednou jsem duplikoval odkaz.
Ve skutečnosti můžete přijít s mnoha příklady použití skřítků. Ukázal jsem pouze dva příklady, ale tyto příklady by měly stačit k pochopení toho, jak skřítci fungují. Pokud máte nějaké dotazy, ptejte se v komentářích.
Líbilo se:
27
Nelíbí se: 4
Žádný překlad není k dispozici.
skřítek
před nebo po"před""po""po"
rozzlobený pták naštvaný.png. index.html
UTF-8 index.html Windows-1251 styl.css rozzlobený pták
http://spritecow.com
naštvaný.png,
rozzlobený pták soubor stylu styl.css imgs/. Mám to takhle:
Žádný překlad není k dispozici.
Sprite CSS jsou grafiky pro váš web, sloučené do jednoho grafického souboru. "Proč jeden soubor?" - ptáš se. Faktem je, že tento přístup k ukládání obrázků vám umožňuje zlepšit výkon webových stránek a také ukládat grafické obrázky organizovanější. Pojďme se podívat na některé osvědčené postupy pro používání skřítků. Samotný název skřítků vám může připomínat herní skřítky, retro herní konzole a dokonce i prohlížeče, které jsou dnes tak populární:
Platí tedy pro web design, skřítek- to je jen jeden velký soubor, obsahující několik obrázků pro váš web, což šetří čas na stahování a přenos souboru po síti. Když sprite například obsahuje 20-30 obrázků, může to výrazně ulehčit zatížení serveru, protože pokud by byly tyto obrázky uloženy odděleně, musel by server provést 20-30 samostatných požadavků na získání každého takového obrázku. Díky spritu je na server odeslán pouze jeden HTTP požadavek - pro přijetí jednoho obrázku. Skřítek nemusí být vizuálně „čitelný“ okem, protože jeho hlavním úkolem je pouze sestavit různé „kousky“ vašeho návrhu dohromady. Sprite může vypadat například takto:
Sprites používá většina moderních webů a známý VKontakte není výjimkou. Například takto ukládá „kousky“ rozhraní do jednoho souboru – jmenovitě známé ikony:
Skvělá věc na používání CSS spritů je, že na server potřebujete poslat pouze jeden grafický soubor obsahující všechny vaše obrázky, spíše než mnoho jednotlivých obrázků – a pomocí CSS můžete zobrazit jakýkoli malý segment tohoto grafického souboru jako pozadí pro prvek. Někdo si myslí, že se jednotlivé obrázky načítají rychleji, ale není to pravda. Při nahrání jednoho grafického souboru s mnoha obrázky odešleme na server pouze jeden požadavek a při nahrání velkého množství obrázků pošleme na server více požadavků. Spojením obrázků do jednoho souboru se nejen výrazně sníží počet HTTP požadavků, alea zmenšit celkovou velikost souboru obrázku.
Dovolte mi uvést další příklad skřítka. Takto ukládá grafické prvky jeden známý západní web věnovaný designu:
Možná se ptáte – kdy je nejlepší čas na přípravu sprite? K tomu existují dva různé přístupy.
Různé přístupy - vytvoření sprite před a po vytvoření webu
Při vytváření listu sprajtů existují dva běžné přístupy – udělejte topřed nebo povytvoření vašeho webu. Před vytvořením webu můžete všechny obrázky umístit do listu sprite. Tomu říkáme přístup"před". Všechny obrázky můžete navíc vytvářet jako samostatné soubory, což usnadňuje jejich úpravy. Jakmile je web vytvořen a všechny obrázky jsou připraveny, můžete rychle a snadno vytvořit list sprite, buď ručně, nebo pomocí jednoho z několika nástrojů. Budeme tomu říkat přístup"po". Pokud jsou pro vás listy sprite novinkou nebo s webovým designem teprve začínáte, bude pro vás tento přístup vhodnější"po". Existuje mnoho utilit, služeb a programů, které vám pomohou vytvořit sprity, z nichž většina je distribuována a dostupná zdarma.
Uspořádání obrázků ve spritu organizovaným způsobem
Při vytváření sprite ve Photoshopu je vhodné okamžitě umístit všechny obrázky organizovaným způsobem a v určitém vámi zvoleném pořadí, takže pozdější práce s nimi bude snadná a jednoduchá. Snažte se vždy zaokrouhlit prostor pro každý obrázek sprite na nejbližších 10 pixelů, nebo kolem nich ponechte více místa, pokud jsou všechny stejně velké. Pokud jde o psaní stylu CSS, nebudete si muset zapisovat rozměry souřadnic a bude méně pravděpodobné, že zapomenete čísla souřadnic požadovaných obrázků. Zde je příklad úspěšného umístění různé obrázky v jednom spritu:
Od teorie k praxi! Vytvořte animovaného ptáka z Angry Birds pomocí skřítka
Seznámili jsme se tedy s pojmem skřítek ve webdesignu, ale teorie bez praxe není nic. Proto teď ty a já vytvoříme našeho prvního skřítka a naučíme se, jak ho vyrobit jednoduchá animace na stránce HTML. Náš příklad bude založen na postavě ze hry Angry Birds - jedná se o legračního červeného ptáka. Nejprve si připravíme obrázek sprite ve formátu .PNG obsahující 4 fáze animace ptáků:
Někde na disku si vytvoříme adresář rozzlobený pták- tam umístíme naše ukázkové soubory. Uložte sprite s ptáky do tohoto adresáře a zavolejte soubor naštvaný.png. Dalším krokem je vytvoření souboru ve stejném adresáři s názvem index.html- toto bude naše testovací stránka s animací. Dále otevřete tento soubor v editoru a umístěte tam následující kód:
Dovolte mi trochu vysvětlit, co jsme teď udělali. Nejprve nastavíme kódování pro náš HTML dokument UTF-8, což znamená, že musíme zachovat naše index.html v tomto kódování. Můžete také zadat jiný, např. Windows-1251, - pro náš úkol to není důležité. Dále jsme připojili soubor stylu k dokumentu styl.css(zatím není v našem katalogu rozzlobený pták, vytvoříme jej o něco později). Nastavili jsme také odkaz na externí skript a zahrnuli knihovnu jQuery - with pomocí jQuery Budeme dynamicky měnit obrázky našeho ptáka a měnit jeho „fáze“ ze skřítka. Připravili jsme také interní blok JavaScript, kam následně umístíme kód, který ptáčka animuje. A konečně hlavní tělo dokumentu obsahuje jeden hypertextový odkaz, uvnitř kterého je blok DIV a jeho ID je nastaveno na birdImage a výchozí třída je bird-sleeping . To znamená, že náš pták bude při otevření stránky „spát“ - to odpovídá levému dolnímu obrázku uvnitř skřítka - kde má zavřené oči. Nyní je čas našeho skřítka „rozřezat“, tzn. vyberte z něj jednotlivé obrázky.
Řezání sprite pomocí služby SpriteCow.Com
Úloha "porcování" spritu je poměrně pracná - vyžaduje opatrnost, aby nedošlo k chybě se souřadnicemi, které definují každý obrázek ve spritu. Naštěstí dnes existují služby, které tuto bolest hlavy návrháře a designéra rozvržení zcela odstraní. Pro krájení používám službu http://spritecow.com a doporučuji vám ji. Podstata služby je jednoduchá a velmi pohodlná - každý obrázek ptáka vybereme myší a SpriteCow nám dá hotový CSS kód se souřadnicemi. Vše, co musíme udělat, je jednoduše nastavit 4 styly pro každou fázi ptáka! Po vstupu na web vidíme 2 tlačítka - „Otevřít obrázek“ a „Zobrazit příklad“. Potřebujeme první tlačítko, klikněte na něj:
V dialogovém okně, které se otevře, vyberte náš soubor sprite naštvaný.png, poté uvidíme, jak byl náš sprite načten na web. Dále musíme určit barvu pozadí, za tím účelem klikněte na panel nástrojů „Vybrat pozadí“ a ukažte na bílou oblast našeho spritu – to nám umožní správně vystřihnout každou fázi ptáka:
Vyberte první obrázek a automaticky pro něj získejte kód CSS:
Nyní je čas tvořit v našem katalogu rozzlobený pták soubor stylu styl.css. Tam postupně vkládáme 4 vygenerované kousky CSS kódu, ale místo standardní třídy .sprite, kterou nám nabízí SpriteCow, pojmenujme své styly přehledněji. Vzhledem k tomu, že obrázek sprite ukládáme přímo v kořenovém adresáři adresáře, odstraníme z vlastnosti pozadí nepotřebný element path - imgs/. Mám to takhle:
/* "běžný" pták. Obrázek vlevo nahoře ve spritu */ .bird-normal ( background: url("angry.png") bez opakování -12px -16px; šířka: 97px; výška: 94px; ) /* "Šťastný" pták. Obrázek vpravo nahoře ve spritu */ .bird-happy ( background: url("angry.png") no-repeat -118px -17px; šířka: 97px; výška: 94px; ) /* "Spící" pták. Obrázek vlevo dole ve spritu */ .bird-sleeping ( background: url("angry.png") bez opakování -12px -120px; šířka: 97px; výška: 94px; ) /* "Rozzlobený" pták. Obrázek vpravo dole ve spritu */ .bird-angry ( background: url("angry.png") bez opakování -118px -120px; šířka: 97px; výška: 94px; )
Posledním krokem je napsat kód jQuery, který vytvoří animaci.
Nyní, když jsme sprite úspěšně rozřezali a umístili 4 styly pro každý obrázek do našeho souboru styl.css, vše, co musíme udělat, je napsat kód jQuery, který přidá animaci při najetí myší na náš hypertextový odkaz a při kliknutí na odkaz. Jak si pamatujeme, standardně máme třídu bird-sleeping , tzn. náš červený ptáček "usne" při otevírání dokumentu :)
Všechny animace budou založeny na 3 metody jQuery:
- hover - handler pro najetí kurzorem na odkaz a pro přesun kurzoru pryč od odkazu. Když najedeme kurzorem, ptáček se „probudí“ – tzn. třída se stane normální
- mousedown - handler pro kliknutí levým tlačítkem myši na odkaz. V tomto případě se pták stane „šťastným“ - tzn. Bloku DIV bude přiřazena třída bird-happy
- mouseup - ovladač uvolnění levého tlačítka myši. Po vypuštění se ptáček "rozzlobí" - tzn. Bloku DIV je přiřazena třída bird-angry
Vložíme tedy následující kód na místo, které jsme připravili v interním bloku JavaScript umístěného na stránce:
$(document).ready(function() ( // zde je kód jQuery, který vytvoří animaci $("#birdImage").hover(function() ( $(this).removeClass("bird-sleeping"); $ (this).removeClass("pták-rozzlobený"); $(toto).removeClass("pták-šťastný"); $(this).addClass("pták-normální"); ), function() ( $( this ).removeClass("pták-normální"); $(this).removeClass("pták-rozzlobený"); $(this).removeClass("pták-šťastný"); $(this).addClass("pták- spí "); )); $("#obraz ptáka").mousedown(function() ( $(this).removeClass("pták-spí"); $(this).removeClass("pták-normální"); $ ( this).removeClass("pták-rozzlobený"); $(this).addClass("pták-šťastný"); )).mouseup(function() ( $(this).removeClass("pták-spí"); $ (this).removeClass("pták-normální"); $(toto).removeClass("pták-šťastný"); $(this).addClass("pták-rozzlobený"); )); ));
Připraveno! Testovací animace
Dobře, teď je po všem! Náš pták je připraven a oživil stránku svou animací! :) Můžete si prohlédnout demo. Stáhněte si archiv s příkladem ve spodní části článku.
Reklamy
Sprite je bezbarvý nealkoholický nápoj s citronem a limetkou s chutí, bez kofeinu, vytvořený společností Coca-Cola. Byl vyvinut v západním Německu v roce 1959 jako Fanta Klare Zitrone a představen ve Spojených státech jako Sprite v roce 1961.
(Coke), Fanta, 7 Up, Mist Twst. Nápoje Sprite a Pepsi jsou příklady třídy zvané soda/nealkoholické nápoje. Lidé pijí sodu z různých důvodů, včetně; sladká chuť, výhodné balení, dostupnost a další na uhašení žízně.
Jedna plechovka sody obsahuje ekvivalent 10 čajových lžiček cukru. Toto množství cukru, zejména v tekuté formě, prudký nárůst krevního cukru a inzulínu způsobí reakci v těle. Časem to může vést k cukrovce nebo inzulínové rezistenci, nemluvě o váze a dalších zdravotních potížích.
Reklamy
Jaké jsou ingredience ve spritu?
Sycená voda, kukuřičný sirup s vysokým obsahem fruktózy, kyselina citronová, přírodní aroma, citrát sodný, benzoát sodný (pro ochranu chuti).
Stáhněte si průhlednou galerii obrázků Sprite PNG.
Rozlišení: 800×2352
Velikost: 1645 kB
Formát obrázku: .png
Rozlišení: 409 × 1350
Velikost: 127 kB
Formát obrázku: .png 
Rozlišení: 825×825
Velikost: 283 kB
Formát obrázku: .png 
Rozlišení: 444 × 853
Velikost: 97 kB
Formát obrázku: .png 
Rozlišení: 512×512
Velikost: 186 kB
Formát obrázku: .png 
Rozlišení: 256×256
Velikost: 41 KB
Formát obrázku: .png 
Rozlišení: 1600×1200
Velikost: 625 kB
Formát obrázku: .png
Rozlišení: 985 × 3524
Velikost: 1072 kB
Formát obrázku: .png 
Rozlišení: 901×810
Velikost: 711 kB
Formát obrázku: .png