Shv в 06:55, 23 октября 2009

Shv — Fri, 23 Oct 2009 06:55:48 GMT

← Предыдущая		Версия 06:55, 23 октября 2009
Строка 149:		Строка 149:

	[http://habrahabr.ru/blogs/css/59418/ Sass + Compass]SASS — компилятор в стайлшиты. Очень удобно — форматирование отступами, как в питоне, миксины с параметрами (почти функции), переменные и операции над ними.		[http://habrahabr.ru/blogs/css/59418/ Sass + Compass]SASS — компилятор в стайлшиты. Очень удобно — форматирование отступами, как в питоне, миксины с параметрами (почти функции), переменные и операции над ними.
		+	[[Категория:Полезное]]

Shv: Новая страница: «= Макеты = [http://csscreator.com/tools/layout CSS Layout Generator]Этот генератор может создать трехколоночный (одн…»

Shv — Fri, 23 Oct 2009 06:54:37 GMT

Новая страница: «= Макеты = [http://csscreator.com/tools/layout CSS Layout Generator]Этот генератор может создать трехколоночный (одн…»

Новая страница

= Макеты =
[http://csscreator.com/tools/layout CSS Layout Generator]Этот генератор может создать трехколоночный (одно-, двух-) макет с плавающей или фиксированной разметкой, содержащий header и footer. Размеры можно задавать в px, em или %.

[http://grid.mindplay.dk/ Grid Designer]Позволяет создать модульную сетку макета, с учетом таких параметров как: количество колонок, расстояние между колонками, размер полей, кегль основного шрифта, кегль заголовков, отступы и т.д. А также можно посмотреть, как будут выглядеть основные элементы форматирования текста в данной сетке.

[http://www.pagecolumn.com/ Layout Generators]Позволяет создавать резиновую многоколоночную или сеточную разметку. Позволяет задавать ширину и цвет. CSS код генерируется автоматически.

[http://csstemplater.com/ Генератор HTML+CSS шаблонов]Сервис позволяет в несколько кликов мыши получить готовый дивовый каркас с нужными параметрами. После выбора параметров будет предложено скачать архив, в котором находится 2 файла с HTML и CSS.

[http://psd2cssonline.com/ PSD2CSS]Cервис, для конвертирования PSD макетов в cверстанную страницу. Быстро, бесплатно и относительно качественно.

= CSS Фреймворки =
[http://toki-woki.net/p/Boks/ Boks]Boks это визуальный редактор для CSS фреймворка Blueprint, сделанный в виде приложения Adobe AIR. С помощь этого редактора можно визуально создавать и заполнять разметочную сетку, задавать вертикальный ритм, и экспортировать результат в HTML и CSS.

[http://wiki.github.com/joshuaclayton/blueprint-css/tools-and-resources Полезные инструменты и ссылки для CSS фреймворка Blueprint.]

[http://builder.yaml.de/ YAML Builder]YAML Builder это онлайновый сервис для визуального создания шаблонов основанных на HTML/CSS фреймворке YAML.

[http://developer.yahoo.com/yui/grids/builder/ YUI CSS Grid Builder]Простой веб интерфейс, используемый для быстрого создания кроссбраузерных шаблонов на основе YUI grid.

[http://www.spry-soft.com/grids/ 960 Grid System – Variable Grid System]Variable Grid System – это быстрый способ создать CSS сетку, на основе CSS фреймоврка 960 Grid System.

[http://www.gridsystemgenerator.com/ 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.

= Шрифты =
[http://www.typetester.org/ Typetester]Typetester – это весьма удачное веб-приложение, предназначенное для сравнения шрифтов между собой. По словам разработчиков, основная задача — облегчить жизнь веб-дизайнера. Одновременно можно сравнивать три шрифта.

[http://csstypeset.com/ CSS Type Set]Это сервис позволяющий применить к тексту CSS свойства и посмотреть, как это будет выглядеть. Все изменения моментально отражаются на примере, а сгенерированный CSS код можно скопировать и использовать в дальнейшем.

[http://www.typechart.com/ TypeChart]С помощью Typechart можно оценить оформление различных шрифтов. После обнаружение понравившегося варианта можно скопировать CSS код для использования на своем сайте.

[http://texster.ru/ Texster]Texster — сервис для подбора «безопасных» шрифтов для вашего сайта. Не смотря на то, что существует множество аналогичных и в основном зарубежных ресурсов, texster отличается тем, что результаты отображаются сразу для всех шрифтов, что позволяет сравнить их и выбрать нужный.

[http://www.jan-quickels.de/tools-web-typography/ CSS-Typoset Matrix and Code Generator]

[http://csstxt.com/ CSStxt]Несложный веб-инструмент создания CSS стилей шрифта.

[http://jameswhittaker.com/projects/apps/em-calculator-air-application/ EM Calculator AIR Application]Калькулятор вертикального ритма в XHTML & CSS; легко конвертирует px в em; padding и margins вычисляются автоматически.

[http://riddle.pl/emcalc/ Em Calculator]Em Calculator это небольшой Javascript инструмент который преобразовывает определенное значение px в соответствующее значение в em.

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

= Цвет =
[http://css-color-replace.orca-multimedia.de/ CSS Color Editor]CSS Color Editor позволяет заменить цветовую схему вебсайта. На сервис локальный CSS файл, выбираются новые цвета, а затем сервис генерирует CSS файл с уже замененными цветами.

[http://www.cssdrive.com/imagepalette/ Color Palette Generator]По заданному рисунку генерируют цветовую палитру состоящую из ключевых цветов.

[http://www.snook.ca/technical/colour_contrast/colour.html Color Contrast Check]Действительно интуитивный онлайн инструмент для проверки цвета, который позволяет внести цвет переднего и заднего фона в шестнадцетиричном формате или при помощи ползунков. Инструмент даёт моментальный результат — показывает, как выглядит эта комбинация и обладает ли она достаточной контрастностью при просмотре людьми, у которых нарушено цветовосприятие, или при просмотре на черно-белом экране (тест WCAG 2).

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

[http://monc.se/kitchen/stew/hsl/ Конвертор HSL в RGB]

= Спрайты =
[http://spritegen.website-performance.org/ CSS Sprite Generator]Этот инструмент позволяет автоматизировать процесс создания CSS спрайтов. Просто дайте ему ZIP файл, содержащий 2 и более изображений (GIF, PNG или JPG), и он будет генерировать спрайт-изображение и соответствующие правила CSS для ориентации и отображения каждого элемента изображения.

[http://www.lecentre.net/fratoblog/yasc/ YASC (Yet Another Sprite Creator)]Еще один генератор. Процесс создания спрайта представляет собой следующее: загружается картинка, затем визуально отмечаются необходимые области и им назначается CSS id. Когда выбраны все участки происходит генерация CSS для этих спрайтов.

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

= Формы =
[http://www.accessify.com/tools-and-wizards/accessibility-tools/quick-form-builder/ Quick Form Builder]Генерирует XHTML /HTML -совместимые и доступные формы с CSS разметкой. Вводим имена полей, затем выбираем типа каждого поля, формат( HTML или XHTML ) и получаем готовый HTML и CSS код формы.

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

= Компоненты UI =
[http://www.accessify.com/tools-and-wizards/developer-tools/list-o-matic/ List-o-Matic]Генерирует навигационные меню ( до 2 уровней), позволяя выбрать одно из нескольких доступных оформлений.

[http://www.cssmenumaker.com/ CSS Menu Generator]Генерирует горизонтальные, вертикальные, выпадающие CSS меню.

[http://jqueryui.com/themeroller/ ThemeRoller]Позволяет создавать собственные темы для jQuery UI.

= Обертка текста =
[http://www.csstextwrap.com/ CSS Text Wrapper]Сервис CSS Text Wrapper позволяет легко придать тексту любую форму и вставить к себе на страницу. Линиями задаем форму. Узловые точки добавляются по нажатию на линию в том месте где необходимо добавить. Можно настроить размеры блока, выравнивание, шрифт и т.д.

[http://www.theboxoffice.be/ The Box Office]Этот инструмент который позволит создать обтекание текста для картинок с различной неправильной формой. Просто вводите ссылку на любую картинку произвольной формы, задаете основное выравнивание изображения, цвет фона, который нужно игнорировать, высоту строки дополнительные отступы и цвет текста, а далее — идем за результатом.

= Анализ и Отладка =
[http://jigsaw.w3.org/css-validator/ W3C CSS Validation Service]Проверка CSS на валидность.

[http://juicystudio.com/services/csstest.php CSS Analyzer]CSS Analyser сочетает W3C CSS Validation Service и дополнительную проверку цветов на контрастность (полезен для улучшения юзабилити) и единиц измерения, используемых в исходном коде. Результатом является очень подробное описание ошибок и предупреждений, точно так же как в W3C CSS Validation Service.

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

= Сопровождение =
[http://www.sitepoint.com/dustmeselectors/ Dust-Me Selectors]Позволяет проанализировать страницу и показать, сколько и какие стили не используются на странице сайта, а также укажет в каком файле стилей, в какой строке они прописаны.

[http://www.dotnetsurfers.com/Blog/2008/10/02/RemovingUnusedCSSClassesFromYourWebApplication.aspx CssCleaner]Приложение Windows для удаления неиспользуемых CSS классов.

[http://services.immike.net/css-checker/ CSS Redundancy Checker]Проверяет, все ли правила из CSS используются в HTML. После проверки выводит список не использованных на данной странице или группе страниц.

= Оптимизация =
[http://www.cssdrive.com/index.php/main/csscompressor/ CSS Drive CSS Compressor]CSS компрессор с опциями компрессии «Слабая», «Нормальная» и «Сверхкомпактная».

[http://iceyboard.no-ip.org/projects/css_compressor Robson CSS Compressor]Еще один хороший инструмент для компрессии CSS файлов — Robson CSS Compressor. Пока он в стадии разработки, и возможны неточности в его работе.

[http://blog.base42.nl/2008/11/20/minifyme-a-minimizer-for-css-and-javascript/ MinifyMe – AIR Application]Небольшое AIR-приложение, которое позволит собрать несколько css-файлов в один.

= Фоматирование =
[http://www.cleancss.com/ CleanCSS – CSS Formatter and Optimizer]Clean CSS является популярным онлайн-инструментом для форматирования и оптимизации CSS. Содержит группы настроек для баланса между оптимизацией и читабельностью. Одна из важных возможностей – это автоматическое соединение одинаковых селекторов и свойств.

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

[http://www.blumentals.net/csstool/ CSS Toolbox]Бесплатный CSS Toolbox включает множество инструментальных средств для быстрой и эффективной разработки CSS –валидатор, форматтер, оптимизатор.

= Браузерозависимость =
[http://www.conditional-css.com/ Conditional-CSS]Парсер CSS файлов на строне сервера с проверкой на тип и версию браузера. Позволяет сформировать специальные условные комментарии для различных групп браузеров. Доступны версии на PHP, C# и С.

[http://habrahabr.ru/blogs/webdev/53053/ 7 простых способов протестировать кроссбраузерную совместимость]

[http://www.webdevout.net/browser-support-css Web Browser CSS Support]Подробная таблица поддержки CSS-стандарта популярными браузерами.

[http://a.deveria.com/caniuse/ When Can I Use?]Даёт возможность сравнить поддержку браузерами различных новейших технологий, а именно — HTML 5, CSS 3, SVG и т.д. Можно выбрать как определённые браузеры, временные периоды, статусы, так и определённые технологии.

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

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

= Селекторы =
[http://sizzlejs.com/ Sizzle Javascript Selector Library]Быстрый Javascript движок выбора CSS селекторов. Sizzle поддерживает практически все CSS3 селекторы – даже такие редко используемые, как экранированные селекторы (”.foo\+bar”), юникодные селекторы и т.д.

[http://yass.webo.in/ YASS: Yet Another cSS selector]Самая быстрая Javascript-библиотека для выбора элементов по CSS-селектору.

[http://gallery.theopalgroup.com/selectoracle/ SelectORacle]Сервис дает описание на человеческом языке сложных селекторов CSS и может быть очень полезен при изучении оных.

[http://developer.yahoo.com/yui/selector/ YUI Selector Utility]YUI Selector Utility позволяет использовать синтаксис CSS3 селекторов на Javascript, упрощая сбор, фильтрацию и тестирование HTML элементов.

[http://developer.yahoo.com/yui/stylesheet/ YUI StyleSheet Utility]С помощью StyleSheet Utility на лету создавать и модифицировать CSS стили.

= Разное =
[http://www.westciv.com/xray/ XRAY]XRAY это букмарклет, который может демонстрировать разную полезную информацию о всех «внутренностях» страницы. В частности, размеры всех элементов, координаты их расположения, CSS-свойства, названия HTML тегов, соответствующих отображаемым блокам, и некоторые другие детали.

= Cheat Sheets =
[http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/ CSS Cheat Sheet]Одностраничный CSS cheat sheet перечисляющий все селекторы (CSS 2.1) и свойства. Включает картинку box-модели, единицы измерения CSS.

[http://www.leigeber.com/2008/04/css-shorthand-cheat-sheet/ CSS Shorthand Cheat Sheet]

[http://yuiblog.com/assets/pdf/cheatsheets/css.pdf YUI Library: CSS Reset, Base, Fonts, и Grids]

[http://www.christianmontoya.com/2007/11/12/blueprint-css-cheat-sheet/ Blueprint CSS Cheat Sheet]

= За пределами CSS =
[http://yellowgreen.de/morecss/ MoreCSS]MoreCSS это ориентированная на дизайнеров Javascript библиотека, которая позволяет писать код в CSS стиле для создания всплывающих окон, тултипов, меню на табах, таблиц «зебра», расширинных стилей списков и применения кросс-браузерной прозрачности.

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

[http://code.google.com/p/dtcss/ DtCSS]DtCSS – это PHP скрипт, который обрабатывает CSS файлы, позволяя использовать в них вложенные селекторы, цветовое смешение и т.д. DtCSS читает CSS файл со специальными инструкциями написанными для DtCSS, и выдает наружу обычный CSS. Имеется умная кэширующая система.

[http://habrahabr.ru/blogs/css/59418/ Sass + Compass]SASS — компилятор в стайлшиты. Очень удобно — форматирование отступами, как в питоне, миксины с параметрами (почти функции), переменные и операции над ними.

Инструменты вебмастера + - История изменений

Shv: переименовал «Инструменты вебмастера» в «Инструменты вебмастера +»

Shv в 06:55, 23 октября 2009

Shv: Новая страница: «= Макеты = [http://csscreator.com/tools/layout CSS Layout Generator]Этот генератор может создать трехколоночный (одн…»