Úvod do CSS skřítků pro figuríny. CSS skřítci Příklad CSS skřítků

Více než deset let jsem pracoval na výrobě nástrojů a enginů pro umělce her a vizuálních efektů a vždy mě vrtalo hlavou, jaký rozdíl lidé dělají mezi „softwarovým uměním“ a „skutečným herním uměním“. Také jsem si všiml, že lidé, kteří vám dávají volný průchod přes špatnou grafiku, jsou většinou jiní programátoři. Bez ohledu na to, jak zábavná je vaše hra nebo jak technicky úžasné je vaše demo, neprogramátoři, kterým ukážete svou postavu, si pomyslí: „Má jetpack nebo je to něco jiného?“ Často můžete najít způsob, jak vytvořit dobrou grafiku, aniž byste ji museli kreslit od začátku. Někdy je ale potřeba vytvářet grafiku za běhu. Rozpočtová omezení nebo pravidla v herní soutěži nebo jednoduše krátký termín pro prototyp mohou vyžadovat, abyste si vzali pravítko a štětec.

Neumím kreslit, opravdu... chci říct, podívej se na tohle:

Pokud takto vypadá vaše grafika, pak je tento článek určen právě vám. Myslel jsem, že se podělím o pár tipů, jak vylepšit grafiku. Tyto tipy budou užitečné pro každého, bez ohledu na schopnosti a zkušenosti s kreslením.

Zatímco tipy jako „každý den skicování“ nebo „navštívit muzeum umění“ mohou být užitečné pro začínajícího umělce, tento článek není pro umělce, je o tom, jak přimět lidi, aby si mysleli, že jste kodér, programátor, fanoušek. matematiky, mají nějaké umělecké schopnosti.

Také žádný (téměř) z těchto tipů nevyžaduje „cvičení“, i když praxe je prospěšná a dokonce nezbytná pro skutečného umělce. Vždy se zdá, že konečný termín pro projekt dorazí za úsvitu a vše, co potřebujete, je pár zatracených skřítků.

Něco z tohoto příběhu bude také užitečné pro uživatele Photoshopu, protože pokud vím, stejné koncepty platí pro jakýkoli kreslící program a podobné operace jsou pro vše, co zde zmiňuji, v Gimpu a možná v jakémkoli jiném programu, kterým jste použitím.

Něco z toho je zaměřeno také na účastníky soutěže LudumDare a dalších podobných soutěží, kde je cílem vytvořit hru za běhu do 48 hodin. Moje hry mívají dobré skóre v kategorii grafiky (bohužel, zabiják hratelnosti mi stále uniká), i když se nepovažuji za zvlášť dobrého herního umělce. Mnoho z těchto příkladů pochází z mých příspěvků LD a většina z těchto zkušeností jsou věci, které jsem se naučil ze soutěžení v těchto soutěžích a nucení tvořit umění v extrémně krátkých termínech. Navíc by měly být neocenitelné pro každého, kdo se snaží vytvořit kvalitní grafiku (nebo jí podobnou) v krátkém časovém plánu nebo omezeném rozpočtu.

Nejčastější chyba, kterou vidím a je nejjednodušší se jí vyhnout. Výchozí paleta pro většinu počítačových kreslicích programů se vrací do dob DOSu (dokážete zjistit souvislost mezi barvami v této paletě a čtyřbajtovými binárními hodnotami od 00 do 15? Samozřejmě ano. když to nevidím, byl by z tebe skutečný umělec.).

Paletou nemám na mysli paletu 16 nebo 256 barev VGA časů. Mám na mysli pouze koordinovaný systém pro vaši hru. Pokud začnete s dobře vybranou paletou, budou vaše „čmáranice“ vypadat esteticky a dokonce předem navržené.

Ale kde najdu paletku? Když se ráno oblékám, nedokážu si ani vybrat barvy!

No, trocha teorie barev jde hodně daleko, a když si za patnáct minut budete hledat na internetu, co je to "teorie barev", skončíte tím, že definujete, co je to hra. Ale pokud na to nemáte čas, zde je několik tipů, které fungují úžasně:

Pro větší hru možná budete chtít použít jinou paletu pro každou úroveň nebo oblast herního světa. Pokud jsou vaše prvky uživatelského rozhraní a hlavní postava zobrazeny v neutrálních barvách nebo pokud tyto palety mají společnou hlavní barvu, můžete je rovnoměrně aplikovat mezi úrovněmi nebo oblastmi.

V tomto příkladu je použita "monochromatická" paleta, kde jsou barvy všechny různé odstíny velmi podobného tónu, jiná barevná schémata jsou pestřejší, ale důležité je, že barvy spolu vypadají dobře.

Zdroje:

1. MultiColr z laboratoří idee
   Dobrá věc na této úžasné stránce je, že si můžete vytvořit paletu a mít z ní spoustu fotek jednoduchým výběrem několika požadovaných barev a obrázku, ze kterého pak můžete barvy použít.

neumím kreslit!..

Možná jste prostě příliš cool člověk na to, abyste uměli kreslit. Možná je to všechno záměrné. To je pravda. Místo toho, abyste dělali dobré umění, vyberte si téma, které vyžaduje špatné umění. Toto fungovalo pro "SketchFighter" A "Fyzika pastelek" nakreslený na papíře.

Použijte to, co máte k dispozici. Máte na stole nějaké svinstvo? Možná jste vytvořili jednu z nejpopulárnějších her všech dob "Desktop Tower Defense".

Lidé začínají chápat trik, ale nezbývá mu mnoho let života. Buďte kreativní...možná jsou vaše postavy sušenky a dokážete je doslova upéct. Nebo nějaká zombie slanina zaútočí na vaši kuchyni. Nebo dokonce chlupatý hrudník, který je třeba oholit.

