Он внутри! И движется! - 2 Октября 2009 - Ozonar BLOG
 
Меню сайта
Главная » 2009 » Октября » 2 » Он внутри! И движется!
Он внутри! И движется!
22:30
Список полезных инструментов для CSS разработчика  

Макеты


CSS Layout Generator

Этот генератор может создать трехколоночный (одно-, двух-) макет с плавающей или фиксированной разметкой, содержащий header и footer. Размеры можно задавать в px, em или %.

Grid Designer

Позволяет создать модульную сетку макета, с учетом таких параметров как: количество колонок, расстояние между колонками, размер полей, кегль основного шрифта, кегль заголовков, отступы и т.д. А также можно посмотреть, как будут выглядеть основные элементы форматирования текста в данной сетке.

Layout Generators

Позволяет создавать резиновую многоколоночную или сеточную разметку. Позволяет задавать ширину и цвет. CSS код генерируется автоматически.

Генератор HTML+CSS шаблонов

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

PSD2CSS

Cервис, для конвертирования 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.

960 Grid System – Variable Grid System

Variable Grid System – это быстрый способ создать CSS сетку, на основе CSS фреймоврка 960 Grid System.

Grid System Generator

Grid System Generator позволяет создавать шаблоны с фиксированной разметкой и валидным CSS / XHTML. Шаблоны могут быть основаны на одном из четырех CSS фреймворков: 960 Grid System, Golden grid, 1kb grid, Simple grid system. В дополнение к каждому шаблону также создается png файл для дизайна в Fireworks, Illustrator, OmniGraffle, Photoshop или Visio.

Шрифты


Typetester

Typetester – это весьма удачное веб-приложение, предназначенное для сравнения шрифтов между собой. По словам разработчиков, основная задача — облегчить жизнь веб-дизайнера. Одновременно можно сравнивать три шрифта.

CSS Type Set

Это сервис позволяющий применить к тексту CSS свойства и посмотреть, как это будет выглядеть.

Все изменения моментально отражаются на примере, а сгенерированный CSS код можно скопировать и использовать в дальнейшем.

TypeChart

С помощью 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 это небольшой Javascript инструмент который преобразовывает определенное значение px в соответствующее значение в em.

PXtoEM

PXtoEM — таблица показывающая размеры шрифтов в различных единицах измерения, которая также помогает переводить размер из одного значения в другое.

Цвет


CSS Color Editor

CSS Color Editor позволяет заменить цветовую схему вебсайта. На сервис локальный CSS файл, выбираются новые цвета, а затем сервис генерирует CSS файл с уже замененными цветами.

Color Palette Generator

По заданному рисунку генерируют цветовую палитру состоящую из ключевых цветов.

Color Contrast Check

Действительно интуитивный онлайн инструмент для проверки цвета, который позволяет внести цвет переднего и заднего фона в шестнадцетиричном формате или при помощи ползунков. Инструмент даёт моментальный результат — показывает, как выглядит эта комбинация и обладает ли она достаточной контрастностью при просмотре людьми, у которых нарушено цветовосприятие, или при просмотре на черно-белом экране (тест WCAG 2).

ColorZilla

ColorZilla расширение для Firefox. В ColorZilla можно получить цвет, кликнув в любом месте сайта и после перенести этот цвет в любую другую программу (имеется 5 вариантов описания цвета). Можно изменять масштаб изображения страницы(20% – 1000%). Так же есть встроенный просмотрщик палитры, избранное, DOM инспектор и поддержка firebug.

Конвертор HSL в RGB

Спрайты


CSS Sprite Generator

Этот инструмент позволяет автоматизировать процесс создания CSS спрайтов. Просто дайте ему ZIP файл, содержащий 2 и более изображений (GIF, PNG или JPG), и он будет генерировать спрайт-изображение и соответствующие правила CSS для ориентации и отображения каждого элемента изображения.

YASC (Yet Another Sprite Creator)

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

SmartSprites

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

Формы


Quick Form Builder

Генерирует XHTML /HTML -совместимые и доступные формы с CSS разметкой. Вводим имена полей, затем выбираем типа каждого поля, формат( HTML или XHTML ) и получаем готовый HTML и CSS код формы.

Wufoo

Wufoo – это бесплатный онлайновый сервис, позволяющий с легкостью создавать хорошо выглядящие, валидные CSS/XHTML формы.

Компоненты UI


List-o-Matic

Генерирует навигационные меню ( до 2 уровней), позволяя выбрать одно из нескольких доступных оформлений.

CSS Menu Generator

Генерирует горизонтальные, вертикальные, выпадающие CSS меню.

ThemeRoller

Позволяет создавать собственные темы для jQuery UI.

Обертка текста


CSS Text Wrapper

Сервис CSS Text Wrapper позволяет легко придать тексту любую форму и вставить к себе на страницу. Линиями задаем форму. Узловые точки добавляются по нажатию на линию в том месте где необходимо добавить. Можно настроить размеры блока, выравнивание, шрифт и т.д.

The Box Office

Этот инструмент который позволит создать обтекание текста для картинок с различной неправильной формой. Просто вводите ссылку на любую картинку произвольной формы, задаете основное выравнивание изображения, цвет фона, который нужно игнорировать, высоту строки дополнительные отступы и цвет текста, а далее — идем за результатом.

Анализ и Отладка


W3C CSS Validation Service

Проверка CSS на валидность.

CSS Analyzer

CSS Analyser сочетает W3C CSS Validation Service и дополнительную проверку цветов на контрастность (полезен для улучшения юзабилити) и единиц измерения, используемых в исходном коде. Результатом является очень подробное описание ошибок и предупреждений, точно так же как в W3C CSS Validation Service.

