Генератор спрайтов css: Генератор CSS спрайтов — объединяйте изображения в CSS спрайты в один клик!

Удобный генератор CSS спрайтов / Хабр

Каким должен быть инструмент, чтобы в нем было удобно создавать и редактировать CSS спрайты? У каждого будет свой ответ на этот вопрос, а я всего лишь поделюсь своими соображениями и продемонстрирую свой генератор спрайтов.

По большей части моя работа со спрайтами сводилась к следующему:

Итак, начнем с самого начала

Краткая история

Прошлое

Давным-давно я верстал сайты. Начальство требовало ускорить загрузку страниц и поэтому я начал объединять картинки в спрайты.

В Photoshop я резал макет на части и затем объединял их с помощью PHP скрипта. Честно, я был удивлен, что в Photoshop нельзя объединить выделенные области в один файл, но в любом случае ожидать от редактора изображений еще и автоматической генерации стилей — уже явный перебор. Я простил разработчиков за такой скудный функционал и написал php скрипт, который генерировал спрайты и файл со стилями.

Сайтов было много, и скрипт существенно ускорял мою работу. Причем правила группировки я писал один раз для одного сайта. Если менялся макет, а области оставались на том же месте, то я просто подсовывал скрипту новую картинку и он заново все генерировал.

Признаюсь, был один недостаток в таком подходе. Качество картинок, которые выдает PHP мягко говоря «не очень». Поэтому я настраивал скрипт таким образом, чтобы в стилях расширения файлов были jpg, png, gif, а картинки генерировались в BMP формат. И потом я вручную конвертировал в нужный формат с помощью Photoshop.

Настоящее

Спустя много лет мне опять пришлось сверстать макет с помощью спрайтов. И тут мне стало интересно. Что появилось за это время для упрощения процесса?

Photoshop опять меня не порадовал. Зато генератор спрайтов появился в Fireworks CS6. Но просмотрев несколько видео и статей, я понял, что он мне не подходит, так как не выполняет всех моих требований.

Так же появилось много отдельных генераторов. Небольшой обзор уже был на хабре, там же приведены ссылки на генераторы. Но не один из генераторов не выполнял всех задач, которые я выдвигаю к генератору спрайтов.

Каким я вижу генератор спрайтов

Если коротко, то генератор спрайтов должен:

• Уметь разрезать исходные картинки на части
• Уметь соединять порезанные части в спрайты
• Одновременно генерировать стили
• Главное — иметь удобный графический интерфейс

Ранее соединял картинки и генерировал стили мой PHP скрипт, я лишь прописывал для этого правила. Но сейчас мне показалось этого мало. Как минимум настройка правил в текстовом редакторе уже устарело. Сейчас все должно управляться кнопочками и настраиваться с помощью графического интерфейса.

Но раз уж делать графический интерфейс, то и Photoshop особо не нужен. Выделение областей и разрезание картинки — задача тривиальная для javascript и HTML5.

Все эти четыре пункта явно хотят объединиться в один единственный редактор.

А для редактора очень важно сохранять проект на случай если потом нужно будет что-то подправить.

Как видно, в файл проекта должны сохраняться все исходные картинки и все правила разбивки, объединения картинок и генерации стилей.

Теперь остановимся на графическом интерфейсе. В нем должно быть следующее:

• Кнопочки для открывания картинок, правил или всего проекта.
• Кнопочки для сохранения результата и проекта.
• Настройка правил разбиения картинки на области. То есть: пользователь выделяет области, видит список областей, может их редактировать.
• Настройка правил группировки областей в спрайт. Тут должна быть возможность указать в каком месте спрайта должна быть картинка
• Настройка правил генерации стилей. Для каждой картинки в спрайте должны настраиваться способ генерирования стилей: генерировать или нет ширину, высоту, repeate-x, repeate-y, no-repeate, имя класса

Главное — при добавлении картинок в проект должны генерироваться некие стандартные правила, чтобы избавить пользователя от лишних действий по настройке. Например, добавили мы иконку «firefox.png». Программа должна автоматически создать область «firefox» (на всю ширину и высоту) и стиль:
.firefox{ width:16px; height:16px; background: url('data:image/png;base64,.....==') 0px 0px no-repeat; }

И потом уже мы можем переместить область в другой спрайт или отредактировать генерацию стилей.

Обзор решений

Теперь кратко, почему мне не подошли существующие решения.

Compass — написан на Ruby. Пишутся стили с особым синтаксисом и программа потом генерирует обычные стили со спрайтами.
Lemonade — суть такая же и на сайте написано что он теперь встроен в тот же Compass.
Glue — командная строка для генерации спрайтов.

