Інструменти для створення спрацювань CSS? [зачинено]

Чи є якісь хороші інструменти для виготовлення css спрайтів?

ІДЕАЛЬНО Я хотів би надати йому каталог зображень та існуючий файл .css, який посилається на ці зображення, і він створить велике зображення, оптимізоване під усі маленькі зображення, та змінить мій .css-файл на посилання на ці зображення.

По крайней мере, я хотів би, щоб він взяв каталог зображень і створив великий спрайт і .css, необхідні для використання кожного в якості фону.

Чи є якісь хороші плагіни Photoshop або повністю роздуті додатки для цього?

Це зробить 90% роботи за вас: CSS Sprite Generator . Вам все одно потрібно буде самостійно редагувати правила, але інструмент надасть вам фрагменти коду, необхідні для нового файлу CSS.

Моментальний спрайт - це генератор спрайтів CSS, що працює в браузері, над яким я працюю. Це дуже швидко, але не має стільки функцій, як деякі інші. Наразі він працює лише у Firefox чи Chrome, оскільки використовує JavaScript FileReader та HTML Canvas для генерації спрайтів у веб-браузері без завантажень.

Зараз є Sprite Me Стів Суудерс. Просто спробує це, і, здається, працює досить добре.

Ось посилання http://spriteme.org/ і ось повідомлення в блозі, яке оголошує його.

http://www.stevesouders.com/blog/2009/09/14/spriteme/

Це виглядає перспективно:

http://csssprites.org/

Також я знайшов цю статтю, яка містить корисну інформацію і навіть деякі коментарі читачів, які варто прочитати.

Крім того, очевидно, що в Google Toolkit є щось, тож якщо ви користуєтесь цим, можливо, варто перевірити.

Спробуйте це:

http://spritepad.wearekiss.com/

ZeroSprites - це генератор спрайтів CSS, спрямований на мінімізацію площі за допомогою алгоритмів планування настилів VLSI.

знайшов цей досить швидкий, що обмеження на завантаження 500K може бути болем. вихідний код доступний тут

Tonttu - це програма на базі Adobe AIR, яка забезпечує простий інтерфейс для створення потужних зображень CSS Sprites. Ви можете вказати FiledWidth та FieldHeight або сортувати зображення.
Створіть зображення CSS-спрайтів за допомогою інструмента робочого столу Tonttu

Ще не ясно, чи вдасться він перетворити його в основну рамку ASP.NET, але ось проект кодеклера Microsoft для csssprites:

http://aspnet.codeplex.com/releases/view/50869

якщо вам це подобається - використовуйте його - або просто подобається ідея, тоді додайте коментар. Я думаю, що це було б чудовою справою в рамках ASP.NET. Я особисто не використовував його (мені довелося вигадувати колесо), але отримав хороші відгуки.

Вона включає наступні компоненти:

• API для автоматичної генерації спрайтів та вбудованих зображень
• Контролі та помічники, які забезпечують зручний спосіб входу в API

Особливості, додані у другому випуску:

• Керування CSS-зв’язком для веб-форм (вибирає належний файл CSS для веб-переглядача користувача, але не відображає зображення)
• Використання спеціальних шляхів до папок, крім App_Sprites
• Зміна напрямку плитки зображень спрайтів
• Об'єднання створеного CSS з власним CSS користувача

Особливості, що розглядаються для майбутніх випусків:

• Автоматичний вибір найефективнішого кольору фону спрайта
• Автоматичне мінімізація наданого CSS
• Компіляція проти .NET 3.5

Просто використовуйте http://sprites.scherpontwikkeling.nl/ він може генерувати спрайти з URL-адреси веб-сайту, а також ... Ви можете інтегрувати свої спрайти після розробки вашого веб-сайту. Це дуже просто у використанні;)

Не пряма відповідь, але моїм колегам-розробникам та веб-інтеграторам, подумайте про просто узгодження кожного спрайту з двома можливостями; наприклад, сітка 16 пікселів або 32 пікселів. Це значно спрощує обчислення компенсацій у файлі CSS. Весь пробіл між ними не має значення, оскільки формати gifd та png стискають це дуже добре.

Компас CSS Framework має автоматичне спрайтування .

Якщо вам подобається Java, тоді ви можете використовувати GWT 1.5+, який постачається з тим, що називається " ImageBundle ". Компілятор GWT обробляє всі неприємні для вас деталі. Вам навіть не доведеться кодувати один рядок JavaScript або писати будь-який CSS.

Ось сценарій, який поєднує зображення за допомогою сценарію Photoshop у спрати CSS . Він не буде робити спрайт-карту, як ви просили, але вона буде поєднувати зображення у кратних розмірах (2, 4, 8), якщо вони однакового розміру. Я вважаю за краще поєднувати подібні зображення (звичайні, наведення курсора, вибрані, батьківські обрані), ніж всі зображення в одному файлі.

якщо ви використовуєте рубін на рейках, бібліотека може легко встановити для генерації CSS-спрайтів.

http://github.com/aberant/spittle

Там є новий інструмент під назвою ActiveSprites, частина дорогоцінного каміння active_assets.

Github: http://bitly.com/eRTwU4

Ви використовуєте ruby ​​dsl для визначення своїх спрайтів, а потім робіть "рейти спрайт", і спрайти та відповідні таблиці стилів генеруються.

