Сервисы для CSS Разработчиков #1 (Free OnLine Service)

ПОЛЕЗНЫЕ ИНСТРУМЕНТЫ ДЛЯ CSS РАЗРАБОТЧИКА

CSS РАЗРАБОТКА/3996605_razrabotka11 (670x544, 227Kb)

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

В подборку вошли инструменты по работе с макетами, CSS Фреймворками, шрифтами, цветами, спрайтами, формами, Компоненты UI, обертка текста, анализ и отладка, сопровождение, оптимизация, форматирование, браузерозависимость, селекторы и т.д

Чтобы инструмент был по-настоящему полезен, у него должна быть хорошая документация и дружелюбный интерфейс. К сожалению, некоторые инструменты в списке не полностью попадают под данные критерии. Если кто-то знает лучшие альтернативы с более дружелюбным интерфейсом и большей функциональностью, пишите в комментариях.

3996605_3dGOLD123 (97x113, 11Kb)

МАКЕТЫ

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

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


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


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

3996605_3dGOLD124 (118x114, 9Kb)

CSS Framework


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.

3996605_3dGOLD125 (88x138, 9Kb)

FONTS


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 — таблица показывающая размеры шрифтов в различных единицах измерения, которая также помогает переводить размер из одного значения в другое.

3996605_3dGOLD126 (202x217, 54Kb)

ЦВЕТ

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.


3996605_3dGOLD121 (131x113, 11Kb)

СПРАЙТЫ

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 файла из отмеченных картинок создается спрайт, и автоматически меняются соответствующие фрагменты файла на использования спрайта вместо одиночных картинок.




Серия сообщений "Теги HTML":
Часть 1 - Бесплатные библиотеки, огромный выбор.
Часть 2 - В помощь работе с HTML кодами (тегами)
...
Часть 21 - Для дизайнеров и Web Разработчиков (Free OnLine Survice)
Часть 22 - Полезные Сервисы для дизайнеров и Web Разработчиков (Free OnLine Survice)
Часть 23 - Сервисы для CSS Разработчиков #1 (Free OnLine Service)
Часть 24 - Сервисы для CSS Разработчиков #2 (Free OnLine Service)
Часть 25 - Сервисы для CSS Разработчиков #3 (Free OnLine Service)
...
Часть 42 - Латинские буквы с диакритическими знаками - Спецсимволы
Часть 43 - Греческие Алфавит - Спецсимволы
Часть 44 - Таблица HTML - Спецсимволов (просто огромная)
Рубрики:  Советы Любознательному
Дело Техники
Free Online Services
Это, для Вас - Любимые!
OnLine приложения, для дома и офиса

0 коммент.:

Отправить комментарий

 
Copyright (c) 2012 - 2014г. by MerlinWebDesigner ©