Эти инструменты я сравнил с тем что у меня было более пяти лет назад, когда я прописывал правила в php скрипте и он генерировал спрайты. Но сейчас мне уже хотелось именно визуальный редактор.

SpriteMe — перетаскиваем ссылку в букмарклет и потом можно редактировать спрайты на просматриваемом сайте. Но мне не нужно редактировать спрайты на существующем сайте. Мне нужен редактор на этапе, когда сайт еще верстается.

Spritepad — методом drag-and-drop перетаскиваем картинки на спрайт и справа выводятся все стили. Уже ближе к тому что я хотел. Но почему только drag-and-drop? Неужели сайт лишь демонстрирует новую фичу браузеров? Мне не всегда удобно перетаскивать, я хочу добавлять картинки через обычную кнопку «Открыть». Картинки сохраняются только в PNG? Нельзя создавать одновременно несколько спрайтов? Все-таки этот генератор сильно прост.

Sprite Cow — интересная штука. Если у вас уже есть готовый спрайт, то Sprite Cow поможет вам выделить отдельные области и сгенерировать для них css правила. Но css генерируется только для одной выделенной области. То есть если у вас куча иконок, то нужно каждую выделять и копировать css в ваш редактор стилей. В общем, идея хорошая, может сократить время при определении координат и размеров в спрайте, но сильно уж узконаправленная и опять же не решает моих задач.

Еще онлайн сервисы:

• css-sprit.es,
• csssprites.com,
• spritegen.website-performance.org,
• css.spritegen.com

В них процесс выглядит следующим образом:

1. загрузка картинок,
2. настройка параметров,
3. генерация

Но все равно, мне они показались не удобными и не практичными. Вообще, каждое из рассмотренных выше приложений вызывало у меня чувство дискомфорта из-за того, что не оказывалось нужной опции или был неудобный интерфейс.

Не захотел я мириться с таким положением вещей и сваял свой генератор.

Рад представить

CSS Sprite Generator by Simpreal

Программа является воплощением всех вышеописанных требований. И много идей еще в процессе реализации.
Важно отметить, что есть возможность сохранить проект, и тогда не нужно будет следующий раз все заново настраивать.

На главной странице в разделе «Examples» есть несколько проектов-примеров. Надеюсь они помогут разобраться в возможностях программы.

Генератор спрайтов работает онлайн. Собран из Bootstrap, Knockoutjs и само собой Jquery.

Главное, в ходе разработки проекта было получено много опыта особенно по Knockoutjs. Этот опыт вылился в две статьи на хабре:

Canvas в GIF на Javascript
Оптимизация knockoutjs при динамическом добавлении и удалении темплейтов

Если у кого-нибудь возникнут еще вопросы связанные с реализацией того, что умеет генератор спрайтов, то я с радостью отвечу.

Так же существует офлайн версия под Windows. Она представляет собой оболочку на Awesomium в которую просто вставляются web-файлы. Но на самом деле мне пришлось поработать чтобы все функции заработали в этой оболочке. Так что могу поделится и этим опытом.

Что дальше

За процессом разработки можно следить на smartprogress

Сейчас я работаю над интеграцией редактора с сервером, для более удобного сохранения результатов. В идеале по нажатию одной кнопки все спрайты и стили будут обновлятся на редактируемом сайте.

К сожалению, за пол года практически никто не стал пользоваться программой. Поэтому демонстрирую программу хабросообществу, чтоб узнать ваше мнение о полезности данного продукта.

Я лишь пока предполагаю, что очень мало людей в принципе пользуются спрайтами. Например, за последние 5 лет я лишь один сайт так делал знакомым. Реальные же заказчики сейчас не обращают на это внимания.

Поэтому сложно сказать, что будет дальше. Если людям понравится идея программы, то она будет развиваться. Если же нет, то она либо останется как есть, либо превратится в нечто другое.

В любом случае опыт бесценен!
И если мне понадобится сверстать сайт спрайтами, то у меня уже будет для этого удобный инструмент!

CSS спрайты для увеличения скорости загрузки сайта

Всем привет! Начну с того, что CSS спрайтами я впервые заинтересовался ещё год назад, однако на тот момент я так и не смог полностью разобраться с этой технологией и найти ей достойное применение на своём блоге.

Буквально на днях я вновь вернулся к этой теме и, наконец-то, добился желаемого результата. Начну с рассказа о том, что такое CSS спрайты, каково их предназначение и самое главное — как самостоятельно создать спрайт.

Для подробного описания последовательности создания спрайта я приведу наглядный пример. Таким образом мне удастся разложить по полочкам все действия, чтобы воочию посмотреть на результат. В случае чего — спрашивайте, с удовольствием отвечу. Итак, поехали!

Что такое CSS спрайты, их польза и предназначение на сайте

