Итак, вот, собственно и они:
Zurb-inliner
http://zurb.com/ink/inliner.php - позволяет преобразовать стили из блока(<style>) в разделе <head> документа в инлайновые.
Как работать с онлайн-инструментом Zurb-inliner?
- Копируем весь код сверстанного выпуска рассылки (кроме строки с DOCTYPE). На момент копирования стили рассылки должны быть размещены в разделе <head>.
- Заходим на страницу http://zurb.com/ink/inliner.php и вставляем код в текстовое поле.
- Нажимаем кнопку "Convert email" и получаем сгенерированный код с инлайновыми стилями и DOCTYPE.
- Копируем результат и вставляем в новый файл. Сохраняем его. Теперь выпуск рассылки можно отправлять.
CSS3 Generator
http://css3generator.com/ - инструмент генерирует CSS-код, учитывая различные браузеры, на основе данных, введенных посетителем.
Инструмент поддерживает современные правила CSS3: text-shadow, box-shadow, transition, transform и другие.
Как работать с CSS3 Generator?
Выбираем CSS-правило из представленных на странице, затем вводим в поля формы нужные нам значения и получаем сгенерированный CSS, который можно поместить в файл стилей вашего сайта.
Ultimate CSS Gradient Generator
http://www.colorzilla.com/gradient-editor/ - инструмент помогает создать CSS3-градиенты.
Как работает Ultimate CSS Gradient Generator?
В отличии от предыдущего инструмента, взаимодействовать с которым проще простого, в Ultimate CSS Gradient Generator настроек значительно больше.
Работу с этим инструментом можно разделить на 2 варианта:
• во-первых, вы можете использовать уже существующие «заготовки» градиентов,
• во-вторых можете создать свой градиент, используя свои значения цветов и их прозрачности.
Очень похоже на работу с градиентами в Photoshop. В обоих случаях, результат вы сможете скопировать из текстовой области с заголовком CSS.
TinyPNG
https://tinypng.com - оптимизирует графические изображения в формате .png, уменьшая их размер и ускоряя загрузку.
Как работает онлайн-инструмент TinyPNG?
Здесь вообще все просто - перетаскиваете .PNG-файл в указанную область на странице, инструмент производит оптимизацию изображения и чуть ниже появляется ссылка для загрузки оптимизированного изображения.
Code beautifier
http://www.codebeautifier.com - форматирует и сжимает CSS-код для уменьшения размера файла и оптимизации его загрузки.
Как это работает?
На странице сайта Code beautifier расположены текстовая область и текстовое поле. В них можно вставлять CSS-код или путь к CSS-файлу соответственно. Далее нужно выбрать тип сжатия и при желании «поковыряться» с другими настройками. Для завершения процесса, нужно нажать кнопку “PROCESS CSS” и получаем отформатированный и сжатый CSS-код.
Возможно, представленные в заметке онлайн инструменты, помогут читателю в его работе.
Если вы используете какие-нибудь интересные онлайн инструменты, не описанные в этой заметке, можете оставить информацию о них в комментариях к заметке.