Tip třetí: Jednoduché tvary a siluety

Kruh, čtverec, trojúhelník, kosočtverec, lichoběžník, rovnoběžník atd. Víte, jak přesně vypočítat jejich plochu, ale víte, že jejich kreslení dopadá špatně? Ručně nakreslete několik tvarů a poté přidejte oči (pro postavu) nebo kola (pro vozidlo) nebo cokoli jiného. Mohou se ukázat jako vtipné a absurdní a zcela nepřesné.

V závislosti na tom, kolik kávy jste již vypili, mohou mít zcela odlišné tvary. Vše je v pořádku! To je ve skutečnosti dobrá věc, protože nedostatky a variace vytvářejí „individualitu“ a oživují je. Ve svém kreslicím programu nepoužívejte tvarové nástroje, je to ničitel duší sprite. Tím, že odlišíte jejich obrysy, usnadníte hráči jejich vizuální rozlišení.

Jedna poznámka: nesnažte se na to přijít během soutěže v psaní her. Před provedením si vše nejprve vyzkoušejte, abyste přesně věděli, jak co dělat. Strávíte tím spoustu času, ale během soutěže to může trvat jen 15-20 minut a bude to velký rozdíl.

A také nespěchejte s pečením, dokud nebudete hotoví s texturami pro modely. Nebudete moci odstranit "pečení" nebo to udělat dvakrát.

Rada jedenáctá: kupte si tablet

I když nemáte žádné ambice stát se herním umělcem, pokud kreslíte nějaké umění na počítači, musíte si koupit tablet. Nemusí to být velké nebo drahé; můžete si koupit tablet od Wacom. Protože kreslení myší je podobné jako kreslení cihlou na papír.

Mnoho lidí, které znám a kteří si koupili tablet poprvé, jej používali pomalu. Zde je několik tipů, které vám pomohou dostat z tabletu maximum.

• Na ovládacím panelu tabletu zvyšte citlivost pera na pevnější nastavení. To poskytne nejlepší kontrolu při kreslení.
• Kreslení pomocí prázdného listu papíru zcela změní pocit. Různé druhy papíru: kancelářský papír, stránky časopisů, silný papír atd. — pomůže vám naplno zažít kreslení na tabletu. Pokusit se.
• Praxe. Vím, že než jsem řekl, že žádná z mých rad nevyžaduje praxi – lhal jsem. Zkuste tato cvičení:
• Udělejte ve Photoshopu deset čtverců v řadě a vyplňte je černou barvou s poloměrem průhlednosti nula až sto. Udělejte pod nimi deset prázdných čtverců. Zkuste vystínovat spodní čtverce, abyste zarovnali hlavní čtverce. Vyzkoušejte s jinými štětci a cvičte s tlakovou citlivostí pera.
• Zkuste něco napsat, abecedu nebo jen text. Začněte s většími písmeny a poté postupujte dolů. Díky tomu si vaše ruka zvykne na tablet, stejně jako vaše oči na obrazovku při kreslení.

V dnešní době rozhraní založených na dotykové obrazovce je užitečné mít tablet, abyste pochopili, jak hry založené na této technologii fungují. I když se tento přístup neliší ani při srovnání technologie myši.

V sekci novinek jsem oznámil překlad rozhraní generátoru sprite - bezplatného prohlížeče prohlížeče, který je určen k vytváření CSS spritech, které implementují novou progresivní technologii pro zvýšení rychlosti načítání webových stránek. Tato recenze se podívá na další dva programy pro automatické vytváření (generování) spritů, které efektivně a efektivně kombinují obrázky do spritů CSS. Popsané programy umožňují nejen snadno a jednoduše vytvářet CSS sprity, ale také vytvářet stylové úryvky se souřadnicemi sprite, což umožňuje také snadno a jednoduše umístit CSS sprity na webovou stránku.

Nejprve ale něco o CSS spritech. Často se jim také říká web sprite, html sprite. Poprvé jsem se s touto technologií setkal, když jsem se rozhodl zkontrolovat rychlost načítání svých stránek. Moje stránky jsou malé, hlavně nejsou ničím přetížené a otevírají se celkem rychle. Přesto jsem to chtěl zkontrolovat. Nástroj Page Speed ​​​​od Googlu a podobný nástroj YSlow od Yahoo mi poskytly seznam doporučení pro zlepšení rychlosti načítání stránek. Mezi těmito doporučeními byla touha spojit obrázky zveřejněné na webu do skřítků. Tak začalo moje seznámení s CSS sprity.

Co jsou to css sprite a jak je používat? Základem metody je spojení mnoha obrázků umístěných na webové stránce do jednoho složeného mozaikového obrázku. Hlavní podmínkou pro vytváření a používání CSS spritech je možnost použít tuto sadu obrázků jako pozadí na stránce. Tyto obrázky obvykle představují různá loga, ikony, tlačítka a další grafické navigační a ovládací prvky. Pokud tyto obrázky lze použít nejen jako grafiku s tagem , ale také jako obrázky na pozadí se stylingem obrázek na pozadí: url (xxxxxxxx...), pak se navrhne vytvoření a použití css sprites (všimněte si, že zmíněná možnost je téměř vždy dostupná). Některé zdroje (zahraniční i domácí) nazývají cílový složený obrázek master sprite, někdy sprite list. Této terminologie se budu také držet. Další použití konkrétního obrázku, který potřebujeme z hlavního spritu na webové stránce, se provádí pomocí polohování pomocí CSS. Celý trik této technologie spočívá ve výrazném snížení požadavků HTTP na stahování obrázků. Namísto několika (někdy desítek nebo více) požadavků na stažení jednotlivých obrázků existuje pouze jeden požadavek na stažení tohoto složeného obrázku mozaiky. I přes větší velikost tohoto obrázku je jeho doba načítání nesrovnatelně kratší než doba potřebná pro mnoho HTTP požadavků na jednotlivé obrázky a jejich stahování. Použití CSS spritů umožňuje výrazně zvýšit rychlost načítání obrázků, v souladu s tím se samotná stránka, kde jsou CSS sprity používány, otevírá v prohlížeči mnohem rychleji. Další předností této metody je velmi jednoduchá implementace rollover efektu obrázků bez použití skriptů (pouze pomocí CSS), což může být užitečné pro vytváření efektních a stylových menu, ovládacích tlačítek a dalších grafických prvků používaných na webových stránkách.

