Матвей Земсков

Заметки веб-мастера

Пятница, 10 апреля 2015 10:29

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

Оцените материал
(1 Голосовать)

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

Итак, вот, собственно и они:

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-код.

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

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

Прочитано 2770 раз
Добавить комментарий

Комментарии   

 
0 # Max 15.04.2015 07:29
еще один инструмент для оптимизации изображений
http://compressimages.com
Ответить | Ответить с цитатой | Цитировать
 
Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию: