Главная » Веб-Приложения » Обзор действительно полезных инструментов для разработчиков CSS.

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

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

Всем доброго дня или ночи.
Независимо от размера и масштаба проекта, -верстка всегда является процессом не только интересным и увлекательным, но и ко всему прочему, довольно таки утомительным, и занимает уйму времени. Даже если вы опытный веб-разработчик, разговаривающий на ты с таблицами каскадных стилей (), в совершенстве владеющий магией , то и в этом случае, вам не помешает иметь в своей обойме, набор хороших инструментов, который может существенно повысить производительность, да и просто избавить вас от рутинной работы.
В своих статьях, я рассказывал о некоторых онлайн-инструментах, отдельно и подробнейшим образом поведал в свое время, о довольно простом и совершенно бесплатном веб-генераторе CSS3, с контролем над базовыми атрибутами CSS3. Но этого мало по определению, на просторах интернета создаются и плодотворно работают множество полезнейших ресурсов, призванных облегчить «не легкий» труд веб-разработчиков всех мастей.

Сегодня хочу познакомить вас, уважаемые мои читатели, с более полным списком действительно полезных инструментов для разработчиков CSS. Вошедшие в обзор сервисы, каждый по своему хорош или не очень, выбор всегда остается за вами. Ну, а стало быть, без лишней суеты, внимательно читаем, выбираем и продолжаем творить доброе и вечное :)))

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

Спрайты / Sprites

 

CSS Sprite Generator

 
CSS Sprite Web-Generator
 
Простенький, но шустрый спрайт-генератор, который создает один спрайт изображения и генерирует соответствующий код CSS для вас.
 


 

CSS Sprite – Online CSS Sprite Builder / Generator

 
Online CSS Sprite Builder / Generator
 
Интерактивный инструмент, в помощь веб-дизайнерам и веб-разработчикам для создания CSS Sprites. Все, что нужно сделать, это загрузить несколько файлов, а сервис с легкостью генерирует спрайт изображения, сопроводив результат удобоваримым кодом HTML и CSS.
 


 

Генератор CSS спрайтов

 
Генератор CSS спрайтов
 
CSS Спрайт-генератор будет объединять загруженные изображения в один спрайт и генерировать исходный код CSS. Немаловажным и приятным фактором является присутствие Русского языка в интерфейсе этого онлайн-инструментария, что существенно облегчает работу с сервисом. Хотите запустить локальную копию? Теперь вы это можете.
 


 

Цвета / Colors

 

CSS Color Editor

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


 

Color Palette Generator

 
Генератор цветовой палитры
 
Данный инструмент позволяет загрузить изображение для дальнейшей генерации цветовой палитры, на основе первичных цветов изображения. Полезный механизм для быстрого захвата определенного цвета в изображении.
 


 

Colour Contrast Check

 
Проверьте цветовой контраст
 
С помощью этой веб-утилиты, вы легко сможете проверить цветовой контраст, предварительно указав цвет фона и переднего плана. Например, бывает очень полезно, когда необходимо определить контрастность текста на фоне заданного цвета или же при просмотре на черно-белом экране(да-да бывает и такое).
 


 

ColorZilla

 
ColorZilla для Firefox
 
ColorZilla это знакомое многим расширение для Firefox, предлагает пользователям самые передовые инструменты, в обойме дополнения выбора цвета, просмотр палитры, полное увеличение страницы, расширение позволяет получать различную информацию об элементах DOM быстро и легко, поддержка firebug, и еще куча разных полезностей.
 

 

CSS3 Генераторы

 

CSS3 Generator

 
Онлайн-Генератор CSS3
 
Привычный и понятный онлайн-генератор CSS3 с полным набором функций, отлично справляется с генерацией кода для border radius, box shadow, text shadow, RGBA, @font-face, multiple columns, box resize, box sizing и outline.
 


 

Coded Bits

 
Онлайн-Генератор CSS3 Coded Bits
 