Mimochodem, o CSS. Použití jednotlivých konkrétních obrázků na stránce, které tvoří kombinovaný složený obrázek, se provádí pomocí vlastnosti pozadí-pozice. Tato vlastnost určuje vodorovnou a svislou polohu obrázku na pozadí v prvku použitém k jeho umístění. Hodnoty vlastností mohou být klíčová slova nebo hodnoty specifikované v pixelech nebo procentech. Při použití sprajtů CSS se obvykle používají přesné hodnoty pixelů. První hodnota je horizontální souřadnice (x), druhá je vertikální souřadnice (y). Podle specifikace CSS se tato vlastnost vztahuje na prvky na úrovni bloku a nahrazující prvky. V praxi se sprajty často používají v inline prvcích , který se zablokuje pomocí vlastnosti displej:blok pro nastavení šířky a výšky. U těchto prvků je nastavena vlastnost pozadí s potřebnými souřadnicemi (background-position). Stručně a zhruba řečeno, toto jsou souřadnice (umístění) malého obrázku, který potřebujeme na velkém plátně celkového složeného obrázku sprite. Díky této vlastnosti a pevně zadané výšce a šířce prvku, ve kterém je sprite použit, je zajištěna vizualizace obrázku, který v tomto prvku potřebujeme. Zaměřuji se na to, že nemovitost pozadí-pozice zajišťuje doručení obrázku, který potřebujeme (ve formě elementu bloku), jako vystřiženého z hlavního spritu, na webovou stránku. Umístění stejného obrázku na správné místo na stránce je odpovědností buď tradičního označení HTML nebo označení pomocí vhodných identifikátorů, tříd nebo jednoduchých selektorů s nezbytnými vlastnostmi CSS. (pozice, float, margin a další)– zde hodně záleží na vašich zkušenostech a vašich preferencích. Pokud vás zajímá, proč se vlastnost používá při použití spritů CSS Pozadí, pak připomínám, že technologie CSS spritech zahrnuje jejich umístění na webové stránky přesně jako vložky na pozadí. Navíc je potřeba nejen vlastnost background-position, ale také background-image udávající cestu k hlavnímu spritu a v případě potřeby další vlastnosti pozadí. Některé příklady, včetně použití zkráceného pravopisu vlastnosti pozadí, lze vidět v seznamu stylů níže.

Uživatelé obeznámení s CSS si mohou všimnout, že umístění spritů CSS je mnohem jemnější a složitější. Ano to je. Pokud je umístění spritu specifikováno v přesných jednotkách (px), pak jsou interpretovány jako posuny od levého horního rohu oblasti výplně prvku. Bod, ke kterému se měří offsety, je levý horní roh zdrojového obrázku.

Nejsrozumitelnější vysvětlení pozicování na pozadí v případě zadání přesných hodnot vlastnosti background-position jsem našel v blogu, odkud byl převzat následující obrázek a popis:

« Při určování umístění obrázku na pozadí pomocí absolutních jednotek v pozici pozadí platí pro určení jeho konečné polohy následující princip. Tito. prohlížeč vypočítá zadané posuny podél os X a Y od počátku oblasti, ve které je objekt umístěn, k počátku samotného obrázku.»

Účelem této recenze je odpovědět na otázky: jak vytvořit CSS sprite, jak kombinovat obrázky do CSS sprite a seznámení se třemi programy, které umožňují jednoduchou a snadnou tvorbu CSS sprite (CSS Sprites), takže nebudu mluvit více o technologii samotné. Na toto téma je nyní na internetu spousta rozumných a podrobných materiálů (jeden odkaz jsem uvedl výše). Recenze je věnována práci s programy pro tvorbu CSS sprajtů (generátorů sprite), kde se jen letmo dotknu některých důležitých (dle mého názoru) bodů při používání spritů. Okamžitě udělám rezervaci – použití CSS sprajtů není všelék a pokusit se nacpat velké obrázky záhlaví, úvodních obrazovek a grafiky, které se používají do sprajtů přesně jako grafika, ne jak obrázky na pozadí, nedělej to. Pro trvalé obrázky, které se na stránkách často opakují, se doporučuje používat sprajty. Pokud jsou tyto obrázky často nahrazovány jinými, bude potřeba vytvářet nové sprity a samozřejmě upravovat CSS a HTML.