Пару слов о пользе применения спрайтов. Самое главное достоинство этой технологии — сокращение числа HTTP-запросов к серверу. Каждый подключаемый элемент на странице, будь то изображение, скрипт или другой файл создает дополнительный запрос на сервер.

Чем ниже пропускная способность сети пользователя, тем меньше потоков данных будет поступать с сервера, а значит и сайт будет загружаться намного дольше. Таким образом, сокращая число запросов мы увеличиваем скорость загрузки страницы.

CSS Sprite — это способ уменьшить количество изображений путём объединения нескольких изображений в одно. Затем используетcя CSS-свойство позиционирования background-position для отображения только той части изображения, которая вам нужна.

Это отличная техника для повышения скорости загрузки страниц, потому что вы можете легко поместить десятки маленьких иконок в одно изображение и загрузить их одновременно, сокращая множество HTTP-запросов.

Для ручного объединения элементов в один файл потребуется графический редактор и немного времени. Затем необходимо определить относительные координаты каждого элемента в спрайте и написать свойства позиционирования для файла стилей. Я предлагаю облегчить задачу благодаря онлайн инструменту.

CSS Sprites Generator и тонкости, которые нужно знать

В качестве удобного и надёжного инструмента я предлагаю воспользоваться генератором CSS спрайтов. Вариантов великое множество и все выполняют возложенные на них задачи, но мне больше всего нравится CSS Sprites Generator, созданный инженерами компании Toptal.

Для начала немного теории. Если один или несколько элементов спрайта требуется использовать в качестве повторяющегося фонового изображения при помощи свойства repeat, тогда требуется выполнить любое из двух условий:

• применяя свойство repeat-x располагайте элементы спрайта по вертикали или размещайте одно повторяющееся фоновое изображение крайним правым в случае горизонтального спрайта;
• применяя свойство repeat-y располагайте элементы спрайта по горизонтали или размещайте одно повторяющееся фоновое изображение крайним нижним в случае вертикального спрайта.

Проще говоря, изображение повторяющегося фона необходимо располагать в спрайте таким образом, чтобы при перемещении в горизонтальном (X) или вертикальном (Y) направлении на пути не встречалось другое изображение.

Порядок создания CSS спрайта с помощью генератора

Перехожу от теории к практике. В качестве примера я предлагаю использовать три отдельные иконки, которые в конечном итоге объединим в спрайт. Подготовьте свои изображения и можно приступать к следующему шагу.

Переходим на страницу онлайн генератора спрайтов CSS Sprites Generator и загружаем заранее подготовленные файлы нажатием конки Choose files или простым перетаскиванием на страницу методом Drag & Drop.

Не пытайтесь загружать огромные файлы — это противоречит логике спрайтов. Они предназначены для объединения нескольких небольших изображений.

Настройки состоят из двух параметров:

• Padding between elements (px) — отступ между элементами в пикселях,
• Align elements — выравнивание элементов.

Используйте отступы между элементами, чтобы при масштабировании страницы элементы не «наезжали» друг на друга. Ниже разберёмся с вариантами выравнивания элементов.

Binary Tree — бинарное дерево — наиболее эффективный по размеру алгоритм размещения элементов:

Diagonal — диагональ — каждый элемент может иметь неограниченное горизонтальное или вертикальное фоновое заполнение без пересечения с другими элементами спрайта:

Diagonal (Alternative) — диагональ (альтернатива) — то же самое, что диагональ, но используется диагональ в другом направлении:

Top-down — сверху вниз — элементы расположены вертикально поочерёдно сверху вниз:

Left-right — слева направо — элементы расположены горизонтально поочерёдно слева направо:

В моём случае более предпочтительным является последний вариант с горизонтальным размещением элементов слева направо, так как иконки социальных сетей не предназначены для использования в качестве повторяющегося фонового изображения и по форме максимально приближены к размещению на блоге.

После выбора и загрузки файлов на странице CSS Sprites Generator вы увидите готовые стили, которые необходимо скопировать и добавить в файл style.css. На основе примера я получил следующий код:

.bg-RSS {
	width: 85px; height: 50px;
	background: url('css_sprites.png') -10px -10px;
}
 
.bg-Twitter {
	width: 85px; height: 50px;
	background: url('css_sprites.png') -115px -10px;
}
 
.bg-Mail {
	width: 85px; height: 50px;
	background: url('css_sprites.png') -220px -10px;
}

Дело остаётся за малым — нажатием кнопки Download скачать готовый файл спрайта с именем css_sprites.png и загрузить на свой сервер. Вы можете переименовать файл, главное в будущем не забудьте сделать тоже самое в файле стилей, а также отредактировать путь к файлу.

