CSS tools
Перейти до навігації
Перейти до пошуку
- https://webref.ru/css — Справочник CSS
- https://www.w3.org/Style/Examples/007/units.ru.html — W3C про единицы измерения CSS
- CSS Layout Generator — Этот генератор может создать трехколоночный (одно-, двух-) макет с плавающей или фиксированной разметкой, содержащий header и footer. Размеры можно задавать в px, em или %.
- Grid Designer — Позволяет создать модульную сетку макета, с учетом таких параметров как: количество колонок, расстояние между колонками, размер полей, кегль основного шрифта, кегль заголовков, отступы и т.д. А также можно посмотреть, как будут выглядеть основные элементы форматирования текста в данной сетке.
- Layout Generators — Позволяет создавать резиновую многоколоночную или сеточную разметку. Позволяет задавать ширину и цвет. CSS код генерируется автоматически.
- Генератор HTML+CSS шаблонов — Сервис позволяет в несколько кликов мыши получить готовый дивовый каркас с нужными параметрами. После выбора параметров будет предложено скачать архив, в котором находится 2 файла с HTML и CSS.
- Boks — визуальный редактор для CSS фреймворка Blueprint, сделанный в виде приложения Adobe AIR. С помощь этого редактора можно визуально создавать и заполнять разметочную сетку, задавать вертикальный ритм, и экспортировать результат в HTML и CSS.
- Полезные инструменты и ссылки для CSS фреймворка Blueprint.
- YAML Builder — онлайновый сервис для визуального создания шаблонов основанных на HTML/CSS фреймворке YAML.
- YUI CSS Grid Builder — Простой веб интерфейс, используемый для быстрого создания кроссбраузерных шаблонов на основе YUI grid.
- 960 Grid System – Variable Grid System — быстрый способ создать CSS сетку, на основе CSS фреймоврка 960 Grid System.
- Grid System Generator — позволяет создавать шаблоны с фиксированной разметкой и валидным CSS / XHTML. Шаблоны могут быть основаны на одном из четырех CSS фреймворков: 960 Grid System, Golden grid, 1kb grid, Simple grid system. В дополнение к каждому шаблону также создается png файл для дизайна в Fireworks, Illustrator, OmniGraffle, Photoshop или Visio.
- Typetester — весьма удачное веб-приложение, предназначенное для сравнения шрифтов между собой. По словам разработчиков, основная задача — облегчить жизнь веб-дизайнера. Одновременно можно сравнивать три шрифта.
- CSS Type Set — Это сервис позволяющий применить к тексту CSS свойства и посмотреть, как это будет выглядеть. — Все изменения моментально отражаются на примере, а сгенерированный CSS код можно скопировать и использовать в дальнейшем.
- TypeChart — С помощью Typechart можно оценить оформление различных шрифтов. После обнаружение понравившегося варианта можно скопировать CSS код для использования на своем сайте.
- 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 — таблица показывающая размеры шрифтов в различных единицах измерения, которая также помогает переводить размер из одного значения в другое.
- CSS Color Editor — позволяет заменить цветовую схему вебсайта. На сервис локальный CSS файл, выбираются новые цвета, а затем сервис генерирует CSS файл с уже замененными цветами.
- Color Palette Generator — По заданному рисунку генерируют цветовую палитру состоящую из ключевых цветов.
- Color Contrast Check — Действительно интуитивный онлайн инструмент для проверки цвета, который позволяет внести цвет переднего и заднего фона в шестнадцетиричном формате или при помощи ползунков. Инструмент даёт моментальный результат — показывает, как выглядит эта комбинация и обладает ли она достаточной контрастностью при просмотре людьми, у которых нарушено цветовосприятие, или при просмотре на черно-белом экране (тест WCAG 2).
- ColorZilla — расширение для Firefox. В ColorZilla можно получить цвет, кликнув в любом месте сайта и после перенести этот цвет в любую другую программу (имеется 5 вариантов описания цвета). Можно изменять масштаб изображения страницы(20% – 1000%). Так же есть встроенный просмотрщик палитры, избранное, DOM инспектор и поддержка firebug.
- Конвертор HSL в RGB
http://www.spritecow.com/ — Онлайн-генератор CSS из картинки со спрайтами
- Quick Form Builder — Генерирует XHTML /HTML -совместимые и доступные формы с CSS разметкой. Вводим имена полей, затем выбираем типа каждого поля, формат( HTML или XHTML ) и получаем готовый HTML и CSS код формы.
- Wufoo — бесплатный онлайновый сервис, позволяющий с легкостью создавать хорошо выглядящие, валидные CSS/XHTML формы.
- List-o-Matic — Генерирует навигационные меню ( до 2 уровней), позволяя выбрать одно из нескольких доступных оформлений.
- CSS Menu Generator — Генерирует горизонтальные, вертикальные, выпадающие CSS меню.
- ThemeRoller — Позволяет создавать собственные темы для jQuery UI.
- CSS Text Wrapper — позволяет легко придать тексту любую форму и вставить к себе на страницу. Линиями задаем форму. Узловые точки добавляются по нажатию на линию в том месте где необходимо добавить. Можно настроить размеры блока, выравнивание, шрифт и т.д.
- The Box Office — Этот инструмент который позволит создать обтекание текста для картинок с различной неправильной формой. Просто вводите ссылку на любую картинку произвольной формы, задаете основное выравнивание изображения, цвет фона, который нужно игнорировать, высоту строки дополнительные отступы и цвет текста, а далее — идем за результатом.
- W3C CSS Validation Service — Проверка CSS на валидность.
- CSS Analyzer — сочетает W3C CSS Validation Service и дополнительную проверку цветов на контрастность (полезен для улучшения юзабилити) и единиц измерения, используемых в исходном коде. Результатом является очень подробное описание ошибок и предупреждений, точно так же как в W3C CSS Validation Service.
- Firebug — расширение для браузера Firefox, являющееся консолью, отладчиком, и DOM-инспектором Javascript, DHTML, CSS, XMLHttpRequest. Firebug показывает в консоли вызвавшую ошибку функцию, стек вызовов функций, вызвавших эту ошибку. Он предупреждает, что CSS-правило или Javascript-метод/свойство, которое вы пытаетесь использовать, не существует.
- Dust-Me Selectors — Позволяет проанализировать страницу и показать, сколько и какие стили не используются на странице сайта, а также укажет в каком файле стилей, в какой строке они прописаны.
- CssCleaner — Приложение Windows для удаления неиспользуемых CSS классов.
- CSS Redundancy Checker — Проверяет, все ли правила из CSS используются в HTML. После проверки выводит список не использованных на данной странице или группе страниц.
Здесь перечислены только минификаторы с настройками сжатия
- http://www.cssdrive.com/index.php/main/csscompressor/
- https://csscompressor.com/
- https://www.giftofspeed.com/css-compressor/
- CleanCSS – CSS Formatter and Optimizer — популярный онлайн-инструмент для форматирования и оптимизации CSS. Содержит группы настроек для баланса между оптимизацией и читабельностью. Одна из важных возможностей – это автоматическое соединение одинаковых селекторов и свойств.
- Styleneat — преобразовывает код CSS в стандартизированный, удобный для чтения формат, структурирует таким образом, что становится легко понять где какие области и как они связаны друг с другом.
- CSS Toolbox — множество инструментальных средств для быстрой и эффективной разработки CSS – валидатор, форматтер, оптимизатор.
- Conditional-CSS — Парсер CSS файлов на строне сервера с проверкой на тип и версию браузера. Позволяет сформировать специальные условные комментарии для различных групп браузеров. Доступны версии на PHP, C# и С.
- Litmus — обеспечивает проверку во всех основных браузерах, а также представляет отчет об ошибках, чтобы помочь вам идентифицировать и исправить любые ошибки. По завершении проверки, вы можете составить отчет о совместимости, чтобы представить его клиентам. Для бесплатного использования Litmus предлагается ограниченная версия.
- Web Browser CSS Support — Подробная таблица поддержки CSS-стандарта популярными браузерами.
- When Can I Use? — Даёт возможность сравнить поддержку браузерами различных новейших технологий, а именно — HTML 5, CSS 3, SVG и т.д. Можно выбрать как определённые браузеры, временные периоды, статусы, так и определённые технологии.
- IE7.js — Javascript библиотека, которая исправляет множество багов в HTML и CSS для версий Internet Explorer седьмой и ниже. К примеру, она исправляет поддержку прозрачности в PNG, фиксированное позиционирование элементов и фоновых изображений (position: fixed), поддержку псевдо класса: hover для всех тэгов и др.
- Modernizr — небольшая простая Javascript-библиотека, которая поможет использовать такие технологии, как CSS3, HTML5 в браузерах которые еще не поддерживают это технологии.
- Sizzle Javascript Selector Library — Быстрый Javascript движок выбора CSS селекторов. Sizzle поддерживает практически все CSS3 селекторы – даже такие редко используемые, как экранированные селекторы (”.foo\+bar”), юникодные селекторы и т.д.
- SelectORacle — Сервис дает описание на человеческом языке сложных селекторов CSS и может быть очень полезен при изучении оных.
- YUI Selector Utility — позволяет использовать синтаксис CSS3 селекторов на Javascript, упрощая сбор, фильтрацию и тестирование HTML элементов.
- YUI StyleSheet Utility — С помощью StyleSheet Utility на лету создавать и модифицировать CSS стили.
- XRAY — букмарклет, который может демонстрировать разную полезную информацию о всех «внутренностях» страницы. В частности, размеры всех элементов, координаты их расположения, CSS-свойства, названия HTML тегов, соответствующих отображаемым блокам, и некоторые другие детали.
- 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
- MoreCSS — ориентированная на дизайнеров Javascript библиотека, которая позволяет писать код в CSS стиле для создания всплывающих окон, тултипов, меню на табах, таблиц «зебра», расширинных стилей списков и применения кросс-браузерной прозрачности.
- LESS – Leaner CSS — Less это Ruby gem, который расширяет CSS добавляя следующими возможностями: переменные, миксины, операции и вложенные правила. Достаточно переименовать .css файлы .less для получения всех этих возможностей.
- DtCSS — DtCSS – это PHP скрипт, который обрабатывает CSS файлы, позволяя использовать в них вложенные селекторы, цветовое смешение и т.д. DtCSS читает CSS файл со специальными инструкциями написанными для DtCSS, и выдает наружу обычный CSS. Имеется умная кэширующая система.
- CSScomb — сортировка CSS-свойств. Описание от автора: http://habrahabr.ru/post/149998/