Firebug

Firebug — расширение для браузера Firefox, являющееся консолью, отладчиком, и DOM-инспектором Javascript, DHTML, CSS, XMLHttpRequest. Firebug показывает в консоли вызвавшую ошибку функцию, стек вызовов функций, вызвавших эту ошибку. Он предупреждает, что CSS-правило или Javascript-метод/свойство, которое вы пытаетесь использовать, не существует.

Сопровождение


Dust-Me Selectors

Позволяет проанализировать страницу и показать, сколько и какие стили не используются на странице сайта, а также укажет в каком файле стилей, в какой строке они прописаны.

CssCleaner

Приложение Windows для удаления неиспользуемых CSS классов.

CSS Redundancy Checker

Проверяет, все ли правила из CSS используются в HTML. После проверки выводит список не использованных на данной странице или группе страниц.

Оптимизация


CSS Drive CSS Compressor

CSS компрессор с опциями компрессии «Слабая», «Нормальная» и «Сверхкомпактная».

Robson CSS Compressor

Еще один хороший инструмент для компрессии CSS файлов — Robson CSS Compressor. Пока он в стадии разработки, и возможны неточности в его работе.

MinifyMe – AIR Application

Небольшое AIR-приложение, которое позволит собрать несколько css-файлов в один.

Фоматирование


CleanCSS – CSS Formatter and Optimizer

Clean CSS является популярным онлайн-инструментом для форматирования и оптимизации CSS. Содержит группы настроек для баланса между оптимизацией и читабельностью. Одна из важных возможностей – это автоматическое соединение одинаковых селекторов и свойств.

Styleneat

Styleneat преобразовывает код CSS в стандартизированный, удобный для чтения формат, структурирует таким образом, что становится легко понять где какие области и как они связаны друг с другом.

CSS Toolbox

Бесплатный CSS Toolbox включает множество инструментальных средств для быстрой и эффективной разработки CSS –валидатор, форматтер, оптимизатор.

Браузерозависимость


Conditional-CSS

Парсер CSS файлов на строне сервера с проверкой на тип и версию браузера. Позволяет сформировать специальные условные комментарии для различных групп браузеров. Доступны версии на PHP, C# и С.

7 простых способов протестировать кроссбраузерную совместимость

Web Browser CSS Support

Подробная таблица поддержки CSS-стандарта популярными браузерами.

When Can I Use?

Даёт возможность сравнить поддержку браузерами различных новейших технологий, а именно — HTML 5, CSS 3, SVG и т.д. Можно выбрать как определённые браузеры, временные периоды, статусы, так и определённые технологии.

IE7.js

IE7-js это Javascript библиотека, которая исправляет множество багов в HTML и CSS для версий Internet Explorer седьмой и ниже. К примеру, она исправляет поддержку прозрачности в PNG, фиксированное позиционирование элементов и фоновых изображений (position: fixed), поддержку псевдо класса: hover для всех тэгов и др.

Modernizr

Modernizr это небольшая простая Javascript-библиотека, которая поможет использовать такие технологии, как CSS3, HTML5 в браузерах которые еще не поддерживают это технологии.

Селекторы


Sizzle Javascript Selector Library

Быстрый Javascript движок выбора CSS селекторов. Sizzle поддерживает практически все CSS3 селекторы – даже такие редко используемые, как экранированные селекторы (”.foo\+bar”), юникодные селекторы и т.д.

YASS: Yet Another cSS selector

Самая быстрая Javascript-библиотека для выбора элементов по CSS-селектору.

SelectORacle

Сервис дает описание на человеческом языке сложных селекторов CSS и может быть очень полезен при изучении оных.

YUI Selector Utility

YUI Selector Utility позволяет использовать синтаксис CSS3 селекторов на Javascript, упрощая сбор, фильтрацию и тестирование HTML элементов.

YUI StyleSheet Utility

С помощью StyleSheet Utility на лету создавать и модифицировать CSS стили.

Разное


XRAY

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

Cheat Sheets


CSS Cheat Sheet

Одностраничный CSS cheat sheet перечисляющий все селекторы (CSS 2.1) и свойства. Включает картинку box-модели, единицы измерения CSS.

CSS Shorthand Cheat Sheet

YUI Library: CSS Reset, Base, Fonts, и Grids

Blueprint CSS Cheat Sheet

За пределами CSS


MoreCSS

MoreCSS это ориентированная на дизайнеров Javascript библиотека, которая позволяет писать код в CSS стиле для создания всплывающих окон, тултипов, меню на табах, таблиц «зебра», расширинных стилей списков и применения кросс-браузерной прозрачности.

LESS – Leaner CSS

Less это Ruby gem, который расширяет CSS добавляя следующими возможностями: переменные, миксины, операции и вложенные правила. Достаточно переименовать .css файлы .less для получения всех этих возможностей.

DtCSS

DtCSS – это PHP скрипт, который обрабатывает CSS файлы, позволяя использовать в них вложенные селекторы, цветовое смешение и т.д. DtCSS читает CSS файл со специальными инструкциями написанными для DtCSS, и выдает наружу обычный CSS. Имеется умная кэширующая система.

Sass + Compass

SASS — компилятор в стайлшиты. Очень удобно — форматирование отступами, как в питоне, миксины с параметрами (почти функции), переменные и операции над ними.

Просмотров: 1670 | Добавил: Zee | Рейтинг: 0.0/0 |
Форма входа
Логин:
Пароль:
Календарь новостей
«  Октября 2009  »
ПнВтСрЧтПтСбВс
   1234
567891011
12131415161718
19202122232425
262728293031
Поиск
Друзья сайта
Статистика
Copyright Bright Studio © 2016Хостинг от uCoz