В конечном итоге результатом работы онлайн генератора стало такое изображение, в котором собраны воедино все три иконки:

В принципе, на этом создание спрайта завершено. На выходе мы получили файл изображения и готовые стили. А что делать дальше? За основу примера я выбрал иконки, которые являются ссылками на внешние сайты, поэтому каждой ссылке необходимо присвоить свой класс для тега <a> , например: <a href="..."></a>

Все графические элементы оформления сайта можно объединить в один спрайт, но такой подход в будущем может вызвать трудности.

Представьте ситуацию, в которой необходимо заменить одно изображение на другое — придётся менять стили всех элементов, так как изменятся координаты. Избежать подобных проблем позволит создание нескольких спрайтов, объединяющих группы элементов (иконки меню, иконки навигации и т.д.). А вы используете спрайты?

6 надежных генераторов спрайтов CSS

14 ноября 2016 г. 18 ноября 2016 г. Инструменты веб-сайта

Спрайты — это не маленькие изображения, они состоят из одного большого изображения.

По сути, это комбинации неограниченного количества изображений, объединенных в одну картинку. Графические дизайнеры используют спрайты изображений CSS, чтобы значительно сократить HTTP-запросы.

Поскольку они объединяют все изображения в один файл, время загрузки становится намного быстрее.

А с помощью позиционирования фона CSS становится проще реализовывать отдельные изображения.

К сожалению, этот метод может занять очень много времени. Это связано с тем, что вам нужно будет вручную объединить каждое изображение, которое вы хотите включить в один файл.

Затем вам придется повозиться с CSS, чтобы изображения отображались правильно.

Но, знаете что? Существуют бесплатные онлайн-инструменты, которые можно использовать для автоматизации всего процесса. В этом посте вы найдете набор инструментов, которые позволяют использовать ваши изображения для создания спрайтов CSS.

Неважно, хотите ли вы сделать спрайт из своих изображений на своем компьютере или преобразовать существующий сайт. Эти инструменты могут выполнять работу так быстро, как вы этого хотите.

1. Project Fondue

Это один из лучших генераторов спрайтов CSS с множеством опций. Этот инструмент позволяет загружать ZIP-файл, содержащий изображения, которые вы хотите преобразовать в спрайт. Затем инструмент позаботится обо всем остальном. Чтобы добиться желаемых размеров изображений, вам нужно будет указать их значения.

• Посетите сайт

2. Онлайн-конструктор спрайтов CSS

Этот генератор позволяет загружать сразу несколько изображений, что позволяет сэкономить время. Затем вам нужно выбрать правильный выходной файл. В зависимости от выбранного вами типа выходного файла вы получите код Sass или CSS. Также включены другие параметры, чтобы сделать изображения спрайтов более интересными.

• Посетите сайт

3. SpritePad

Это еще один генератор спрайтов, который позволяет создавать изображения спрайтов CSS за считанные секунды. После загрузки изображений вы можете получить спрайт PNDG и его CSS-код. Вы также можете использовать его облачное хранилище, где вы можете хранить свои спрайты CSS. Зарегистрировавшись, вы сможете сохранять свои спрайты в виде редактируемых версий, которые вы можете легко изменить в Интернете.

• Посетите сайт

4. Spritebox

Это менее автоматизировано, чем 3 варианта выше. В этом инструменте вы можете загружать спрайты и изменять области, в которых вы можете генерировать CSS. Хотя он не создает для вас спрайты CSS, это все же хороший инструмент, который поможет вам создавать спрайты в Photoshop. Или если вам просто нужна помощь в кодировании спрайтов.

• Посетите сайт

5. Холст

Загрузка изображений с помощью этого инструмента может быть довольно сложной, так как вам нужно делать это по одному. Однако, если у вас есть ссылки, где находятся изображения, вы можете просто вставить их в список. Но убедитесь, что у них есть соответствующие имена классов. Доступно несколько вариантов. Например, вы можете изменить отступы и цвета фона изображений.

• Посетите сайт

6. Spritemapper

Это приложение необходимо загрузить и установить на свой компьютер. Чтобы использовать его, вам необходимо знать, как запускать приложение из командной строки. Но не волнуйтесь. Реализация его достаточно проста. Чтобы сгенерировать спрайт, вы должны указать его на свой существующий файл CSS, а программа сделает все остальное за вас. Это здорово, если вы не хотите потерять исходный файл CSS и файлы изображений.

• Посетите сайт

Использование этих инструментов не требует оплаты. Однако некоторые из них могут просить пожертвования, чтобы их разработчики могли продолжать предлагать их бесплатно.

Почтовые теги: #css спрайты#ресурсы#веб-инструменты

