Список полезных инструментов для CSS разработчика / Хабрахабр. Это не попытка создать список всех существующих инструментов для CSS разработки. Только некоторые, наиболее полезные были отобраны и размещены в соответствующих категориях. К сожалению, некоторые инструменты в списке не полностью попадают под данные критерии. Если кто- то знает лучшие альтернативы с более дружелюбным интерфейсом и большей функциональностью, пишите в комментариях. Макеты. CSS Layout Generator. Этот генератор может создать трехколоночный (одно- , двух- ) макет с плавающей или фиксированной разметкой, содержащий header и footer. Преобразовывает PSD выдавая на выходе HTML и CSS. Незаменимая вещь для дизайнера. Программа Skype для Android. Домой SOFT Плагин Photoshop для конвертации PSD в HTML. Конвертеры PSD - Программы, позволяющие конвертировать рисунки PSD в другие популярные графические форматы. Файлы этого формата создаются в программе Adobe Photoshop и в них хранятся слои и их элементы. Ради научного интереса: есть ли программы для конвертации PSD макета простого сайта со слоями в html/css, чтобы нормально переводил и изображения и текст оставался текстом? ![]() Размеры можно задавать в px, em или %. Grid Designer. Позволяет создать модульную сетку макета, с учетом таких параметров как: количество колонок, расстояние между колонками, размер полей, кегль основного шрифта, кегль заголовков, отступы и т. А также можно посмотреть, как будут выглядеть основные элементы форматирования текста в данной сетке. Layout Generators. Позволяет создавать резиновую многоколоночную или сеточную разметку. Позволяет задавать ширину и цвет. PSD to HTML Converter - Р. ![]() CSS код генерируется автоматически. Генератор HTML+CSS шаблонов. Сервис позволяет в несколько кликов мыши получить готовый дивовый каркас с нужными параметрами. После выбора параметров будет предложено скачать архив, в котором находится 2 файла с HTML и CSS. PSD2. CSSCервис, для конвертирования PSD макетов в cверстанную страницу. Быстро, бесплатно и относительно качественно. CSS Фреймворки. Boks. Boks это визуальный редактор для CSS фреймворка Blueprint, сделанный в виде приложения Adobe AIR. С помощь этого редактора можно визуально создавать и заполнять разметочную сетку, задавать вертикальный ритм, и экспортировать результат в HTML и CSS. Полезные инструменты и ссылки для CSS фреймворка Blueprint. YAML Builder. YAML Builder это онлайновый сервис для визуального создания шаблонов основанных на HTML/CSS фреймворке YAML. YUI CSS Grid Builder. Простой веб интерфейс, используемый для быстрого создания кроссбраузерных шаблонов на основе YUI grid. Grid System – Variable Grid System. Variable Grid System – это быстрый способ создать CSS сетку, на основе CSS фреймоврка 9. Grid System. Grid System Generator. Grid System Generator позволяет создавать шаблоны с фиксированной разметкой и валидным CSS / XHTML. Шаблоны могут быть основаны на одном из четырех CSS фреймворков: 9. Grid System, Golden grid, 1kb grid, Simple grid system. В дополнение к каждому шаблону также создается png файл для дизайна в Fireworks, Illustrator, Omni. Graffle, Photoshop или Visio. Шрифты. Typetester. Typetester – это весьма удачное веб- приложение, предназначенное для сравнения шрифтов между собой. По словам разработчиков, основная задача — облегчить жизнь веб- дизайнера. Одновременно можно сравнивать три шрифта. CSS Type Set. Это сервис позволяющий применить к тексту CSS свойства и посмотреть, как это будет выглядеть. Все изменения моментально отражаются на примере, а сгенерированный CSS код можно скопировать и использовать в дальнейшем. Type. Chart. С помощью Typechart можно оценить оформление различных шрифтов. После обнаружение понравившегося варианта можно скопировать CSS код для использования на своем сайте. Texster. Texster — сервис для подбора «безопасных» шрифтов для вашего сайта. Не смотря на то, что существует множество аналогичных и в основном зарубежных ресурсов, texster отличается тем, что результаты отображаются сразу для всех шрифтов, что позволяет сравнить их и выбрать нужный. CSS- Typoset Matrix and Code Generator. CSStxt. Несложный веб- инструмент создания CSS стилей шрифта. EM Calculator AIR Application. Калькулятор вертикального ритма в XHTML & CSS; легко конвертирует px в em; padding и margins вычисляются автоматически. Em Calculator. Em Calculator это небольшой Java. Script инструмент который преобразовывает определенное значение px в соответствующее значение в em. PXto. EMPXto. EM — таблица показывающая размеры шрифтов в различных единицах измерения, которая также помогает переводить размер из одного значения в другое. Цвет. CSS Color Editor. CSS Color Editor позволяет заменить цветовую схему вебсайта. На сервис локальный CSS файл, выбираются новые цвета, а затем сервис генерирует CSS файл с уже замененными цветами. Color Palette Generator. По заданному рисунку генерируют цветовую палитру состоящую из ключевых цветов. Color Contrast Check. Действительно интуитивный онлайн инструмент для проверки цвета, который позволяет внести цвет переднего и заднего фона в шестнадцетиричном формате или при помощи ползунков. Инструмент даёт моментальный результат — показывает, как выглядит эта комбинация и обладает ли она достаточной контрастностью при просмотре людьми, у которых нарушено цветовосприятие, или при просмотре на черно- белом экране (тест WCAG 2). Color. Zilla. Color. Zilla расширение для Firefox. В Color. Zilla можно получить цвет, кликнув в любом месте сайта и после перенести этот цвет в любую другую программу (имеется 5 вариантов описания цвета). Можно изменять масштаб изображения страницы(2. Так же есть встроенный просмотрщик палитры, избранное, DOM инспектор и поддержка firebug. Конвертор HSL в RGBСпрайты. CSS Sprite Generator. Этот инструмент позволяет автоматизировать процесс создания CSS спрайтов. Просто дайте ему ZIP файл, содержащий 2 и более изображений (GIF, PNG или JPG), и он будет генерировать спрайт- изображение и соответствующие правила CSS для ориентации и отображения каждого элемента изображения. YASC (Yet Another Sprite Creator)Еще один генератор. Процесс создания спрайта представляет собой следующее: загружается картинка, затем визуально отмечаются необходимые области и им назначается CSS id. Когда выбраны все участки происходит генерация CSS для этих спрайтов. Smart. Sprites. Smart. Sprites это консольная Java утилита для создания CSS спрайтов. Smart. Sprites орабатывает специальные директивы в CSS файле, отмечающие отдельные картинки которые должны быть превращены в спрайты. После обработки CSS файла из отмеченных картинок создается спрайт, и автоматически меняются соответствующие фрагменты файла на использования спрайта вместо одиночных картинок. Формы. Quick Form Builder. Генерирует XHTML /HTML - совместимые и доступные формы с CSS разметкой. Вводим имена полей, затем выбираем типа каждого поля, формат( HTML или XHTML ) и получаем готовый HTML и CSS код формы. Wufoo. Wufoo – это бесплатный онлайновый сервис, позволяющий с легкостью создавать хорошо выглядящие, валидные CSS/XHTML формы. Компоненты UIList- o- Matic. Генерирует навигационные меню ( до 2 уровней), позволяя выбрать одно из нескольких доступных оформлений. CSS Menu Generator. Генерирует горизонтальные, вертикальные, выпадающие CSS меню. Theme. Roller. Позволяет создавать собственные темы для j. Query UI. Обертка текста. CSS Text Wrapper. Сервис CSS Text Wrapper позволяет легко придать тексту любую форму и вставить к себе на страницу. Узловые точки добавляются по нажатию на линию в том месте где необходимо добавить. Можно настроить размеры блока, выравнивание, шрифт и т. The Box Office. Этот инструмент который позволит создать обтекание текста для картинок с различной неправильной формой. Просто вводите ссылку на любую картинку произвольной формы, задаете основное выравнивание изображения, цвет фона, который нужно игнорировать, высоту строки дополнительные отступы и цвет текста, а далее — идем за результатом. Анализ и Отладка. W3. C CSS Validation Service. Проверка CSS на валидность. CSS Analyzer. CSS Analyser сочетает W3. C CSS Validation Service и дополнительную проверку цветов на контрастность (полезен для улучшения юзабилити) и единиц измерения, используемых в исходном коде. Результатом является очень подробное описание ошибок и предупреждений, точно так же как в W3. C CSS Validation Service. Firebug. Firebug — расширение для браузера Firefox, являющееся консолью, отладчиком, и DOM- инспектором Java. Script, DHTML, CSS, XMLHttp. Request. Firebug показывает в консоли вызвавшую ошибку функцию, стек вызовов функций, вызвавших эту ошибку. Он предупреждает, что CSS- правило или Java. Script- метод/свойство, которое вы пытаетесь использовать, не существует. Сопровождение. Dust- Me Selectors. Позволяет проанализировать страницу и показать, сколько и какие стили не используются на странице сайта, а также укажет в каком файле стилей, в какой строке они прописаны. Css. Cleaner. Приложение Windows для удаления неиспользуемых CSS классов. CSS Redundancy Checker. Проверяет, все ли правила из CSS используются в HTML. После проверки выводит список не использованных на данной странице или группе страниц. Оптимизация. CSS Drive CSS Compressor. CSS компрессор с опциями компрессии «Слабая», «Нормальная» и «Сверхкомпактная». Robson CSS Compressor. Еще один хороший инструмент для компрессии CSS файлов — Robson CSS Compressor. Пока он в стадии разработки, и возможны неточности в его работе. Minify. Me – AIR Application. Небольшое AIR- приложение, которое позволит собрать несколько css- файлов в один. Фоматирование. Clean. CSS – CSS Formatter and Optimizer. Clean CSS является популярным онлайн- инструментом для форматирования и оптимизации CSS. Содержит группы настроек для баланса между оптимизацией и читабельностью. Одна из важных возможностей – это автоматическое соединение одинаковых селекторов и свойств. Styleneat. Styleneat преобразовывает код CSS в стандартизированный, удобный для чтения формат, структурирует таким образом, что становится легко понять где какие области и как они связаны друг с другом. CSS Toolbox. Бесплатный CSS Toolbox включает множество инструментальных средств для быстрой и эффективной разработки CSS –валидатор, форматтер, оптимизатор. Браузерозависимость. Conditional- CSS. Парсер CSS файлов на строне сервера с проверкой на тип и версию браузера. Позволяет сформировать специальные условные комментарии для различных групп браузеров. Доступны версии на PHP, C# и С. Web Browser CSS Support. Подробная таблица поддержки CSS- стандарта популярными браузерами. When Can I Use? Даёт возможность сравнить поддержку браузерами различных новейших технологий, а именно — HTML 5, CSS 3, SVG и т.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
July 2017
Categories |