Týdenní freebies: 12 bezplatných CSS Sprite generátorů
Obrazové skvrny CSS vám umožňují dramaticky snížit počet požadavků HTTP na webu kombinováním mnoha nebo všech obrázků na vašem webu do jednoho souboru. Tento soubor pak lze použít ve spojení s pozicím CSS na pozadí k implementaci jednotlivých obrazů.
Nevýhodou této techniky je, že je to pečlivý, zapojený proces, který vyžaduje, abyste ručně kombinovali své obrázky a housle s CSS, aby se každý obrázek zobrazil správně. Naštěstí existuje řada bezplatných online nástrojů, které tento proces zcela automatizují. Dnes máme úžasnou sbírku dvanácti těchto nástrojů, z nichž každý má svůj vlastní jedinečný přístup k procesu generování sprite. Ať už chcete vytvořit sprite ze složky obrázků nebo převést existující web, máme nástroje, které vám pomohou dokončit práci za pár sekund.
Generátor Sprite CSS: Project Fondue
Dobrý generátor se spoustou možností. Nahrajete .ZIP všech obrázků, které chcete změnit na sprite, a postará se o zbytek. Vyplavuje obrázek a všechny různé hodnoty polohy na pozadí, které potřebujete.
Generátor CSS Sprites
Ošklivý a buggy, tento sprite generátor vás nutí nahrát každý obrázek individuálně. Vyzkoušejte, abyste viděli, co si myslíte, ale upřímně, v tomto seznamu jsou lepší alternativy.
Sprite CSS - Online CSS Sprite Builder / Generator
Tenhle je docela pěkný. Můžete snadno nahrát spoustu obrázků najednou, vybrat si výstupní typ souboru a dokonce se rozhodnout získat buď Sass a CSS kód jako výsledek. Existuje také několik úhledných možností pro automatické generování efektů vznášení, jako jsou desaturované a převrácené. Celkově docela působivé, ujistěte se, podívejte se na to.
Spritebox - Vytvořte CSS ze Sprite Images
Tato trasa vede jinou, o něco méně automatizovanou cestou. Místo toho, abyste pro vás vytvořili obraz sprite, vám umožní nahrát již vytvořený sprite a definovat konkrétní oblasti pro vygenerování výsledného CSS. Skvělý nástroj, pokud dáváte přednost vytváření skřítků ve Photoshopu a chcete jen pomoci s kódem.
Canvas: CSS Sprites Generator
Pokud nahráváte obrázky pro tento, musíte to udělat jeden po druhém, což je trochu bolest. Pokud máte odkazy, můžete je jednoduše vložit do seznamu s odpovídajícími názvy tříd a je dobré jít. Možnosti zahrnují výplň a barvy pozadí. Při mém testování to fungovalo dobře, rozhodně stojí za to se podívat.
Stehy - An generátor listů HTML Sprite
Toto vám umožňuje přetahovat obrázky, což je skvělé po použití všech trapných vykladačů, s nimiž přišli další vývojáři. Poté můžete jednoduše kliknout na jedno tlačítko, abyste získali obrázek, a další na CSS. Prakticky neexistují žádné možnosti a funguje to pouze v prohlížečích Chrome a Firefox, ale je to perfektní, pokud chcete pouze rychlé a jednoduché řešení.
Spritemapper
Tento je určen pouze pro super blbce, jedná se o generátor sprite, který lze stáhnout z příkazového řádku. Implementace je ale velmi úhledná, stačí ji poukázat na existující soubor CSS a zbytek práce provede. Díky tomu je problém dlouhodobé správy sprite skotačením, protože se můžete jednoduše vrátit k původním souborům CSS a obrázků a v případě změny je znovu zpracovat.
SpriteMe
SpriteMe je úžasný nástroj, který vám umožní zcela udržet váš typický vývojový proces v kontaktu. Vytvořte si stránku tak, jak byste normálně používali jednotlivé obrázky. Po dokončení otevřete stránku v prohlížeči a stiskněte záložku SpriteMe. Tím se zachytí všechny obrázky na stránce, vytvoří se sprite a vygeneruje CSS. To je zvláště užitečné, pokud převádíte odcházející stránku.
Spritefy
Spritefy je další možnost, která vám umožní jednoduše přetáhnout spoustu souborů do prohlížeče a zpracovat je. Stejně jako u stehů, ve skutečnosti neexistují žádné možnosti, ale je to určitě super rychlý způsob, jak se dostat do běhu s sprites (pouze Chrome a Firefox).
Generátor Sprite CSS
Tento má několik zbytečných kroků v procesu generování a nastavení, takže trvá několik sekund déle než většina ostatních alternativ, ale má spoustu výstupů kódu včetně CSS a HTML spolu s různými úryvky pro přidání každého obrázku do div nebo rozpětí, vkládání odkazů atd.
SpriteMeister - automatický generátor Sprite CSS
SpriteMeister je hodně podobný SpriteMe výše, pouze méně automatizovaný. Namísto použití záložek ručně nahrajete každý obrázek a aktuální soubor CSS a poté obdržíte aktualizaci s aktualizovaným kódem a jedním obrázkem.
Sprite Creator 2.0
Tenhle funguje stejně jako Spritebox výše. Nahrajete sprite obrázek, který jste vytvořili jinde, a pomocí jednoduchého procesu výběru automaticky vygenerujete vhodný CSS pro každý obrázek.
Miluji to? Sdílej to!
Pokud se vám tento týden sbírka bezplatných programů líbila, sdílejte lásku a pošlete odkaz na své oblíbené stránky. Zde je vhodný úryvek, který můžete zkopírovat a vložit, jak chcete!
12 bezplatných generátorů CSS Sprite: http://goo.gl/NhLNR