11 лучших бесплатных онлайн-сайтов с генераторами спрайтов CSS

Вот список из лучших бесплатных онлайн-сайтов с генераторами спрайтов CSS . На стандартной веб-странице с несколькими изображениями браузеру необходимо выполнить несколько HTTP-запросов для вызова изображений, что также увеличивает время загрузки страницы. Чтобы решить эту проблему, многие пользователи используют CSS спрайт , поскольку он объединяет несколько изображений в одно изображение, что снижает требования HTTP и время загрузки страницы. Чтобы создавать спрайты CSS в Интернете, пользователям нужны эти онлайн-сайты генераторов спрайтов CSS.

С помощью этих веб-сайтов пользователи могут создавать изображение спрайта CSS и код спрайта CSS . Некоторые из этих веб-сайтов также генерируют спрайт CSS HTML-коды . Чтобы сгенерировать спрайт CSS, пользователям необходимо ввести несколько изображений, которые они хотят, в окончательный спрайт CSS. После этого они могут указать направление, расположение, и заполнение расстояние между изображениями. Перед началом создания CSS-спрайта пользователи могут предварительно просмотреть окончательный вид CSS-спрайта в окнах предварительного просмотра. Наконец, пользователи могут сохранить окончательное изображение CSS-спрайта в форматах PNG или GIF . Пользователи также могут сохранить окончательный код спрайта CSS в формате TXT . Чтобы помочь начинающим пользователям, я включил этапы создания спрайтов CSS в описание каждого веб-сайта.

Эти веб-сайты также поставляются с дополнительными онлайн-инструментами, такими как генераторы CSS , кодировщик Base64, конвертер CSS в SCSS, и другие. Просмотрите список, чтобы узнать больше об этих веб-сайтах.

Мой любимый онлайн-генератор спрайтов CSS Веб-сайт:

cssportal.com — мой любимый веб-сайт, поскольку он может генерировать код спрайта CCS, изображение, и связанный HTML-код . Кроме того, он также позволяет пользователям просматривать изображения спрайтов CSS.

Вы также можете ознакомиться со списками лучших бесплатных онлайн-генераторов радиуса границы CSS, онлайн-инструмента для вставки CSS и онлайн-конвертера CSS в LESS.

Содержание:

Функции/названия веб-сайтов	Может генерировать как изображение CSS-спрайта, так и код	Позволяет пользователям указывать направление изображений	Может также генерировать HTML-код
cssportal.com	✓	✓	✓
toptal.com	✓	✓	x
css.spritegen.com	✓	✓	✓
spritegen.website-performance.org	✓	✓	✓
cssspritestool.com	✓	✓	x
giftofspeed.com	✓	✓	✓
jchepants.github.io	✓	✓	x
products.aspose.app	✓	✓	x
Instantsprite.com	✓	✓	x
web2generators. com	x (предоставляется только код CSS Sprite)	x	x
codepen.io	✓	✓	x

cssportal.com

cssportal.com — это бесплатный онлайн-сайт генератора CSS-спрайтов . Это хороший веб-сайт для создания собственного листа спрайтов CSS. Это позволяет пользователям загружать несколько изображений одного или нескольких форматов. Пользователи также могут упорядочивать изображения в Вертикальный, Горизонтальный, и Диагональный форматы . Кроме того, к можно добавить пользовательский отступ между изображениями. Пользователи могут также просмотреть лист спрайтов в области предварительного просмотра. Помимо предварительного просмотра спрайта, он также показывает спрайт CSS и HTML-коды , которые вы можете скопировать. Мне также нравится его способность сохранять окончательное изображение спрайта CSS в форматах PNG и GIF . Теперь выполните следующие шаги.

Как создавать спрайты CSS онлайн с помощью cssportal.com:

• Запустите этот сайт и откройте раздел CSS Sprite Generator.
• Теперь перетащите одно или несколько изображений в его раздел Select Images.
• Далее укажите расположение изображений на листе спрайтов с помощью параметров Направление .
• После этого укажите отступы между изображениями и тип файла выходного изображения.
• Наконец, просмотрите спрайт CSS и нажмите кнопку Загрузить изображение , чтобы локально сохранить спрайт CSS.

Дополнительные функции:

• Генераторы CSS : Он предлагает несколько генераторов CSS, таких как генератор кнопок CSS, генератор столбцов CSS, генератор пути клипа CSS и т. д.
• Инструменты CSS : Как следует из названия, он содержит несколько инструментов CSS, таких как компилятор LESS в CSS, компилятор Stylus в CSS, преобразователь цветов CSS, средство проверки CSS, редактор CSS, и т. д.

Заключительные мысли:

Это один из лучших бесплатных веб-сайтов для создания CSS-спрайтов, который позволяет пользователям с легкостью создавать собственные CSS-спрайты.

Домашняя страница

toptal.com

toptal.com — бесплатный веб-сайт для создания CSS-спрайтов. Используя этот веб-сайт, пользователи могут быстро создать лист спрайтов, состоящий из нескольких изображений как одного. После загрузки нескольких изображений на этот веб-сайт пользователи могут указать выравнивание изображений на листе спрайтов из доступных, таких как двоичное дерево, диагональ, сверху вниз, слева направо, и т. д. Помимо этого, пользователи также могут указать отступ между каждое изображение в пикселях.

Окно предварительного просмотра для предварительного просмотра листа спрайтов также предоставляется им. Кроме того, он поддерживает изображения различных форматов, таких как JPG, PNG, GIF, и т. Д. Помимо листа спрайтов, он также показывает код каждого изображения в листе спрайтов. После создания листа спрайтов CSS пользователи могут загрузить выходное изображение в формате PNG вместе с кодом спрайта CSS. Теперь выполните следующие шаги.

Как создать таблицу спрайтов CSS онлайн с помощью toptal.com:

• Перейдите на этот веб-сайт и откройте генератор спрайтов CSS.
• После этого перетащите на его интерфейс изображения, которые вы хотите в свой лист спрайтов.
• Затем укажите тип выравнивания листа спрайтов и отступы между изображениями.
• Теперь просмотрите окончательный лист спрайтов и нажмите кнопку Загрузить , чтобы локально сохранить лист спрайтов в формате PNG .

Дополнительные функции:

• Этот веб-сайт также предлагает дополнительные ресурсы CSS, такие как Шпаргалка по CSS, Лучшие практики CSS, Услуги по найму экспертов по CSS, и многое другое.

Заключительные мысли:

Это хороший сайт-генератор спрайтов CSS, с помощью которого пользователи могут создавать листы спрайтов CSS, состоящие из нескольких изображений.

Домашняя страница

css.spritegen.com

css.spritegen.com — еще один бесплатный онлайн-сайт для создания CSS-спрайтов. Этот веб-сайт может генерировать спрайты CSS, состоящие из 20 изображений. При этом размер входных изображений не должен превышать 8 МБ знак. Как и другие подобные веб-сайты, он поддерживает распространенные форматы изображений, такие как PNG, JPG, BMP, и т. д. Однако он не позволяет пользователям указывать расположение изображений на листе спрайтов. Пользователи могут указать только расстояние отступа между каждым изображением. Помимо спрайта CSS, он также генерирует код CSS, который пользователи могут добавить на свой веб-сайт, чтобы добавить спрайт CSS. Теперь проверьте следующие шаги.

Как создавать спрайты CSS онлайн с помощью css.spritegen.com:

• Запустите этот веб-сайт и выберите вкладку CSS Sprites.
• Затем нажмите кнопку Choose Files для загрузки изображений.
• Теперь укажите формат выходного спрайта (PNG, JPEG или GIF).
• После этого укажите префикс класса CSS и значение заполнения между изображениями.
• В конце нажмите кнопку Создать спрайт , чтобы просмотреть и загрузить окончательный спрайт CSS.

Заключительные мысли:

Это простой и эффективный онлайн-генератор спрайтов CSS, который может генерировать спрайты CSS и код спрайтов CSS.

Домашняя страница

spritegen.website-performance.org

spritegen.website-performance.org — еще один бесплатный веб-сайт для создания CSS-спрайтов. На этом веб-сайте пользователи могут создавать спрайты как CSS, так и LESS, используя несколько изображений. Кроме того, также присутствуют параметры для указания макета (Компактный, Вертикальный и Горизонтальный) изображений. Помимо этого, пользователи также могут настроить префикс стиля и расстояние между изображениями. Также присутствует окно предварительного просмотра в реальном времени для мгновенного просмотра всех изменений. Помимо листа спрайтов, пользователи также могут скачать спрайт CSS-код, спрайт HTML-код, и таблица стилей . Теперь выполните следующие шаги.

Как создавать спрайты CSS онлайн с помощью speitegen.website-performance.org:

• Перейдите на этот веб-сайт и перетащите одно или несколько изображений на его интерфейс.
• Теперь перейдите к Настройки , чтобы указать макет спрайта, префикс стиля, отступы и т. д. значения.
• Затем просмотрите спрайт CSS в разделе предварительного просмотра.
• Наконец, загрузите окончательный спрайт CSS в Формат изображения PNG .

Дополнительные функции:

• Этот веб-сайт также содержит дополнительные инструменты веб-разработки, преобразования, кодирования/декодирования и форматирования.

Заключительные мысли:

Это еще один хороший веб-сайт для создания CSS-спрайтов, который позволяет пользователям создавать собственные CSS-спрайты и спрайты LESS.

Домашняя страница

cssspritestool.com

cssspritestool.com — еще один бесплатный онлайн-сайт для создания CSS-спрайтов. Это еще один хороший веб-сайт генератора спрайтов CSS, который может генерировать спрайты CSS, используя PNG, JPEG, и GIF изображений. В случае изображений GIF он позволяет пользователям указать прозрачный цвет GIF . Он может в основном генерировать спрайты CSS по вертикали и по горизонтали . Кроме того, также присутствуют параметры для указания префиксов классов CSS и значений заполнения изображений. После указания всех параметров пользователи могут предварительно просмотреть спрайты в разделе предварительного просмотра. Теперь выполните следующие шаги.

Как создавать спрайты CSS онлайн с помощью cssspritestool.com:

• Запустите этот сайт по указанной ссылке.
• После этого перетащите несколько изображений на его интерфейс.
• Затем укажите расположение спрайтов (вертикальное или горизонтальное), отступы и префикс класса CSS.
• Теперь выберите выходной формат спрайтов CSS (GIF, PNG или JPG).
• Наконец, просмотрите спрайт CSS и нажмите кнопку Загрузить , чтобы локально сохранить спрайт CSS.

Этот веб-сайт также предоставляет окончательный код CSS и HTML, который пользователи могут скопировать.

Дополнительные функции:

• Этот веб-сайт также поставляется с дополнительными онлайн-инструментами, такими как Exif Viewer, кодировщик Base64, секундомер обратного отсчета и т. д.

Заключительные мысли:

Это еще один способный, но простой в использовании веб-сайт онлайн-генератора спрайтов CSS, которым может легко пользоваться каждый.

Домашняя страница

giftofspeed.com

giftofspeed.com — еще один бесплатный веб-сайт для создания CSS-спрайтов. Через этот веб-сайт пользователи могут создавать собственные спрайты CSS, состоящие из нескольких изображений. Перед началом процесса генерации спрайта CSS пользователи могут указать шаблон изображений в спрайте (вертикальный или горизонтальный). Помимо этого, пользователи также могут указать расстояние между изображениями и формат выходного изображения (PNG, GIF или JPG). На выходе он показывает изображение спрайта CSS, а также код спрайта CSS, который пользователи могут копировать. Теперь выполните следующие шаги.

Как создавать CSS-спрайты онлайн с помощью giftofspeed.com:

• Запустите этот веб-сайт и нажмите кнопку Choose Files для загрузки изображений.
• Теперь укажите строку изображения, расстояние между изображениями и формат выходного изображения.
• Затем нажмите кнопку Rebuild , чтобы просмотреть окончательный код CSS Sprite и выходное изображение.

Дополнительные функции:

• Инструменты : В этом разделе представлены различные инструменты для ускорения страницы, такие как PNG Compressor, Base64 Encoder, тест кэширования, CSS Compressor и другие.

Заключительные мысли:

Это еще один хороший сайт-генератор спрайтов CSS, который может быстро сгенерировать желаемое изображение и код спрайта CSS.

Домашняя страница

jchepants.github.io

jchepants.github.io — еще один бесплатный веб-сайт для создания CSS-спрайтов. Этот веб-сайт предлагает как обычные, так и Retina CSS генераторы спрайтов. Пользователи могут загружать несколько изображений на этот веб-сайт и указывать их ориентацию (вертикальную, диагональную и упакованную) поверх листа спрайтов. Помимо этого, пользователи также могут указать пространство и отступы между изображениями. После внесения всех необходимых изменений пользователи могут просмотреть спрайт как в Обычный формат и Retina CSS . Он также предоставляет код спрайтов CSS и SCSS, который пользователи могут копировать из его интерфейса. Теперь выполните следующие шаги.

Как создавать спрайты CSS онлайн с помощью jchepants.github.io:

• Перейдите на этот веб-сайт и выберите обычный режим или режим Retina.
• Затем перетащите изображения на его интерфейс.
• Теперь укажите интервалы, отступы и ориентацию изображений поверх спрайта.
• После этого просмотрите внешний вид финального спрайта и локально сохраните как изображение спрайта, так и код CSS.

Заключительные мысли:

Это еще один хороший сайт-генератор спрайтов CSS, который может генерировать как обычные, так и сетчатые спрайты CSS.

Домашняя страница

products.aspose.app

products.aspose.app — еще один бесплатный веб-сайт для создания CSS-спрайтов. Этот веб-сайт предлагает множество онлайн-инструментов и сервисов, одним из которых является генератор спрайтов CSS. Этот инструмент может извлекать изображения как из локального, так и из облачного хранилища (Google Диск и Onerive). Кроме того, он предлагает два варианта объединения изображений на спрайт, а именно из Слева направо и Сверху вниз . Хотя он не показывает предварительный просмотр вывода, он также не позволяет пользователям указывать расстояние между изображениями. После создания спрайта CSS он предоставляет ZIP-файл, который содержит PNG-изображение спрайта CSS вместе с кодом спрайта CSS. Теперь проверьте следующие шаги.

Как создавать CSS-спрайты онлайн с помощью products.aspose.app:

• Запустите этот веб-сайт и получите доступ к генератору CSSSprite.
• После этого перетащите несколько изображений на его интерфейс.
• Теперь укажите способ выравнивания изображения (слева направо или сверху вниз).
• Наконец, нажмите кнопку Объединить изображения , чтобы начать процесс генерации спрайтов CSS.

Дополнительные функции:

• Этот веб-сайт также содержит дополнительные онлайн-инструменты, такие как решение SVG API, конвертер SPUB, конвертер HTML, генератор цветовой палитры, рандомизатор цветов и т. д.

Заключительные мысли:

Это простой онлайн-сайт генератора спрайтов CSS, который может быстро генерировать как изображение, так и код спрайтов CSS.

Домашняя страница

Instantsprite.com

Instantsprite.com — еще один бесплатный веб-сайт для создания CSS-спрайтов. На этом веб-сайте пользователи могут создавать собственные изображения и коды спрайтов CSS. Как и другие подобные веб-сайты, он может объединять несколько изображений в одно. Кроме того, также присутствует возможность указать направление расположения нескольких изображений (вертикальное, горизонтальное или диагональное) на конечном спрайте. В его интерфейсе пользователи также получают окно предварительного просмотра изображения спрайта и код использования спрайта. Теперь выполните следующие шаги.

Как создавать CSS-спрайты онлайн с помощью Instantsprite.com:

• Откройте интерфейс этого веб-сайта и загрузите несколько изображений.
• Затем укажите расстояние между каждым изображением, направление изображения спрайта и тип выходного файла (PNG или GIF).
• Теперь просмотрите внешний вид окончательного изображения и кода спрайта CSS.
• Наконец, сохраните изображение и код спрайта CSS.

Заключительные мысли:

Это еще один веб-сайт с онлайн-генератором спрайтов CSS, который предлагает все необходимые инструменты для создания пользовательских спрайтов CSS.

Домашняя страница

web2generators.com

web2generators.com — еще один хороший веб-сайт для создания CSS-спрайтов. На этом веб-сайте пользователи могут найти множество инструментов веб-разработки, а также инструмент CSS Sprite Creator. Этот инструмент позволяет пользователям выбирать небольшие части одного или нескольких изображений, которые они хотят видеть на листе спрайтов. В соответствии с выбранными частями он может генерировать код спрайта CSS, который пользователи могут копировать. В отличие от большинства других подобных веб-сайтов, он не показывает предварительный просмотр выходного изображения и не предоставляет выходное изображение спрайта CSS. Он предоставляет только выходной код спрайта CSS, который пользователи могут добавить на свой веб-сайт. Теперь выполните следующие шаги.

Как создавать CSS-спрайты онлайн с помощью web2generators.com:

• Запустите этот веб-сайт и выберите раздел CSS Sprite Creator в разделе Graphism Tools.
• Теперь нажмите кнопку Select File для загрузки одного изображения за раз.
• После этого выделите одну часть изображения, которую хотите добавить в спрайт.
• Затем нажмите кнопку Добавить спрайт , чтобы выбрать и добавить несколько частей одного или нескольких изображений в окончательный спрайт CSS.
• Наконец, просмотрите код спрайта CSS в разделе «Содержимое CSS», откуда пользователи могут скопировать код.

Дополнительные функции:

• Этот веб-сайт также поставляется с дополнительными онлайн-инструментами, такими как кодировщик/декодер HTML, перевернутая запись, генератор паролей HTTP, инструмент для создания справки и т. д.

Заключительные мысли:

Это еще один веб-сайт с онлайн-генератором спрайтов CSS, который позволяет пользователям создавать листы спрайтов CSS, состоящие из нескольких небольших изображений.

Домашняя страница

codepen.io

codepen.io  — последний бесплатный веб-сайт для создания CSS-спрайтов. Это еще один хороший веб-сайт, который позволяет пользователям создавать собственные спрайты CSS. Для этого он позволяет пользователям настраивать размер холста спрайта CSS, расстояние между изображениями и эвристику изображений (ширину, высоту и площадь). Кроме того, присутствует возможность создания составного изображения. Он также показывает предварительный просмотр как изображения спрайта CSS, так и кода.