Седмични безплатни: 12 безплатни CSS спрайта генератори
CSS спрайтите за изображения ви позволяват да намалите драстично броя на HTTP заявките на даден сайт, като комбинирате много или всички изображения на вашия сайт в един файл. След това този файл може да се използва заедно с CSS фоново позициониране за реализиране на отделни изображения.
Недостатъкът на тази техника е, че това е старателен и ангажиран процес, който изисква ръчно да комбинирате вашите изображения и да се срещнете с CSS, за да получите всяко изображение да се показва правилно. За щастие има редица безплатни онлайн инструменти, които напълно автоматизират този процес. Днес имаме страхотна колекция от дванадесет от тези инструменти, всеки със собствен уникален процес на генериране на спрайт. Независимо дали искате да създадете спрайт от папка с изображения или да конвертирате съществуващ сайт, ние имаме инструментите, които да ви помогнат да свършите работата за секунди.
CSS Sprite Generator: Фонд на проекта
Добър генератор с много възможности. Качвате .ZIP от всички изображения, които искате да се превърнат в спрайт и той се грижи за останалото. Изплюва изображение и всички различни стойности на „фон-позиция“, от които се нуждаете.
CSS Sprites generator
Грозен и бъги, този спрайт генератор ви принуждава да качвате всяко изображение поотделно. Опитайте го, за да видите какво мислите, но честно казано, в този списък има по-добри алтернативи.
CSS Sprites - Онлайн CSS Sprite Builder / Generator
Този е доста хубав. Можете лесно да качите куп изображения наведнъж, да изберете изходния си тип и дори да изберете Sass и CSS код като резултат. Също така има някои спретнати опции за автоматично генериране на ховър-ефекти като десатирани и обърнати. Като цяло доста впечатляващо, не забравяйте да го проверите.
Spritebox - Създайте CSS от Sprite Images
Този е по различен, малко по-малко автоматизиран маршрут. Вместо да създаде спрайт изображение за вас, той ви позволява да качите вече създадения спрайт и да определите конкретни области, за да генерирате получения CSS. Чудесен инструмент, ако предпочитате да изграждате спрайтове във Photoshop и просто искате помощ с кода.
Canvas: CSS Sprites Generator
Ако качвате изображения за това, трябва да го правите едно по едно, което е малко болка. Ако имате връзки, можете просто да ги поставите в списък със съответни имена на класове и сте добре да отидете. Опциите включват подплънки и цветове на фона. Подейства добре при моето тестване, определено си струва да разгледаме.
Шевове - генератор на спрайт HTML5 спрайт
Този ви позволява да влачите изображения, което е страхотно след използването на всички неудобни разтоварители, които са разработили други разработчици. След това можете просто да кликнете върху един бутон, за да получите изображението, а друг да вземете CSS. На практика няма опции и тя работи само в Chrome и Firefox, но е идеална, ако просто искате бързо и просто решение.
Spritemapper
Този е само за супер нерви, това е справочен генератор на спрайт, който стартирате от командния ред. Реализацията е наистина гладка, но просто я насочвате към съществуващия си CSS файл и свършва останалата част от работата. Това прави проблема с дългосрочното управление на спрайт кинч, тъй като можете просто да се закачите на оригиналните си файлове css и изображения и да ги обработите отново, когато има промяна.
SpriteMe
SpriteMe е страхотно средство, което ви позволява напълно да поддържате типичния си процес на развитие в такт. Просто изградете страницата си, както обикновено бихте използвали отделни изображения. След това, след като приключите, отворете страницата в браузър и натиснете отметката SpriteMe. Това грабва всички изображения на страницата, създава спрайт и генерира CSS. Това е особено полезно, ако преобразувате изходен сайт.
Spritefy
Spritefy е друга опция, която ви позволява просто да плъзнете куп файлове в браузъра, за да ги обработите. Както при шевовете, тук наистина няма опции, но определено е много бърз начин да станете и да работите с спрайтове (само за Chrome и Firefox).
CSS Sprite Generator
Този има няколко ненужни стъпки в процеса на генериране и настройка, така че отнема няколко секунди по-дълго, отколкото повечето други алтернативи, но има тона код на изхода, включително CSS и HTML, заедно с различни фрагменти за добавяне на всяко изображение към div или span, вмъкване на връзки и т.н.
SpriteMeister - Автоматичен CSS Sprite Generator
SpriteMeister е много подобен на SpriteMe по-горе, само по-малко автоматизиран. Вместо да използвате маркер, вие качвате ръчно всяко изображение и текущия си CSS файл и след това получавате изтегляне с актуализиран код и едно изображение.
Sprite Creator 2.0
Този работи точно като Spritebox по-горе. Качвате спрайтовото изображение, което сте създали другаде и използвате прост процес на избор, за да генерирате автоматично съответния CSS за всяко изображение.
Обичам го? Сподели го!
Ако сте се насладили на колекцията от безплатни тази седмица, споделете любовта и изпратете линк в любимите си сайтове. Ето удобен фрагмент за вас, който можете да копирате и поставите, както желаете!
12 безплатни CSS спрайта генератори: http://goo.gl/NhLNR