Це рад!

Ось приклад коду,

# config/sprites.rb
Rails.application.sprites do
  sprite 'sprites/sprite1.png' => 'sprites/sprite1.css' do
    _'sprite_images/sprite1/1.png' => 'a.one'
    _'sprite_images/sprite1/2.png' => 'span.two'
  end
end

https://github.com/northpoint/SpeedySprite

Цей інструмент використовує новий підхід, оскільки він збирає запитувані зображення на льоту як сервіс http. Це робить весь процес досить простим (попередня обробка не потрібна, зміни зображень в будь-який час): Ви запускаєте послугу, а потім посилаєтесь на всі потрібні зображення у своєму HTML:

<link href="css/my-images-dir/" rel="stylesheet">
<div class="my-image-name-here" />

Оскільки це динамічно, ви навіть можете робити спрайти з динамічного набору зображень, таких як сторінка мініатюр. Хоча не підтримує JPEG, але PNG та GIF працює чудово.

Я пропоную вам скористатися Sprite Master Web . Я генерую спрайт-аркуші автоматично та експортую CSS-код для вас. Він завжди намагається генерувати найменші спрайтові аркуші з розширеними алгоритмами.

Ось скріншот та відео на YouTube

Жоден із цих інструментів не відповідав моїм вимогам, тому я написав той, який використовує крихітну бібліотеку зображень Марка Тайлерса, mtpixel (тепер це частина mtcelledit ). Це не надто обширно, але легко розширюється завдяки вбудованим функціям mtpixel, які включають: масштабність сірого, інверсія кольорів , обертання, загострення, квантування, постеризація, фліп (вертикальний і горизонтальний), перетворення, rgb-> індексований, індексований-> rgb, виявлення краю, тиснення, малювання багатокутників, текст тощо.

Все, що вам потрібно зробити, - це передавати йому набір зображень у вигляді аргументів (підтримує png, gif та jpeg), і він виведе rgb png під назвою sprite.png разом з корисними даними нарізки зображення для stdout. Я використовую його в bash-скриптах, щоб справити цілий каталог зображень і вивести дані нарізки для автоматичного генерування css (з надією зрештою зробити це здатним автоматично замінити існуючі теги img автоматично з трохи творчого sed / awk)

Бінарні пакети для щенячого Linux будуть тут:

http://murga-linux.com/puppy/viewtopic.php?t=82009

Мій випадок використання вимагав лише сплайсування зображень вертикально на новий png, так що це все, але це мій вихідний код - публічне надбання, а бібліотека mtcelledit - gpl3. Якщо статично пов'язаний mtpixel, двійковий код становить <100 кбіт (лише кілька кб при динамічному зв’язку), а єдиними іншими залежностями є libpng, libjpeg і libgif (і вільний тип з офіційним mtpixel, але мені текстова підтримка не потрібна, тому мені прокоментував біти вільної форми в статичній збірці)

сміливо змінюйте для власних потреб:

#include <stdlib.h> 
#include <stdio.h> 
#include <string.h> 
#include <mtpixel.h> 

int main( int argc, char *argv[] ){ 
int i=0,height=0,width=0,y=0; 
mtpixel_init(); 
mtImage *imglist[argc]; 
argc--; 
do{   imglist[i] = mtpixel_image_load( argv[i+1] ); 
   height+=imglist[i]->height; 
   if (imglist[i]->width > width) width=imglist[i]->width; 
} while (++i < argc); 
imglist[argc]=mtpixel_image_new_rgb(width,height); 
imglist[argc]->palette.trans=0; 
i=0; 
do{   if (imglist[i]->type == MTPIXEL_IMAGE_INDEXED) 
      mtpixel_image_paste(imglist[argc],mtpixel_image_to_rgb(imglist[i]),mtpixel_brush_new(),0 ,y); 
   else mtpixel_image_paste(imglist[argc],imglist[i],mtpixel_brush_new(),0 ,y); 
   printf("name=%s;width=%d;height=%d;y_offset=%d\n",argv[i+1],imglist[i]->height,imglist[i]->width,y); 
   y+=imglist[i]->height; 
   mtpixel_image_destroy( imglist[i] ); 
}while (++i < argc); 
   mtpixel_image_save( imglist[argc], "sprite.png", MTPIXEL_FILE_TYPE_PNG, 5 ); 
mtpixel_quit(); 
return 0; 
}

Якщо ви використовуєте .net, перегляньте http://www.RequestReduce.com . Він не тільки створює файл спрайту автоматично, але і робить це на ходу через HttpModule разом із об'єднанням та мінімізацією всіх CSS. Це оптимізує спрайт-зображення за допомогою квантування та стиснення без втрат, а також обробляє обслуговування створених файлів за допомогою заголовків ETags та Expires для забезпечення оптимального кешування браузера. Налаштування тривіальне, що включає лише просту зміну web.config. Дивіться мій пост у блозі про його прийняття в галереї Microsoft Visual Studio та MSDN Samples.

я нещодавно знайшов цей інструмент: SpriteRight http://spriterightapp.com/

SpriteRight - це генератор спрайтів CSS для Mac, який дозволяє імпортувати наявні зображення чи таблиці стилів. Зробіть, щоб ваші сайти завантажувалися швидше, скорочували витрати на пропускну здатність та економили час. SpriteRight навіть генерує CSS-код на льоту.