Experimentální generátory css sprite jsou bezplatné programy CssSpriter-1.2, DoHTMLSprite A SpriteGenerator 0.2. Pokud je na ruskojazyčných zdrojích tu a tam zmíněn první z nich, pak jsem v Runetu neviděl zmínku o druhém a třetím. Téměř všechny generátory skřítků CSS mají tendenci být online zdroji (podle současného módního trendu). Navíc ne více než dva nebo tři z nich mluví rusky. Mám rád programy a online služby, které dokážu zjistit, když ne hned, tak po pár pokusech. Z generátorů sprite, které jsem recenzoval, se mi nejvíce líbil již zmíněný. Pro jednoduchost, pohodlí, přizpůsobení, efektivitu a předvídatelnost. Zbytek generátorů (většinou online) tato kritéria nesplňoval (možná nejsou paže zcela rovné nebo rostou ze špatného místa nebo hlava není otočena správným směrem). Zkušený uživatel (když se sem najednou zatoulá) se může zašklebit - proč se obtěžovat, když sprajty lze udělat v grafickém editoru a vypočítat souřadnice (no, no). Samozřejmě můžete, ale já raději používám specializované nástroje a stejně preferuji desktopové aplikace * . Všechny tři popsané programy byly testovány pod Windows XP SP3. Jejich schopnosti nejsou tak rozsáhlé jako u Instant Sprite, ale velmi stojí za pozornost.
Poznámka ze dne 22.02.14. Všechny odkazy v tomto článku zmiňující program Instant Sprite vedou k poměrně podrobnému oznámení prvního překladu tohoto programu. Poté, co jsem napsal samostatný článek o Instant Sprite, rozhodl jsem se na něj odkazovat i zde. Tady je - .
Ještě jedna poznámka. Chtěl bych vám oznámit nedávno napsaný článek, který zdůrazňuje trochu jiný přístup k určování souřadnic a velikostí sprajtů CSS pro jejich umístění na webové stránky. Zde je odkaz na tento článek:
Začněme však naší recenzí...

Generátor sprite CssSpriter-1.2

Malý bezplatný program (zip archiv 150 kb), který nevyžaduje instalaci. Práce s programem pro tvorbu CSS sprajtů je snadná, rozhraní jednoduché a přehledné. Tlačítka panelu nástrojů duplikují položky nabídky a obsahují popisky. Levý panel zobrazuje zdrojové obrázky s jejich velikostmi a souřadnicemi v budoucím spritu, pravý panel zobrazuje výsledky programu (jedna záložka je výstupní CSS sprite, druhá je demo-html).

Obrázky ke spojení do sprite můžete přidávat ze systémového dialogu jeden po druhém nebo vícenásobným výběrem z připravené složky s obrázky. Obrázky můžete také přidat pomocí metody přetažení. Program podporuje vstupní obrázky v následujících formátech: ico, gif, png, bmp, jpg. soubory Photoshopu psd nejsou podporovány, jiné formáty jsem nezkoušel – je jich spousta. Nedoporučuji používat poslední dva formáty bmp A jpg. Nepodporují průhlednost, což je jasně vidět v seznamu náhledů v levém panelu a na výsledném obrázku v pravém panelu (obrázky těchto formátů budou mít černé pozadí nebo okraje ve spritu, jak říkají někteří uživatelé). Chcete-li použít takové sprity na webové stránky, budete muset snížit barevnou hloubku a obnovit průhlednost, což ne vždy funguje správně. Jeden výstupní formát – png 32bit. Pro normální zobrazení obrázku ve starších verzích Internet Exploreru je vhodné převést obrázek do 8bitového formátu png a znovu nastavte průhlednost. Na druhé kartě v pravém podokně můžete zobrazit označení HTML s vnořenými styly CSS pro použití spritů.

Kliknutím na levé tlačítko na panelu nástrojů se náš projekt exportuje do HTML. Ve složce určené pro uložení výsledku se objeví tři soubory:

Program také umožňuje vytvořit sprite s horizontálním uspořádáním vstupních obrázků. Tlačítko, na které ukazuje červená šipka, implementuje tuto funkci. Vezměte prosím na vědomí, že souřadnice obrázků obsažených ve spritu se změnily (ve srovnání s vertikálním umístěním).

Výsledky, které nám program poskytl, jsou základem pro použití sprajtů na vaší stránce. Samozřejmě je potřeba propojit existující styly se styly sprite, místo tříd můžete použít identifikátory, můžete optimalizovat samotné styly sprite, aplikovat značky, které potřebujete, exportovat styly do externího souboru atd. – vše bude záviset na stránce, kde budete sprity používat, a také na vašich preferencích a dovednostech.
Ne všechno je však tak dobré. Program má podle mě jednu vážnou nevýhodu. Mezi obrázky ve spritu nelze nijak nastavit mezery (odsazení, odsazení), takže při prohlížení stránky se zvětšeným nebo zmenšeným měřítkem, což se občas stává, může docházet k nejrůznějším překrývání. Druhým, ale menším nedostatkem je nemožnost řazení obrázků v programu, takže je potřeba obrázky do programu načítat v pořadí, jaké potřebujete (ve skutečnosti je to jen otázka vašich vlastních preferencí, v konečném důsledku je použití tzv. požadovaný obrázek je určen zadáním jeho souřadnic).

Generátor sprite DoHTMLSprite

Je těžké pochopit, kdo je autorem tohoto programu, ale téměř všechny zahraniční archivy softwaru poskytují odkaz na http://www.downloadinn.com/dohtmlsprite.html jako primární zdroj. Toto je také souborový archiv, kde najdete autora publikace – Stefana Grasutu. Kliknutím na tento odkaz se dostanete na stránky jistého Alexandru Tertisco - http://www.teral-soft.com. Na stránkách jsem nenašel žádné stopy tohoto programu, takže si program můžete stáhnout z prvního zmíněného odkazu.
Malý bezplatný program (zip archiv 13 kb) má superasketické rozhraní, ale neumí své věci. Také nevyžaduje instalaci.

Operační algoritmus je následující:

• Určete složku se zdrojovými soubory (složka musí být vytvořena předem a musí do ní být umístěny potřebné soubory)
• Nastavte cílovou složku pro uložení výsledků
• Vytvořte skřítka

