Есть ли какие-нибудь хорошие инструменты для создания css-спрайтов?
ИДЕАЛЬНО я бы хотел дать ему каталог изображений и существующий файл .css, который ссылается на эти изображения, и создать большое изображение, оптимизированное со всеми маленькими изображениями, И изменить мой файл .css, чтобы он ссылался на эти изображения.
По крайней мере, я бы хотел, чтобы он взял каталог изображений и сгенерировал большой спрайт и .css, необходимые для использования каждого в качестве фона.
Есть ли для этого какие-нибудь хорошие плагины для фотошопа или полноценные приложения?
css
css-sprites
web-performance
Simon_Weaver
источник
источник
Ответы:
Это сделает за вас 90% работы: CSS Sprite Generator . Вам все равно придется отредактировать правила самостоятельно, но инструмент предоставит вам фрагменты кода, необходимые для нового файла CSS.
источник
Instant Sprite - это встроенный в браузер генератор спрайтов 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 web toolkit есть что-то, так что, если вы используете это, возможно, стоит проверить.
источник
Попробуй это:
http://spritepad.wearekiss.com/
источник
ZeroSprites - это генератор CSS-спрайтов, предназначенный для минимизации площади с использованием алгоритмов планирования этажей VLSI.
источник
обнаружил, что это довольно быстро, хотя ограничение загрузки 500K может быть проблемой. исходный код доступен здесь
источник
Tonttu - это приложение на основе Adobe AIR, которое обеспечивает простой интерфейс для создания мощных изображений CSS Sprites. Вы можете указать FiledWidth и FieldHeight или отсортировать изображения.
Создавайте изображения CSS-спрайтов с помощью Tonttu Desktop Tool
источник
Пока не ясно, войдет ли он в базовую структуру ASP.NET, но вот проект Microsoft codeplex для csssprites:
http://aspnet.codeplex.com/releases/view/50869
если вам это нравится - используйте - или просто как идея тогда добавьте комментарий. Я думаю, что это было бы здорово, если бы это было во фреймворке ASP.NET. Лично не пользовался (пришлось самому изобретать колесо), но отзывы получил хорошие.
В его состав входят следующие компоненты:
Функции, добавленные во втором выпуске:
Рассматриваемые функции для будущих выпусков:
источник
Просто используйте http://sprites.scherpontwikkeling.nl/, он также может генерировать спрайты из URL-адресов веб-сайтов ... вы можете интегрировать свои спрайты после разработки своего веб-сайта. Пользоваться очень просто;)
источник
Не прямой ответ, но моим коллегам-разработчикам и веб-интеграторам, подумайте о том, чтобы просто выровнять каждый спрайт по степени двойки; например, сетка из 16 или 32 пикселей. Это значительно упрощает расчет смещений в файле CSS. Все пробелы между ними не имеют значения, поскольку форматы gifd и png сжимают это очень хорошо.
источник
В Compass CSS Framework есть автоматическая генерация спрайтов .
источник
Если вам нравится Java, вы можете использовать GWT 1.5+, который поставляется с чем-то под названием « ImageBundle ». Компилятор GWT обработает все неприятные детали за вас. Вам даже не придется кодировать ни одной строчки JavaScript или писать какой-либо CSS.
источник
Вот сценарий, который объединяет изображения с помощью сценария Photoshop в спрайты CSS . Он не будет создавать карту спрайтов, как вы просили, но он будет объединять изображения, кратные двум (2, 4, 8), если они одинакового размера. Я предпочитаю комбинировать похожие изображения (обычные, наведенные, выделенные, родительские или выбранные), чем все изображения в одном файле.
источник
если вы используете Ruby on Rails, существует простая в установке библиотека для создания спрайтов css.
http://github.com/aberant/spittle
источник
Есть новый инструмент под названием ActiveSprites, часть гема active_assets.
Github: http://bitly.com/eRTwU4
Вы используете ruby dsl для определения ваших спрайтов, а затем выполняете «rake sprites» и генерируете спрайты и соответствующие таблицы стилей.
Это круто!
Вот пример кода,
источник
https://github.com/northpoint/SpeedySprite
Этот инструмент использует новый подход, поскольку он собирает запрошенные вами изображения на лету в виде службы http. Это делает весь процесс довольно простым (предварительная обработка не требуется, изображения можно менять в любое время): вы запускаете службу, а затем ссылаетесь на любые изображения, которые хотите в своем HTML:
Поскольку он динамический, вы даже можете создавать спрайты из динамического набора изображений, например страницы эскизов. Не поддерживает JPEG, но PNG и GIF работают нормально.
источник
Предлагаю вам использовать Sprite Master Web . Я автоматически генерирую листы спрайтов и экспортирую для вас код CSS. Он всегда пытается сгенерировать самые маленькие листы спрайтов с помощью продвинутых алгоритмов.
Вот скриншот и видео на YouTube
источник
Ни один из этих инструментов не соответствовал моим требованиям, поэтому я написал тот, который использует крошечную библиотеку изображений Марка Тайлерса, mtpixel (теперь часть mtcelledit ). Она не очень обширная, но ее легко расширять с помощью встроенных функций mtpixel, которые включают: шкалу серого, инверсию цвета. , вращение, резкость, квантование, постеризация, отражение (по вертикали и горизонтали), преобразование, rgb-> indexed, indexed-> rgb, определение краев, тиснение, рисование многоугольников, текста и многое другое.
Все, что вам нужно сделать, это передать ему набор изображений в виде аргументов (поддерживает png, gif и jpeg), и он выведет rgb png с именем sprite.png вместе с полезными данными нарезки изображений в стандартный вывод. Я использую его в сценариях bash для спрайтинга всего каталога изображений и вывода данных нарезки для автоматического создания css (с надеждой, что в конечном итоге он сможет автоматически заменить существующие теги img с помощью небольшого творческого sed / awk)
Бинарные пакеты для puppy linux будут здесь:
http://murga-linux.com/puppy/viewtopic.php?t=82009
Мой вариант использования требовал только вертикального сращивания изображений в новый png, так что это все, что он делает, но мой исходный код является общественным достоянием, а библиотека mtcelledit - gpl3. Со статически связанной mtpixel двоичный файл имеет размер <100 КБ (всего несколько КБ при динамической компоновке), а единственными другими зависимостями являются libpng, libjpeg и libgif (и freetype с официальным mtpixel, но мне не нужна текстовая поддержка, поэтому я закомментировал биты freetype в статической сборке)
не стесняйтесь изменять для своих нужд:
источник
Если вы используете .net, посетите http://www.RequestReduce.com . Он не только автоматически создает файл спрайта, но и делает это «на лету» через HttpModule вместе с объединением и уменьшением всего CSS. Он также оптимизирует изображение спрайта с помощью квантования и сжатия без потерь и обрабатывает сгенерированные файлы с помощью заголовков ETags и Expires для обеспечения оптимального кэширования браузера. Настройка тривиальна и требует простого изменения web.config. См. Мое сообщение в блоге о его принятии в галерее образцов Microsoft Visual Studio и MSDN.
источник
Недавно я нашел эти инструменты: SpriteRight http://spriterightapp.com/
SpriteRight - это генератор таблиц спрайтов CSS для Mac, который позволяет импортировать существующие изображения или таблицы стилей. Ускорьте загрузку сайтов, сократите расходы на пропускную способность и сэкономьте время. SpriteRight даже генерирует код CSS на лету.
источник