Онлайн сервисы генерации и проверки CSS кода при верстке

9

44234
29-10-2011

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

The 1Kb CSS Grid
Задавая всего три параметра, также генерируется CSS сетка. А также указывается ширина в пикселях.Перейти на The 1Kb CSS Grid

Grid Designer
Более сложный сервис. Настраивается CSS решетка по нескольким параметрам. Во втором блоке генерируется текст, который будет отображаться в колонках. На выходе имеем готовый CSS и HTML шаблон.Перейти на Grid Designer

CSS Lint
Сервис для проверки кода вашего сайта на предмет ошибок.Перейти на CSS Lint

Primer CSS
Вставив в диалоговое окошко HTML код, можно получить список всех упомянутых классов и ID, которые упомянуты в CSS.Перейти на Primer CSS

PrefixMyCSS
Если ввести исходный CSS код, та на выходе можно получить код, адаптированный под разные браузеры.Перейти на PrefixMyCSS

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


 

Layer Styles
Очень полезный сервис. На основании настроек диалогового окошка стилей слоя программы фотошоп генерирует код CSS.Перейти на Layer Styles

Ultimate CSS Gradient Generator by ColorZilla
Представлено на выбор большое количество градиентов и их CSS коды, адаптированные под разные браузеры.Перейти на Ultimate CSS Gradient Generator by ColorZilla

Spritebox
Позволяет быстро и легко создавать классы и идентификаторы из одной картинкиПерейти на Spritebox

Automatic CSS inliner
Автоматически преобразует все локальные стили во встроенный CSS для использования в почтовых рассылках. Перейти на Automatic CSS inliner

Typetester
Позволяет сравнивать написание различных шрифтов и получить CSS код выбранного стиля написания.Перейти на Typetester

The Web Font Combinator
Сервис позволяет наглядно посмотреть как будут выглядеть различные сочетания шрифтов в заголовках, подзаголовках и в основном тексте.Перейти на The Web Font Combinator

Sencha Animator
Не совсем поняла, как действует данный сервис, но связано это с тачскринами мобильных устройств и анимацией. Предлагается скачать триальную версию.Перейти на Sencha Animator

CSS Compressor by CSS Drive
Это сервис для сжатия CSS и увеличения скорости загрузки сайта.Перейти на CSS Compressor by CSS Drive

Px to em
Таблица преобразования размеров шрифта в различные единицы измерения.Перейти на Px to em

Комментариев 9 комментариев

Спасибо, Наташа! Подборку — в закладки!

ОтветитьОтветить

Очень полезный материал!
В будущем обязательно пригодится.
Спасибо:))

ОтветитьОтветить

@Retliff:
Отлично! Надеюсь пригодится ))

ОтветитьОтветить

@Sergei:
Спасибо!
Такие подборки всегда полезно иметь под рукой ))

ОтветитьОтветить

Тоже закинул в закладки! Наташа, вы — молодец! 🙂

ОтветитьОтветить

@Эдуард:
Спасибо большое! 🙂

ОтветитьОтветить

Вы делаете какую-то гигантскую работу. Очень нравится системный подход!

ОтветитьОтветить

@Юрий Молостов:
Спасибо большое! А системный подход я люблю ))

ОтветитьОтветить

@Наташа Клевер: Спасибо за подборочку. Был один все сервис. А их оказывается очень много!

ОтветитьОтветить

Написать комментарий с помощью обычной формы блога

Не пишите пожалуйста всякую ерунду и критику, все-равно все удалю. Спасибо за комментарий!

62 queries in 0,208 seconds.