Zkusme vytvořit CSS sprite ze stejných obrázků, které byly použity v recenzi prvního programu: 2 soubory gif a jeden po druhém ico, bmp, jpg, png A psd. První program umožňoval stahování všech souborů kromě psd, to znamená, že jsem stáhl 6 souborů ze 7. Pojďme se podívat, jak se DoHTMLSprite chová.

Program detekoval 5 souborů ze 7 oproti 6 detekovaným programem CssSpriter-1.2. Které jsou zatím neznámé.
Nastavte výstupní složku a stiskněte tlačítko Vytvořte skřítka. Program vesele hlásí o vytvoření sprite, css souboru a demo HTML souboru.

Podívejme se na obsah výstupní složky. Ve skutečnosti jsou tam umístěny všechny zmíněné soubory s nějakými nevyslovitelnými názvy.

Pojďme se na ně podívat, počínaje skřítkem. Jak vidíte, soubor sprite byl vytvořen ve formátu png, řeknu také o barevné hloubce - stejných 32 bitů jako v prvním programu. To znamená, že všechny komentáře o průhlednosti jsou relevantní i pro starší prohlížeče.
Při pohledu na svislý obrázek (a nemůžete změnit jeho orientaci, což však není podstatnou nevýhodou programu) si všimneme, že tento program nepodporuje formáty ico A psd jako vstup. Uživatelé starších prohlížečů uvidí na spritu kromě černého pozadí také šedé pozadí na obrázcích, pro které byly použity vstupní soubory. bmp A jpg, které nativně nepodporují transparentnost. Při bližším zkoumání můžete vidět, že sprite obsahuje intervalech(odsazení, odsazení) mezi obrázky, to znamená, že hlavní nevýhoda předchozího programu zde není. Pokud se podíváte na souřadnice obrázků níže (v souboru stylu), můžete vidět, že tato mezera je 5px.

Jak vidíte, nejsou zde použity vnořené styly, ale vytvořený externí soubor stylů, na který je v kódu přítomen odkaz.

A takto vypadá ukázková stránka (její kousek) při zobrazení v moderním prohlížeči. Tento snímek obrazovky také ukazuje mezery mezi jednotlivými obrázky, ale ty jsou již nastaveny v souboru stylu (podrobnosti níže).

Poslední soubor vytvořený programem je externí soubor stylu.

Zde můžete vidět souřadnice všech našich obrázků ve spritu. Pečlivé prozkoumání souřadnic ukazuje, že berou v úvahu 5px mezery mezi obrázky ve spritu, které jsou přesně specifikovány programem (rozměry obrázků jsou 32x32px a rozdíl v souřadnicích je 37px, 37-32=5) . U ukázkové stránky autor nastavil vnější okraje nahoře a dole ve stylech také na 5px (mohla být nastavena jiná hodnota), pomocí vlastnosti zkratky okraj. Při porovnání ukázkových HTML stránek vytvořených prvním a druhým programem můžete vidět, jak použité styly ovlivňují umístění obrázků na stránce. Někteří uživatelé používají okraj"s jako další nástroj, který zabrání neočekávanému překrytí při změně měřítka stránky při prohlížení. To bude pravděpodobně užitečné při vytváření a optimalizaci stylů pro sprite vytvořeného prvním programem, kde mezi obrázky ve spritu nejsou vůbec žádné mezery. Když Při vytváření a optimalizaci stylů pro vaše sprity se sami rozhodnete, jaké vlastnosti potřebujete a jak je používat.

Chtěl bych poznamenat, že program zpočátku generuje kompaktní jednořádkový styl a za nulovou souřadnici nedává měrnou jednotku (px), nula je v Africe nula, ať už v pixelech nebo v kilogramech. Některé online služby pro vytváření CSS sprites takovou promyšlenost nemají.

závěry

Nebudou činěny žádné závěry ohledně používání přezkoumávaných programů. Vyrobíte si je sami. Vše, čím jsem si prošel, jsem dostatečně podrobně nastínil, zbytek je na vás. Abych tuto zdlouhavou recenzi zakončil, podělím se o několik náhodných návrhů a volitelných tipů pro používání spritů CSS.

• Nesnažte se vytvořit jen jeden sprite pro všechny příležitosti a vkládat do něj všechny obrázky použité na vašich stránkách, to by v budoucnu zkomplikovalo úpravy HTML a CSS
• Vytvářejte sprity pro často se opakující grafické prvky, jako jsou loga, ikony, tlačítka a další navigační a ovládací prvky
• Pokuste se vytvořit sprity z obrázků stejné velikosti (je lepší vytvořit ne jednoho sprite z obrázků různých velikostí, ale několik spriteů, ale každý z obrázků má stejnou velikost), pomůže to optimalizovat použité styly (budu ukaž jeden příklad níže)
• K vytváření spritů nepoužívejte obrázky ve formátech, které nativně nepodporují průhlednost (správnější a nejlepší je použít vstupní obrázky ve formátech gif A png, a pro první program a zmíněný Instant Sprite můžete také použít ico)
• Pro podporu transparentnosti výstupních souborů PNG ve starších prohlížečích je převeďte do 8bitového formátu nebo do GIF(existují také CSS hacky, které mohou tento problém vyřešit pro png, ale to není téma dnešní recenze)
• Optimalizujte styly (můžete použít online služby, programy, TopStyle, Rapid CSS atd. nebo upravit ručně)
• Optimalizujte sprajty - velmi pohodlné a efektivní je používat online službu TinyPNG (http://tinypng.org) nebo program Vzpoura, recenzováno v (vřele doporučuji)
• Použijte sprity pro jednoduchý a elegantní způsob, jak převrátit obrázky na vašich stránkách bez použití skriptů
• A na dlouhé cestě..., vlajka ve vašich rukou..., vpřed a s písní...

P.S. O zmiňované optimalizaci stylu

Uvedu pouze jeden příklad možné optimalizace při použití obrázků stejné velikosti. Vytvořme si experimentální sprite z obrázků stejné velikosti pomocí DoHTMLSprite a podívejme se na vytvořené styly.

Za prvé, nepotřebuji další výplň, takže ji odstraním ze souboru stylu. Za druhé, všechny moje obrázky mají stejnou velikost, takže mi nic nebrání nastavit velikosti pouze jednou ve stylu pro samotného mistra sprite. Tohle se stalo.

Velikost souboru se snížila z 1403 bajtů na 749 bajtů (téměř 2krát) a vše funguje skvěle. Pokud jste se pozorně podívali na tyto dva snímky obrazovky, pravděpodobně jste viděli, že jsem dodatečně odstranil další mezery a volitelné středníky před uzavírací složenou závorkou. Pro vizuální srovnání jsem také optimalizoval styl pro již probíraný původní sprite. To se stalo při prohlížení v prohlížeči.

Pokud porovnáte snímky obrazovky, všimnete si rozdílu. Mezery mezi obrázky na stránce, určené vlastností, zmizely (okraj: 5px 0). Rozhodl jsem se, že je nepotřebuji (sprajty budou umístěny na různých místech na stránce a ne v řadě, jako v ukázkovém příkladu). Zároveň nikde nezmizely mezery v samotném obrázku sprite vytvořené programem a poslouží nám jako záchranná síť při případném vlastním škálování stránky při prohlížení v prohlížeči.

Konečně poslední věc

Mezi široce inzerovanými službami pro vytváření CSS sprites vyniká jedna Sprite Me. Automaticky najde obrázky, které lze zkombinovat do sprite, a poskytuje okamžitá doporučení pro reorganizaci souborů stylů a značek HTML. Pokusit se. Kdysi jsem s tím začal a služba mi pomohla pochopit podstatu používání skřítků. Ale bohužel na mých stránkách našel jen 20% obrázků, ze kterých se dali skřítci vytvořit. Proto jsem přešel k tomu, co bylo zmíněno více než jednou, a přeji vám totéž. Z mnoha obrázků zveřejněných na mých stránkách jsou všechny obrázky na pozadí skřítci. Kromě toho jsou ovládací tlačítka (jako je nahrání souboru, posunutí stránky nahoru, zobrazení snímku obrazovky nebo videa) vytvořena ze sprajtů pomocí efektu rolloveru pomocí CSS.
Všechno!

Nějak se mi nedaří dokončit recenzi. Právě jsem to zveřejnil a o den později jsem našel další generátor css sprite.

Sprite generátor SpriteGenerator 0.2.

Také ne online, ale Win aplikace. Malý program, zdánlivě open source, šířený pod určitou veřejnou licencí Microsoftu. Program má poměrně jednoduché a intuitivní rozhraní.

Naznačme cestu ke stejné složce s experimentálními obrázky jako u již probíraných programů. Pojďme zadat složku pro výstup sprite a poté zadat stejnou složku pro výstup souboru CSS.
Program umožňuje vybrat rozvržení pro budoucí sprite: vodorovné, svislé, obdélníkové a podle uvážení programu (automatický výběr). Když se podívám dopředu, řeknu, že když je mnoho vstupních obrázků, program sám nastaví automatické rozvržení - zbývající možnosti jsou deaktivovány a výsledný sprite je obdélníkový. Program umožňuje nastavit mezeru mezi obrázky a nastavit odsazení. Vyberte parametry uvedené na snímku obrazovky a stiskněte tlačítko Vytvořit. Program někam odletí bez hlášení. Podívejme se na výstupní složku.

Program vytvořil dva soubory: soubor stylu a sprite ve formátu PNG 32bit (jejich názvy jsem uvedl při zadávání výstupní složky). Tento program nevytvořil ukázkovou stránku. Podívejme se na skřítka.

Co vás okamžitě zaujme: ze 7 obrázků zbývají pouze 4. Ukázalo se, že program nepřijímá soubory bmp, na obrázku se vstupním formátem jpg je vidět i kousek černého pozadí a uživatelé starších prohlížečů uvidí na dalších obrázcích také zašedlé pozadí. Opět jsem neoptimalizoval sprite ani nenastavil průhlednost. Druhá věc, kterou je třeba poznamenat, je, že kolem každého obrázku jsou mezery - to se dá očekávat, protože program podporuje obdélníkové rozvržení. Mezery mezi obrázky a vnějším okrajem jsou však zřetelně větší než mezery mezi obrázky samotnými. Vše je jasné, když se podíváme na soubor stylu.

První věc, kterou je třeba poznamenat, je, že program uložil názvy vstupních obrázků, místo aby ve výše uvedených programech specifikoval anonymní jména. Za druhé, odsazení, které jsme nastavili, protože jsem to považoval za vlastnost okraj, nikoli v souboru stylu. Ukazuje se, že obě možnosti nastavení mezer v programu souvisejí se samotným obrázkem: jedna (vzdálenost mezi obrázky) nastavuje mezery mezi samotnými obrázky, druhá (šířka okraje) – mezi obrázky, které tvoří sprite a jeho vnější hranice. Když se podíváte na vlastnosti pozadí-pozice V souboru stylů vidíte, že zohledňuje oba zmíněné typy mezer. Pojďme si sami vytvořit ukázkovou webovou stránku, včetně různých odsazení v souboru stylu pro přehlednost (mluvíme o odsazení v souboru stylu kvůli přehlednosti v umístění obrázků na stránce).

Záměrně jsem udělal screenshot při prohlížení v IE6, abyste viděli neprůhledné pozadí obrázků. Už jsem mluvil o tom, jak se tomu vyhnout u starších prohlížečů. V moderních prohlížečích vypadá vše v pořádku, kromě formátu vstupního obrázku jpg, který nativně nepodporuje průhlednost, zde je pozadí černé.
Pro zájemce jsou zde screenshoty souborů HTML a CSS pro poslední příklad.

Závěr

Moje recenze nepředstírá, že je úplná nebo poskytuje podrobné pokrytí mnoha problémů, ale může být použita jako příklad použití CSS sprite na webové stránce a příklad jejich vytvoření v generátorech sprite.

Programy uvedené v recenzi jsem nerusifikoval, jsou docela jednoduché a srozumitelné bez překladu. Budu rád, když tato recenze bude pro někoho užitečná. (UPD - později jsem přeložil nejmenší a nejjednodušší, ale neméně funkční program - DoHTMLSprite. Oznámení o jeho lokalizaci najdete na stránce novinek.)

Po uveřejnění této recenze jsem na internetu našel několik dalších programů (ne služeb) pro tvorbu CSS sprite. Ale všechny tyto programy jsou horší než programy popsané zde. Buď funkčností, nebo stabilitou provozu nebo jinými vlastnostmi. Proto tuto recenzi nebudu přidávat. Programy diskutované v tomto přehledu plní své povinnosti výborně. Pro tvorbu CSS sprite můžete doporučit kteroukoli z nich.

To je asi zatím vše!

Děkuji za přečtení tohoto všeho.

*) Dříve jsem byl poněkud skeptický k vytváření CSS sprites pomocí grafických editorů. Ale spousta editorů zdarma Gimp s pluginy CSS WebSprites A Uložit pro web donutil mě změnit názor. Jednoduchost, intuitivnost a další možnosti pro vytváření CSS sprite a optimalizaci stylů i obrázků mě přiměly napsat další článek na toto téma. Pokud chcete, můžete se s ním seznámit na stránce.
Doporučuji také, abyste se v článku seznámili s trochu jiným přístupem k CSS spritem a určování jejich souřadnic a velikostí.

Jeden z klíčových úkolů CSS skřítci je optimalizovat grafiku načítací stránky. K čemu tato optimalizace slouží a proč je nutné ji provádět? Myšlenka je tato: dokud není stránka optimalizována, jsou grafické prvky samostatné soubory. Počet takových prvků přesahuje 5 nebo 10 kusů, proto za účelem stažení každého obrázku prohlížeč zadá samostatný požadavek.

Je logické předpokládat, že proces lze urychlit kombinací grafických prvků. Zobrazení dílů se konfiguruje pomocí CSS. Poté prohlížeč provede pouze jeden požadavek na stažení obrázků. Tím stránka se načte mnohem rychleji. To je celý princip optimalizace.

kromě používají se skřítci aby se správně vytvořil efekt vizuální změny prvku v okamžiku, kdy na něj uživatel najede kurzorem. Absenci tohoto lze zaznamenat, když návštěvník uvidí blikající tlačítko: tlačítko má dva stavy - počáteční a v okamžiku visení, mezi načtením těchto stavů v nepřítomnosti organizace je příliš dlouhá pauza, která proto dochází k blikajícímu efektu.

Podívejme se tedy na základní příklady CSS sprite:

Máme seznam ikon v jednom souboru. Úkol: zobrazte několik obrázků v náhodném pořadí.

Obrázek ( css-sprite-01.png) dole je sprite.

Po použití seznamu stylů zůstanou ikony zobrazeny v náhodném pořadí.

Podívejme se na tento příklad podrobněji. Rozlišení původního obrázku sprite: 200 * 200 px. Hlavní obrázek je rozdělen na 4 části, z nichž každá má rozlišení 100*100 px. Musíme v dokumentu vytvořit seznam s identifikátorem css-sprite-ul . Položky seznamu očíslujme jako 001, 002, 003 atd.

Nyní tento seznam zobrazí položky a vy potřebujete získat části obrázku sprite. Chcete-li to provést, přejděte do souboru .css, kam vložíme tento kód:

Analýza stylů vám umožní pochopit, na jakém místě a jak přesně budou části tohoto obrázku sprite zobrazeny.

Příklad 2: Obraz se změní při najetí myší.

Další příklad: pokusí se vytvořit tlačítko, které se změní, když najedete kurzorem. Takže změní barvu a text. Naším úkolem je vyhnout se výše popsanému blikajícímu efektu. K tomu musí být oba stavy umístěny v jednom souboru.

Jak sprite vypadá:

html kód:

Nejprve krátký úvod. Při načítání stránky mají prohlížeče povoleny pouze 2 požadavky na server (v moderních prohlížečích se tento počet zvýšil na 6). Každý prvek webu, ať už je to soubor se šablonou stylů, soubory javascript, obrázky, jsou nezávislé stahování, které vyžaduje samostatný požadavek na server.

Na webu může být mnoho miniatur. Například emotikony, šipky, všechny druhy malých designových prvků. Každý takový obrázek váží zanedbatelně málo, ale kvůli obrovskému počtu požadavků vznikají problémy s rychlostí načítání webu.

Již před dlouhou dobou (2003-2004) bylo navrženo řešení této situace s hlavním cílem urychlit načítání stránek snížením počtu požadavků na server. Tato technologie se nazývá "Sprites".

Co jsou to CSS skřítci

Sprite CSS- technologie pro spojování malých obrázků do jednoho. Pomocí posunů přes CSS se dosáhne vyříznutí požadované části obrázku

Například místo 10 obrázků se načte jeden, ale větší. Při správné distribuci to web zrychlí. Zde však jde hlavně o to to nepřehánět. Kombinování obrázků ne vždy poskytuje výhodu při načítání webu.

Příklad CSS Sprite

Podívejme se na malý příklad implementace sprite CSS. Řekněme, že jsme vytvořili následující obrázek ze tří samostatných šipek.

Pro přístup k požadované šipce v CSS musíte napsat

Na stránce to vypadá takto:

V uvažovaném příkladu jsme použili záporné odsazení. To se provádí za účelem zvýšení obrazu. Existuje například následující sprite:

Chcete-li vyjmout ikonu RSS, musíme napsat následující odrážky

background-position : -90px -40px ;

V příkladu jsme posunuli obrázek o 40 pixelů nahoru a 90 pixelů doleva.

Výhody použití skřítků

• Snížení počtu volání serveru
• Pokud jsou použity dynamické změny obrázku (například při najetí myší na prvek nabídky), obrázek již bude v mezipaměti, a proto nedojde ke zpoždění při načítání ve správný čas
• Pokud je pozadí kombinovaných obrázků podobné, sníží se také celková „váha“ obrázků

Mezi nevýhody skřítků: složitost práce v případě manuální práce. Ale naštěstí existují bezplatné služby, které jsou připraveny vám práci zjednodušit a udělají vše za vás.

Dobrý den, dnes vám chci říct, jak vytvořit CSS sprite z ikon pro váš web. Ano, v jiných záležitostech nejen ikony, ale i jakékoli další prvky, například tlačítka, nabídky atd. Alespoň grafika celé vstupní stránky.

Článek by měl jít pod nadpis zrychlení a optimalizace, protože použití sprajtů urychluje načítání stránky, protože jeden obrázek, byť větší velikosti, se načítá rychleji než několik menších. K tomu dochází, protože je vytvořeno méně požadavků na server.

Pro ty, kteří to neznají, vypadá sprite takto:

To znamená, že ve vztahu k webu se jedná o jeden obrázek s mnoha prvky, z nichž každý je na webu kvůli umístění zobrazen na správném místě.

Otázku, o kolik rychleji nebo pomaleji se stránka pomocí sprajtů načítá, se ale dotknu až v příštím článku a určitě bude spadat do správné kategorie. Tak se přihlaste k odběru Cvrlikání abych nepromeškal oznámení článku.

A v tomto příspěvku se vám pokusím ukázat vnitřní fungování toho, jak se skřítci používají na webu, na příkladu ikon mého blogu.

Takže jsem vytvořil jednoduchý ikonový sprite ve Photoshopu. Moc jsem se tím netrápil, ale udělal jsem pár od každého typu, abych ukázal nejen, jak se skřítek používá, ale také jak lze skřítky použít k vytvoření pseudoanimace.

Vytvoření css sprite - html markup

Nyní musíte načrtnout html označení. Nic neobvyklého. Neuspořádaný seznam:

Místo „#“ zadejte adresy svých účtů. Přidejte názvy odkazů. A pojďme k přidávání stylů!

Vytvoření css sprite – css markup

Nastavte styly kontejneru:

Socseti (
šířka: 270px;
výška: 150px;
margin:200px auto;
pozadí: url(../images/bg-soc.png) no-repeat;
odsazení: 15px;
}

Popisujeme styly pro text a nečíslovaný seznam, který plujeme doleva (standardní postup pro menu a podobné prvky)

Socseti ul (
přepad: skrytý;
šířka: 246px;
margin:20px auto;
}

Socseti ul li (
plavat vlevo;
margin-left:2px;
}

Socseti ul li: poslední dítě(
pravý okraj: 2px
}

Nyní začíná zábava. Nastavíme obecné styly odkazů:

Socseti ul li a (
displej: blok;
šířka: 59px;
výška: 59px;
}

Jak jste si mohli všimnout, při vytváření sprajtu jsem udělal drobnou chybu a skončil jsem tedy s idiotským rozměrem 59x59 px - na vizuální vjem to ale nemělo vliv. Pokračujme...
Nastavíme obrázek na pozadí pro první odkaz.

A. twitter (

přechod: ,3s;
}
A. twitter:hover(

přechod: ,3s;
}

Aby se požadovaný sprite element zobrazil, musí být umístěn. Chcete-li to provést, po nastavení pozadí odkazu je třeba nastavit souřadnice.

Možná jste si například všimli, že na spritu je prvním prvkem ikona sociální sítě „VKontakte“ a první ikona v sociální nabídce je. ikony - „Twitter“. To znamená, že pokud jsou moje ikony široké 59 pixelů, musím posunout pozadí na -59 pixelů. A také chci, aby se barva změnila z šedé na barevnou. K tomu potřebuji snížit pozadí o 59px. Což je ukázáno zde:

A. twitter (
pozadí: url(../images/css-sprite-iconok2.png) -59px -59px no-repeat;
přechod: ,3s;
}

Aby se styly tříd při najetí kurzorem měnily, musíte nastavit pseudotřídu hover. Co tady dělám:

A. twitter:hover(
pozadí: url(../images/css-sprite-iconok2.png) -59px 0 no-repeat;
přechod: ,3s;
}

A aby obrázek změnil polohu, změnil jsem souřadnice zobrazení.

Vlastnost přechod se používá k nastavení rychlosti změny polohy. Nastavil jsem to na 0,3 sekundy.

Podobným způsobem je třeba nastavit polohu pro zbývající prvky spritu, posunutím o 118 px, aby se zobrazila ikona RSS, a návratem na 0 px pro zobrazení ikony „VK“.

Doufám, že pro vás byl článek užitečný a nyní budete pro své weby používat css sprity. Zítra se pokusím analyzovat, jak rychleji se stránka načítá při použití této technologie.