Если в двух словах, Coded Bits это целый портал где отобраны лучшие онлайновые инструменты для генерации кода CSS. На сервисе собраны воедино и прекрасно работают все самые необходимые для веб-разработчиков механизмы. Назовите как хотите, студия, комбайн css3, если хотите Coded Bits, это своеобразный «швейцарский нож» с набором полезнейших функций для веб-дизайнеров, разработчиков и других, мыслящих в правильном направлении, «людей-человеков». По большому счету, заимев в своем активе этот инструментарий, можно не дергаться особо и работать в свое удовольствие, на благо всем страждущим, создавая удивительные и красивые интернет-проекты.
 


 
Из серии онлайн-генераторов CSS3, хочу предложить списком инструменты, предназначенные для генерации кода отдельных функций css3:

  • CSS Border Radius
    Формирует «border-radius» с поддержкой в Mozilla, WebKit и стандартных CSS3.
  • CSS3 Gradient Generator
    Генерирует линейный «градиент» для Mozilla и WebKit браузеров, а так же с недавних пор включена поддержка Opera11 + и Internet Explorer 8 +.
  • CSS3 Learning Tool
    Возможность быстро проверить, является ли конкретное свойство CSS3 поддерживаемым вашим браузером, с попутной генерацией кода.
  • @font-face Generator
    Простой в использовании CSS3 @font-face генератор, без особых излишеств и наворотов, загружаете шрифт, выбираете из трех стилей CSS, заключаете соглашение и смотрите результат.

 


 

Анализ и отладка CSS

 

CSS Analyzer

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


 

Сервис проверки CSS от W3C

 
Проверка каскадных таблиц стилей (CSS) и документов (X)HTML с таблицами стилей
Проверка каскадных таблиц стилей (CSS) и документов (X) HTML со встроенными таблицами стилей. Все очень просто и лаконично, вводите url вашего файла стилей или html документа, смело жмете кнопу «Проверить» и получаете результат, плохой или хороший зависит только от вас и ваших познаний по теме.
 


 

Firebug

 
Firebug - надстройка Firefox
 
Один из самых популярных инструментов веб-разработчиков — Firebug является надстройкой браузера Firefox, которая позволяет редактировать, отлаживать и контролировать CSS, HTML, JavaScript. Удобный просмотр HTML-кода страницы. Функция Inspect позволяет точно определить местонахождение тега того или иного элемента, просмотреть все «привязанные» к нему свойства и стили. Редактирование HTML и CSS прямо в браузере. Можно изменять атрибуты тегов и значения свойств для того, чтобы пронаблюдать изменения. Удобно для тех случаев, когда нужно путём экспериментов найти наиболее приемлемый вариант оформления создаваемой страницы. Отладка JavaScript. Отслеживание процесса загрузки страницы. Просмотр HTTP-заголовков обычных и AJAX-запросов. Вы можете использовать Firebug Lite в IE, Opera, и Safari.
 


 

Оптимизация CSS

 

CSS Drive CSS Compressor

 
CSS Компрессор
 
Сервис для оптимизации вашего CSS. Нормальный режим позволяет выбрать один из трех уровней сжатия, в зависимости от того, насколько четким вы хотите видеть сжатый CSS. Вы всегда можете переключиться в расширенный режим для более тонкой настройки оптимизации.
 


 

Robson CSS Compressor

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


 
Ну что друзья, надеюсь я ни кого не утомил большим количеством «букав», но пожалуй стоит перевести дух и продолжить рассказ о полезных инструментах для веб-разработчиков уже в следующий раз. А рассказать еще много есть о чем. В ближайшем будущем рассмотрим подборки подручных сервисов из таких категорий, как «Шпаргалки CSS», «Селекторы», «Форматирование CSS», «Преобразователи» и поддержка функций CSS конкретными браузерами. Тема по истине огромная и не менее увлекательная, так что жду ваших комментариев, откликов на статью и конечно же ссылки на интересные ресурсы, которые вам попадались на глаза. О достойных нашего и вашего внимания мы обязательно поговорим и расскажем всем-всем-всем.

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru