50 Чрезвычайно полезный и мощный CSS инструменты

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

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

Ниже мы приведем 50 чрезвычайно полезны CSS инструментов, генераторов, шаблонов и resources.Мы не включили “ traditional” CSS инструменты, такие как Firebug или Web Developer extension, но попытался сосредоточиться на довольно неизвестных инструментов, которые, безусловно, стоит посмотреть.Некоторые средства являются новыми, а некоторые старые, но, надеюсь, каждый найдет несколько новых полезных или по крайней мере вдохновляющий tools.

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

Пожалуйста, обратите внимание на следующие связанные должности:

CSS и Typography

Hyphenator
Hyphenator.js приносит на стороне клиента переносов из HTML документов в любом браузере, вставляя мягкий дефис использованием переносы и Фрэнк М. Liang’ S алгоритм переносов известно из латекса и OpenOffice.Цель состоит в том, чтобы обеспечить расстановку переносов во всех браузерах, которые поддерживают JavaScript и мягкий дефис, по крайней мере на английском, немецком и французском языках. Вот серверный скрипт, который делает hyphenation.
CSS Тип Set
CSS Type Set является практическим типографии инструмент, который позволяет дизайнерам и разработчикам для интерактивного тестирования и узнать, как их стиль веб-содержимого.
Typechart
Typechart позволяет пролистывать, просматривать и сравнивать веб-типографики при получении CSS.
CSS-Typoset матрицы и код generator
матричную таблицу, которая представляет размеров шрифта и (симметричные и асимметричные) поля для различных размеров шрифта базу — в пиксельных и EM единиц.Он также генерирует исходный код на лету.Создано Jan Quickels.
Em Calculator
Em Calculator это небольшая утилита, JavaScript, который поможет вам сделать масштабируемые и доступные CSS дизайн.Он преобразует размеры в пикселях в относительных единицах их, которые основаны на данный размер текста.
Facelift Image Replacement (FLIR)
Facelift Image Replacement (или FLIR, выраженный “ fleer”) является сценарий замены изображения, который динамически генерирует изображение представления текста на веб-странице в шрифты, которые в противном случае могли не бытьвидимыми для посетителей.Автор: Кори Mawhorter. Как использовать любой шрифт с FLIR. Tutorial
Вертикальный ритм calculator
Этот инструмент преобразует значения пикселов в ет значения в зависимости от размера шрифта текста.Вы также можете установить полей и отступов автоматически, в зависимости от высоты строки, определенных вами.Очень useful.
typeface.js
Вместо того чтобы просто создание изображений или при использовании вспышки, чтобы показать вашу website’ графический текст с в шрифте вы хотите, вы можете использовать typeface.js и писать на простой HTML и CSS, так же, как если вашаПосетители имели шрифт, установленный locally.

CSS Online Tools

PSD2CSS Online
бесплатный онлайн-сервис, который генерирует веб-страницы из конструкций Photoshop.Следуя принципы и именования conventions, вы можете точно выбрать how переход от верстки (X) HTML и CSS является done.
Условное-CSS
Условное-CSS позволяет писать в сопровождении CSS с условной логики для решения конкретных заявлений CSS для отдельных браузеров и групп browsers.
MoreCSS
MoreCSS является проектно-ориентированной библиотеки JavaScript, что позволяет писать код для применения автоматической расстановки переносов и создания всплывающих окон, всплывающие подсказки, вкладка меню, зебра таблиц, расширенные стили списка и кросс-браузерной прозрачности стиля.Но действительно особенное дело в том, что вы можете делать все эти вещи так же, как с обычными CSS.
точек на em
Этот инструмент является то, что его разработчики называют “ точек Е. М. преобразование сделано simple”.Введите базовый размер шрифта в пикселях, и инструмент будет производить полный пиксель таблицы преобразования их, делает упругой Веб-дизайн гораздо проще produce.
CSS кадров Generator
Этот инструмент возвращает соответствующий CSS в строку за строкой пути отступа с пробелами, чтобы отразить структуру XHTML – каждого селектора и все его свойства и значения в одной строке.Это может быть немного странно для вас, в самом начале, но если вы привыкнете к нему you’ найдете это намного лучше.
CSS Redundancy Checker
Вы можете использовать этот инструмент, чтобы найти CSS селекторов, которые aren’ T используются любые ваши HTML файлы и которые могут быть redundant.
CleverCSS
CleverCSS небольшой язык разметки CSS, и вдохновленный Python, которые могут быть использованы для создания таблиц стилей в чистом и структурированном виде.Во многих отношениях, it’ S чище и мощнее, чем CSS2.Вы также можете работать с variables.
WordOff
WordOff применяет некоторые правила, чтобы лишить хлама, который вставляется в редакторы WYSIWYG из Word.Например, атрибуты будут удалены все элементы, кроме < a> < span> и < div>, пустые элементы удаляются и последовательные переносы строк сводятся к двум.Он также содержит API.
Postable
“ я абсолютно ненавижу того, чтобы перевести все ‘ < ‘ и ‘ > ’ знаки в мой код ‘ < ’ и ‘ >, ’соответственно.Я тоже ненавижу того, чтобы написать “&” в любое время я хочувключает амперсанд.Это делает в том числе фрагменты кода на мой блог и еще много чего очень раздражает, и сегодня я, наконец, получил кормили up.” Этот удобный инструмент представляет собой небольшое приложение, которое будет делать все это для вас.Создано Эллиот Swan.
Kotatsu
Kotatsu простой HTML генератор таблицы.Инструмент позволяет прикрепить классы клеток в той же колонке easily.
htmldevelopertools
Этот инструмент позволяет вам обновить ваш CSS файлов на сервер в окне браузера.В настоящее время работает только под IIS. NET 3.5.Интересная идея.Может ли кто-нибудь создать подобный сценарий для Apache?Дайте нам знать, и we’ VL поддержки как финансовой, так и с широким охватом нашей magazine.
Deploy
Deploy является свободным открытым исходным кодом веб-приложение, которое позволяет вам выбрать название проекта, Doctype, хотите ли вы сбросить CSS и JQuery интеграции, и это создает молнии, готовые киспользовании пакет со всеми указанными файлами и папками.Инструмент был оптимизирован для Fluid, приложение Mac, которая создает ГКО (сайт-специфические браузеры) для websites.
CSS Evolve
CSSEvolve позволяет вам играть с большим количеством свойств сайта, в том числе website’ S цветовую схему, шрифты, рамки и многое другое.CSSEvolve работ в процессе моделирования эволюции, в которой вы выбираете сайт функциями, которые вам нравятся и совершенствовать их через несколько generations.” Он использует традиционные слепой часовщик, управляемые пользователем генетического алгоритма для управления CSS изменений на веб-сайт по собственному выбору пользователя.В принципе, набор мутировал вариантов CSS производится, пользователь выбирает изменения, которые он или она любит, алгоритм случайным образом сочетает в себе эти изменения через кроссовера и мутации, и процесс continues.” [ via]
Lorem 2
Этот инструмент предоставляет вам “ все вокруг лучше Lorem experience.” Она содержит короткие абзацы, длинные параграфы,короткие и длинные список элементов списка для использования в wireframes.
SelectORacle
небольшой скрипт, который объясняет CSS селекторы на простом английском или испанском языке.Особенно полезны для CSS3 selectors.
JS Bin
веб-приложения специально разработаны, чтобы помочь JavaScript и CSS народные тест фрагменты кода в конкретном контексте и отладки кода совместно.Она позволяет редактировать и тестировать JavaScript и HTML (перезагрузка URL также поддерживает состояние вашего кода: новые вкладки don’ т).После you’ счастливы, вы можете сохранить и отправить URL на равных для рассмотрения или помощи.Затем они могут внести дополнительные изменения, сохранив заново в случае необходимости.Альтернатива: CodePaste или EtherPad.
CSS текст Wrapper
Wrapper CSS текста позволяет легко и просто сделать HTML переноса текста в форме другого, чем просто прямоугольник.Вы можете сделать обтекание текстом вокруг кривые, зигзаги, или что вы want.
Написание тестов против CSS
CSS трудно проверить автоматически.Есть размеры шрифта соответствовать ожиданиям?Разве ширину макета соответствуют начальному макет?Этот инструмент поможет вам место изменения в неожиданных областях website’ S верстки и дизайна.Она также может извлекать оказанных DOM значения, такие как размер текста, из данного веб-страницы и сравнить их с ожидаемыми значениями.Это может быть полезно как для регрессивного тестирования и утверждения основе, тест-Driven Development.Написано в Python Гарет Rushgrove.
CSS Sprite Generator
С помощью этого инструмента вы можете загрузить все ваши изображения (вы должны поместить их в почтовый файл в первую очередь.), И она будет сочетать в себе загруженные изображения в один спрайт и генерировать CSS дляyou.
Sky CSS Tool
онлайн CSS средства разработки, Sky CSS позволяет создавать CSS классы почти без использования рукописного кода.JavaScript-совместимый браузер, необходимые для правильного functioning.
CSS Tidy Online
онлайн-версии CSS Tidy, инструмент, который позволяет вам сохранить ваш код чистым путем сжатия code.
Web-инструменты для оптимизации, форматирования и проверки CSS
огромная компиляция некоторых из лучших бесплатных веб-оптимизаторов CSS / компрессоров, форматирования кодаи услуг проверку.По Jacob Gube.
Grid Designer 2.4
Этот инструмент позволяет создавать сетку, указав количество столбцов и ширину столбцов, желобов и полей.Вы также можете указать типографии в тот же инструмент и экспорт окончательного CSS и (X) HTML разметки.Вы также можете занести в закладки свои сетки и типографии настройки и создавать конструкции с охватывающих столбцов.Создано Rasmus Schultz.
Yahoo’ Секретная Text-Sprite Generator
В основном это URL, вы можете нажать, что создает идеальные спрайт готовы PNG графических текст вы добавляете в URL.
Заменить CSS Цвета – Editor
Этот инструмент позволяет изменить всю цветовую схему вашего сайта, минуя кода CSS.Вы выбираете ваш локальный файл CSS, замена цветов, а затем загрузить новую CSS file.
Box Office
Box Office позволяет упаковка, плавать или контур вокруг текста в свободной форме изображения с помощью CSS для (X) HTML pages.
MinifyMe
небольшое приложение AIR, которое может сжимать несколько файлов CSS и JavaScript в одно и работает на вашем desktop.
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Главная → Программирование → 09.12.2008 by Newsbot