Онлайн-инструменты для кодеров / Habr
Онлайн-сервисы становятся все популярнее, постепенно усложняя функционал и улучшая интерфейсы. В этой подборке представлены онлайн-инструменты для кодеров.Cloud9
«Это Google Docs, только для кода» — так говорят о проекте. Облачный сервис вырос из Mozilla Bespin. Основные фишки: SSH, drag-and-drop и возможность разработки оффлайн.
Koding (публичная бета)
Koding.com — среда разработки с предустановленным веб-сервером и элементами социальной сети. Этот сервис уже представляли на хабре, топик даже вызвал хабраэффект и нашествие троллей. Сервис до сих пор находится в стадии публичной беты.
CodePen
Инструмент для фронт-энд разработки, позволяющий легко оперировать с CSS/HTML/JS-конструкциями, позволяет подключать js-библиотеки: jQuery, MooTools и т.д. Авторы — Alex Vazquez, Tim Sabat и небезызвестный Chris Coyier.
JSFiddle
Один из самых популярных инструментов для работы с JavaScript/HTML/CSS/SCSS. Прост, удобен, умеет подключать дополнительные библиотеки.
Dabblet
Аналог предыдущего сервиса с достаточно приятным интерфейсом.
Pastebin.me
Сервис для настоящих любителей минимализма — никаких лишних элементов в интерфейсе, только самое нужное, только хардкор.
CSSDesk
CSS-песочница с приятным и удобным интерфейсом.
jsdo.it
Кодинг-сообщество для фронт-энд разработчиков. Подходит для экспериментов с HTML5, WebGL, JavaScript и многим другим — функционал впечатляет.
Tinker
Простая JS/HTML/CSS-песочница.
Tinkerbin
Еще одна простая аналогичная песочница.
SQL Fiddle
Инструмент для работы с SQL-базами от разработчиков с Аляски.
ReFiddle
Сервис для работы с регулярными выражениями на Ruby, JavaScript и .NET.
CSSDeck
Сайт для демонстрации различных CSS-эффектов, можно посмотреть рейтинг самых популярных, там много интересного.
JS Bin
HTML/CSS/JS плюс консоль.
Thimble
Разработка от Mozilla, код и его результат отображается на одной странице в режиме реального времени.
Liveweave
Очень простой в использовании — никакого логина, шаринга, только окна с кодом и результатом.
Google Code Playground
Сервис для работы с Google API.
Compilr
Полноценная среда разработки, интерфейс реализован с использованием всеми любимого фреймворка — Twitter Bootstrap.
Знаете еще подобные сервисы? Пишите в комментарии — добавлю.
Онлайн-генераторы CSS стилей для сайта
Приветствую вас на сайте Impuls-Web!
В прошлой статье я показывала вам несколько онлайн-сервисов, которые позволяют генерировать css-стили для кнопок.
В этой статье мы продолжим тему автоматической генерации css-свойств, и я покажу вам еще пару сервисов, которые позволят вам без вникания в css-код задавать красивые тени для блоков, тени для текста, скруглять углы, и деформировать отдельные элементы на вашем сайте.
Навигация по статье:
CSS3Generator
Первый из таких сервисов называется CSS3Generator.in.
Данный сервис позволяет генерировать следующие CSS-свойства:
- Радиус скругления углов (border-radius) – можно задать при помощи ползунка, либо при помощи числового значения.
После того, как вы задали настройки, просто копируете код, вставляете его в файл style.css, а вместо div_radius пишите тот класс элемента, для которого вам нужно, что бы это свойство применилось.
- Тени для блоков и кнопок (box-shadow) — при помощи ползунков вы можете регулировать вертикальное смещение тени, горизонтальное смещение, уровень размытия тени, а также ее цвет.
- Тени для текста (text-shadow). — здесь задаётся горизонтальное и вертикальное смещение, уровень размытия, цвет тени.
- Уровень прозрачности (opacity) — если вы, к примеру, хотите, что бы при наведении на кнопку или на какой-то элемент на сайте, он становился полупрозрачным, то вы можете использовать это свойство. Значение здесь задается от 0 до 1, и при помощи ползунка вы можете выбирать тот уровень прозрачности, который вам нужен.
- Трансформация блока (transform) – здесь при помощи ползунков вы можете изменять форму отдельного блока или элемента на сайте, и всяческие его деформировать, поворачивать, масштабировать, и т.д. После того, как вы задали все необходимые параметры, нажимаете на кнопку «Code». И точно так же как и в случае с предыдущими вариантами, копируете его в файл style.css.
- Цвета в формате RGBA. Помимо CSS-свойств данный сервис так же позволяет генерировать цвета в формате RGBA, но, на мой взгляд, это не самый удобный вариант подбора цветов для сайта.
- Генерация стилей для кнопок. Так же, здесь с правой стороны, на панели инструментов, вы можете найти генератор кнопок, при помощи которого можно, в принципе, задавать практически все те же параметры, которые мы с вами задавали при помощи сервисов для генерации CSS-свойств для кнопок.
После того, как вы задали все параметры, вам необходимо нажать на получившуюся кнопку, что бы получить ее код.
При этом здесь обращайте внимание, что у вас код генерируется для обычного состояния кнопки, для эффекта при наведении, с псевдоклассом hover, и для эффекта при нажатии с псевдоклассом active. То есть когда вы будете применять эти стили для какой-то ссылки на вашем сайте, вам нужно будет в трех местах подставлять нужный класс.
- Градиентные переходы (Gradient) — здесь вы можете использовать два типа градиента, линейный или радиальный. Цвета можно задавать либо в формате RGB, при помощи ползунков. В первом столбце вы задаете начальное значение цвета, а во втором — конечное значение.
Так же вы можете использовать шестнадцатеричный формат. Для этого вам нужно будет поставить галочку:
А после, либо при помощи палитры выбрать нужные вам цвета, либо вставить готовые коды цветов.
Так же вы можете этот градиент поворачивать, изменять уровень его перехода, и уровень соотношения цветов.
После того, как все необходимые параметры заданы, просто копируете все css-свойства и заменяете класс, который там стоит по умолчанию на свой.
WebOnliner.ru
В этом сервисе есть возможность генерировать css-свойства для оформления блоков html, генерировать таблицы и генерировать css-фильтры для изображений. Я сейчас остановлюсь на css-генераторе оформления блоков.
Кликаем по соответствуюшему блоку, и далее у нас сверху появляется панель, на которой мы проставляем галочки на тех эффектах, которые нам нужны.
Здесь можно задавать следующие параметры:- Размер. Задаётся в пикселях при помощи ползунка или числового значения
- Фон. Здесь вы можете задавать либо цветовое значение, либо выбирать какое-то изображение.
При этом, изображение уже должно находится либо на вашем хостинге, либо на каком-то сервисе в интернете, а сюда вставляется уже непосредственно ссылка на изображение.
Так же вы можете использовать градиенты. Здесь есть возможность задавать до пяти различных цветов, выбирать радиальный или линейный градиент, задавать позиции для изображений, если вы используете картинку, и т.д. при этом снизу у вас сразу же генерируется уже готовый css-код.
- Трансформация элементов. Для этого ставим галочку и затем, при помощи ползунков задаем параметры.
- Радиус скругления углов. Задаётся как при помощи ползунков, так и при помощи числового значения
- Тень для блока. Для неё можно задавать горизонтальное и вертикальное смешение, размытие и цвет. При этом вы так же можете сделать, что бы у вас тень была внешней или внутренней.
- Бордюр или граница. Здесь задается размер в пикселях, тип границы, есть возможность указать размер границ с каждой стороны.
Далее, после того как вы задали все настройки, просто копируем все сгенерированные css-стили в файл style.css и заменяем класс блока на тот класс или идентификатор, который используется у вас на сайте для того или иного элемента.
Видеоинструкция
Как видите, ни чего сложного здесь нет. Все эти сервисы являются бесплатными и довольно простыми, поэтому их можно использовать для оформления отдельных элементов на вашем сайте, при помощи css.
Если данная статья была для вас полезной, не забудьте поделиться ею в социальных сетях, а так же подпишитесь на мою рассылку. Все ваши вопросы и предложения вы можете оставить в комментариях под статьей. Я желаю вам успехов в создании и оформлении ваших сайтов!
До встречи в следующих статьях!
С уважением Юлия Гусарь
Список полезных инструментов для CSS разработчика / Habr
Это не попытка создать список всех существующих инструментов для CSS разработки. Только некоторые, наиболее полезные были отобраны и размещены в соответствующих категориях.Чтобы инструмент был по-настоящему полезен, у него должна быть хорошая документация и дружелюбный интерфейс. К сожалению, некоторые инструменты в списке не полностью попадают под данные критерии. Если кто-то знает лучшие альтернативы с более дружелюбным интерфейсом и большей функциональностью, пишите в комментариях.
CSS Layout Generator
Этот генератор может создать трехколоночный (одно-, двух-) макет с плавающей или фиксированной разметкой, содержащий header и footer. Размеры можно задавать в px, em или %.
Grid Designer
Позволяет создать модульную сетку макета, с учетом таких параметров как: количество колонок, расстояние между колонками, размер полей, кегль основного шрифта, кегль заголовков, отступы и т.д. А также можно посмотреть, как будут выглядеть основные элементы форматирования текста в данной сетке.
Layout Generators
Позволяет создавать резиновую многоколоночную или сеточную разметку. Позволяет задавать ширину и цвет. CSS код генерируется автоматически.
Генератор HTML+CSS шаблонов
Сервис позволяет в несколько кликов мыши получить готовый дивовый каркас с нужными параметрами. После выбора параметров будет предложено скачать архив, в котором находится 2 файла с HTML и CSS.
PSD2CSS
Cервис, для конвертирования PSD макетов в cверстанную страницу. Быстро, бесплатно и относительно качественно.
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 формы.
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 тегов, соответствующих отображаемым блокам, и некоторые другие детали.
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
MoreCSS это ориентированная на дизайнеров JavaScript библиотека, которая позволяет писать код в CSS стиле для создания всплывающих окон, тултипов, меню на табах, таблиц «зебра», расширинных стилей списков и применения кросс-браузерной прозрачности.
LESS – Leaner CSS
Less это Ruby gem, который расширяет CSS добавляя следующими возможностями: переменные, миксины, операции и вложенные правила. Достаточно переименовать .css файлы .less для получения всех этих возможностей.
DtCSS
DtCSS – это PHP скрипт, который обрабатывает CSS файлы, позволяя использовать в них вложенные селекторы, цветовое смешение и т.д. DtCSS читает CSS файл со специальными инструкциями написанными для DtCSS, и выдает наружу обычный CSS. Имеется умная кэширующая система.
Sass + Compass
SASS — компилятор в стайлшиты. Очень удобно — форматирование отступами, как в питоне, миксины с параметрами (почти функции), переменные и операции над ними.
10 онлайн-генераторов CSS3
С выходом в свет CSS3 жизнь веб-разработчиков стала интересней, забористей и в то же время проще. Чего только стоит новое свойство border-radius, которое избавляет веб-разработчиков от головной боли под названием «закругленные уголки в блоках». Уж сколько способов изощренных придумали до выхода CSS3 веб-умельцы, чтобы реализовать в html-коде такие блоки. Кроме того, в CSS3 появились новые креативные эффекты, которые расширяют возможности оформления и форматирования html-кода.
Но, конечно, есть и ложка дёгтя — реализовав новое свойство CSS3 в одном браузере Вы совершенно не можете быть уверены, что в других браузерах оно будет отображаться так же корректно. Для этого, веб-умельцы уже успели придумать разные способы, кусочки кода,»хаки», которые часто помогают решить проблему несовместимости в браузерах.
Чтобы помочь разобраться в мноогообразии онлайн-инструментов, которые генерируют CSS3 свойства для разных браузеров, ТопОбзор провёл обзор десяти онлайн-генераторов CSS3.
CSS3 Generator — это онлайн инструмент, автоматический генератор CSS3 кода для определенных свойств, таких как border radius, box shadow, text shadow, RGBA, @FontFace, multiple columns, box resize, box sizing, outline, transitions, transform, selectors, gradients. В выпадающем меню выбирается нужное свойство и получить готовый CSS3 код. Возле когда будут отображаться иконки в каких браузерах корректно работает данное свойство.
CSS3 Please! — это кроссбраузерный генератор правил CSS3. Очень простой и наглядный интерфейс — правила располагаются сразу на экране и можно вносить свои данные. В настоящее время он помогает писать правила для: border radius, box shadow, text-shadow, RGBA, @FontFace, gradients, transitions, transform, multiple columns, animation, box resize, box sizing, outline. Для каждого браузера могут понадобиться определенные префиксы, чтобы обеспечить кроссбраузерность, генератор CSS3 Please! автоматически создает эти префиксы.
Click Chart — это еще один функциональный генератор CSS3. Чтобы сгенерировать желаемое свойство, нужно кликнуть на определенный блок правил. Click Chart имеет более полный список свойств для генерации CSS3, чем предыдущие инструменты.
Название онлайн-генератора Border Radius говорит само за себя — этот сайт генерирует свойство border-radius.
Пожалуй, одним из самых долгожданных правил CSS3 можно назвать свойства для оформления кнопок с разными эффектами (например, закругленные уголки, градиентный фон, тени и т.д.). Онлайновый генератор CSS-Trick Button Maker делает именно это — генерирует код для кнопки с определенными параметрами, которые Вы задаете. Есть, правда, досадный ньюанс, который пока не исправлен — некоторые свойства не работают под IE7-8.
Все больше и больше браузеров способно обрабатывать встроенные шрифты, но получить правильный формат для каждого браузера, задача довольно нетривиальная. С ней поможет справиться онлайн-генератор Font Squirrel @Font-Face Kit Generator. Для этого нужно загрузить шрифты TrueType или OpenType и генератор выдаст вам CSS3 файл или EOT файл для нужного браузера.
CSS3 Sandbox — онлайн генератор CSS3 таких свойств как gradient, transform, shadows. Пока небольшой набор параметров, но бещают, что скоро существенно расширится функционал данного генератора.
Border Image — онлайн-генератор CSS3 свойства border-image, которое позволяет задавать изображения (картинки) для оформления границы блока, а не просто цвет, как раньше. Быстро, наглядно, легко. К сожалению, это свойство пока не работает под IE7-8.
CSS3 Column Generator — онлайн-генератор колонок в CSS3. Это крайне полезное свойство для html-вёрстки поддерживается пока в FireFox, Chrome, Safari, Opera. Internet Explorer, как водится, пасет задних.
Похожее
Подборка отличных генераторов CSS3 и HTML5
Большому мастеру, знатоку и профессионалу HTML5 и CSS3 возможно и не нужны всякого рода генераторы кода (хотя и ему они могут принести не мало пользы и сэкономить время). Новичку, любителю или человеку осваивающему данные языки они могут стать неплохим подспорьем. Сегодня я как раз я подготовил для вас подборку таких генераторов. Не смотря на то, что стандарты HTML5 и CSS3 пусть и появились достаточно давно, используются они далеко не всеми веб-дизайнерами. Возможно, с помощью генераторов вам будет проще их применять.
Генераторы CSS3
Хотите определить стили? В этом вам помогут генераторы CSS3. Мне удалось найти достаточно большое их количество, поэтому я сгруппировал однотипные сервисы (а иногда и плагины) в подгруппы:
Универсальные CSS3-генераторы
CSS3.me
К данному сервису приложил руку известный дизайнер Эрик Хоффман (Eric Hoffman). Функционал данного генератора вряд-ли способен впечатлить (вы можете определять только border-radius, box-shadow, background gradient и opacity), зато все сделано очень удобно — значения регулируются на глаз ползунками, имеется превью в режиме реального времени и так далее.
Еще одна приятная фича — после того как вы нажмете кнопку «Get the Code», в появившемся окне вы можете галочками отметить (или наоборот, убрать лишнее) дополнительные «опции» (не знаю как то еще назвать) кода, например, совместимость со старыми браузерами или комментарии.
CSS3 Maker
CSS3 Maker — куда более функционально насыщенный чем предыдущий сервис, по сути он умеет все что вам может потребоваться. Помимо основного меню CSS3 Styles, в генераторе имеются закладки — Border Radius, Gradient, CSS Transform, CSS Animation, CSS Transition, RGBA, Text Shadow, Text Rotation, Box Shadow и @Font Face. То есть, если вы ищите, генератор-комбайн («все в одном»), возможно CSS3 Maker — ваш выбор!
CSS3 Generator
CSS3 Generator — еще один неплохой универсальный генератор, обладающий практически тем же функционалом, что CSS3 Maker, но, на мой вкус, чуть менее удобный (хоть и обладающий более простым интерфейсом). В первую очередь за счет того, что здесь отсутствуют удобные ползунки и вам необходимо прописывать точные значения параметров. Хотя, для кого-то это, естественно, недостатком не является.
Генераторы CSS3 кнопок
CSS3-Tricks Button Maker
С помощью CSS3-Tricks Button Maker создать красивую кнопку (кнопки) может даже абсолютный «чайник». Единственная (но очень серьезная) претензия к сервису — функционал мог бы быть побогаче, все таки речь о CSS3. Данный генератор все возможностей стандарта, конечно, не реализует.
CSS3 Button.net
Данный генератор можно уже без всяких натяжек назвать честным CSS3-генератором. В арсенале сервиса не только самые обыденные эффекты, но и весьма продвинутые — имеется внутренняя тень (inner shadow), вы можете добавить сразу две тени тексту кнопки и так далее. В конце концов, все остальные эффекты имеют гораздо большее «контроля» (число настроек).
CSS3 Button Generator
Весьма неплохой удобный генератор кнопок. Обладает очень простым интерфейсом, а потому пользоваться им одно удовольствие. Мне кажется, CSS3 Button Generator — отличный выбор для новичков!
Border-генераторы
Border-Image
Хотите задать интересный стиль границ на основе какого-то изображения? Вам по адресу, Border-Image это умеет!
Border-Radius
Материалистичный и очень простой инструмент. Не отягощен функционалом, зато очень удобен когда вам нужно задать разный радиус для скругленных углов! Для этого задайте требуемое значение в каждом углу.
Генератор градиентов
Color Zilla Gradient Editor (ссылки ниже)
Color Zilla Gradient Editor — удобный и практичный генератор градиентов. В отличие от всех описанных выше инструментов является расширением для браузера, а не сервисом, что впрочем, пожалуй, даже хорошо. В арсенале «Колорзилла» есть пипетка (Color Picker), которой гораздо удобнее орудовать когда ее не нужно вызывать из интерфейса какого-нибудь сервиса.
Drop Shadow генератор
Webestools Shadow Generator
Очень простой генератор, задающий значение свойства box-shadow. Вы можете регулировать размер тени, ее цвет, прозрачность, уровень размытия (Blur), источник света (смещение) и прочее.
Прочие генераторы
CSS3Please
Это в большей мере даже не генератор, а обучающий продукт. Вам дан шаблон, вы можете отключать/включать те или иные правила, менять значение и смотреть что получится. Отличное практическое пособие для тех кто познает новый стандарт CSS3 или просто знакомится с основами HTML и CSS верстки.
HTML5
HTML5-генераторы, это по-сути не что иное, как генератор семантического шаблона. В данный обзор я умышленно не включив всем известный HTML5 Boilerplate, поскольку он и без того широко известен и любим вебмастерами всего мира. Давайте менее распространенных представителей:
Shikiryu HTML5 Generator
С помощью данного сервиса удобно создать «балванку» и тем самым сэкономить массу времени. Генератор не предлагает ничего сверхъестественного, тем не менее, штука полезная.
Switch to HTML5 Generator
Еще один достаточно удобный генератор шаблона. Приглянулся мне тем, что позволяет заранее выбрать нужные элементы (section, nav, article, footer, aside и пр.)
Quackit HTML5 Generator
Не самый модный, но вполне пригодный генератор. Новичкам он вряд-ли понравится, а вот продвинутому вебмастеру приглянуться может. Надеюсь данные HTML5 и CSS3 генераторы помогут вам просто и легко создавать элементы сайтов, используя самые современные стандарты и технологии.
P.S. Карточные игры всегда были популярны в разных ситуациях, но игра покер заняла свою особенную нишу как спорт и даже способ заработка денег в сети.
Сделайте замечательный подарок своей девушке — элитная парфюмерия http://makeup.com.ua/ в нашем интернет магазине представлена всеми популярными брендами.
10 очень полезных генераторов кода для Веб Дизайнеров
Генераторы кода могут стать лучшим другом веб дизайнера по двум причинам. Во-первых, они помогают в изучении новых техник или совершенствовании тех, с которыми вы уже знакомы. Во-вторых, они позволяют быстро выполнять повторяющиеся задачи.
Вот 10 лучших генераторов кода для разных языков:
Flexy Boxes
Работать с CSS Flexbox иногда может быть… сложно. Поэтому существует несколько генераторов кода для работы с этой техникой. Flexy Boxes предлагает простой в использовании способ создания сложных макетов.
Вы сможете контролировать количество flex объектов, регулировать расположение и выравнивание. Затем просто скопируйте/вставьте код в свою таблицу стилей.
.htaccess Generator
.htaccess файл располагается на вашем сервере и может выполнять множество полезных функций: переадресация, переписывание URL адресов, обеспечение безопасности – все это может быть настроено через этот важный файл. Проблема только в том, что многие из нас не слишком хорошо знают синтаксис, а написание кода с нуля может занять слишком много времени.
.htaccess Generator сделает за вас всю сложную работу, так как он способен генерировать множество функций. Только будьте аккуратны перезаписывая .htaccess файл на вашем сервере – это может сломать ваш сайт.
PHP Date Format Generator
Приходилось ли вам просматривать официальную PHP документацию каждый раз, когда вы пытаетесь отформатировать дату?
PHP Date Format Generator — это генератор PHP кода, который запомнил все тонкости и позволяет выбирать из предустановленного выбора форматов или создавать свои собственные.
CSS3 Media Queries Generator
Медиа запросы – это один из ключевых элементов адаптивного веб дизайна. CSS3 Media Queries Generator – это генератор CSS кода для быстрого создания медиа запросов. В нем даже есть функция тестирования путем изменения ширины окна браузера.
Bounce.js
Bounce.js – это JavaScript библиотека, с помощью которой можно создавать CSS3 анимации. С помощью этого онлайн инструмента вы сможете создавать любые анимации путем изменения настроек.
Вы сможете тестировать анимации прямо на той же странице и экспортировать CSS код. Вы также сможете выбирать среди нескольких крутых заготовок. Работать с анимациями сложно, поэтому этот инструмент может сохранить вам кучу времени и сил.
Возможно вам также будет интересна эта подборка из инструментов для работы с CSS анимацией.
Responsify.it
Responsify.it – генератор HTML и CSS кода, который позволяет быстро создавать адаптивные макеты. Задайте количество колонок и ширину. Когда вы будете удовлетворены своим новым макетом, то сможете загрузить архив с кодом.
CSS3 Generator
Написание CSS3 кода по различные браузеры порой бывает скучно, не говоря уже о сложностях запоминания синтаксиса.
CSS3 Generator делает всю грязную работу вместо вас, создавая градиенты, скругленные углы, тени для блоков и текста. Он также работает с CSS transform, анимациями и другими видами CSS кода.
WordPress Code Generators
WordPress Code Generators – это подборка из 20 инструментов, которые позволяют генерировать WordPress код. Вы сможете создавать виджеты для админки, шорткоды, пользовательские области для меню и сайдбары.
Подробная информация о каждом генераторе присутствует, как и ссылки на WordPress Codex. Это отличный инструмент для разработчиков тем.
jQuery Form Builder
jQuery Form Builder – генератор jQuery/Bootstrap кода, который позволяет создавать полностью функциональные формы с помощью drag-and-drop интерфейса. Вы сможете добавлять множество полезных полей, включая поле для выбора даты, загрузки файла и даже выбора способа оплаты, которое будет работать с PayPal и Stripe.
Также включена возможность добавлять автоматические email рассылки и SMS уведомления (через twilio аккаунт). В итоге вы получите jQuery/Bootstrap форму, которая готова к использованию на вашем сайте.
CSS генератор спрайтов
CSS спрайты – это группа картинок, которые соединены в одно изображение. Обычно их используют для “on/off” состояний иконок или других маленьких графических элементов. CSS позиционирование используется для перемещения спрайта и выбора определенной части картинки.
Это отличный способ уменьшить время загрузки страницы. CSS Sprites Generator позволяет загрузить несколько изображений, которые объеденятся в спрайт. В итоге вы получите для загрузки картинку и CSS код, который можно будет вставить в вашу таблицу стилей.
Спасибо генераторам кода
Благодаря веб инноваторам в сети появилось множество генераторов кода, которые упрощают монотонные дизайнерские задачи. Все они придерживаются одного правила: не тратьте время на повторение одних и тех же вещей.
Читайте также:
Перевод статьи 10 Super Useful Code Generators for Web Designers
Автор оригинального текста Eric Karkovack
Онлайн-площадки для написания html, css и js
Написание кода порой занимает немало времени. Но случается, что совсем не хочется открывать блокнот, а нужно просто проверить какую-то сумасшедшую идею, пришедшую в голову в три часа ночи или же сразу поделиться своим результатом с другими людьми. Веб-редакторы в режиме онлайн решают эту проблему и мгновенно предоставляют вам готовую среду для создания кода, где вы можете сразу же начать экспериментировать. Эти инструменты позволяют объединить CSS, HTML и JavaScript, часто даже создавать и совместно использовать примеры кодирования. Сегодня мы рассмотрим 6 фаворитов, у которых есть свои плюсы и минусы.
1.CSSDesk
Мы начали с CSSDesk потому, что он один из старейших в нашем списке. Это очень простой в понимании онлайн-инструмент для написания HTML и CSS.
Плюсы:
Несомненно, у этого инструмента большое количество плюсов. Он очень удобен в пользовании. Есть три основных раздела: HTML, CSS и предварительный просмотр, размеры которых могут быть легко оптимизированы одним щелчком. Сразу виден результат вашего кода. Всё очень просто: откройте сайт и начните создавать.
Среди плюсов также подсветка синтаксиса. А так же такая простая особенность (которую нечасто встретишь в подобного рода инструментах ) как нумерация строк здесь также присутствует.
Отличная панель функций с некоторыми настройками, которые вы просто не найдете в других местах. Вы можете не только поделиться результатом, но у вас также есть возможность скачать то, что вы только что построили. Кроме того, вы можете выбрать любой фон, включая фоны с сетками.
Минусы
Честно говоря, их очень мало. Самым большим недостатком для хардкор-кодеров является отсутствие поддержки JavaScript. Если это вас смущает, попробуйте один из других вариантов.
2. JS Bin
JS Bin является еще одним популярным местом, где можно возиться с вашим кодом. Дизайн этого приложения достаточно минимальной и действительно позволяет сосредоточиться на коде. Здесь есть 3 раздела: для просмотра html, js и пенель предварительного просмотра. Вы можете оставить только те панели, которые вам нужны.
Плюсы
Есть немало приятных функций в JS Bin. Первое, что обновления страницы не уничтожает вашу работу. Предварительный просмотр обновляется автоматически, но для тех редких случаев, когда вам нужно обновиться в ручную, приятно, что ваш основной инстинкт (Ctrl-R) не приводит к случайной гибели кода и не заставляет вас заново всё мастерить.
Как и в CSSDesk, можно сохраниться, поделиться своей работой и загрузить её. Вы можете создать свой собственный JS или подключить библиотеку вроде JQuery.
Другой интересной особенностью является возможность контролировать, какие панели вы видите, манипулируя URL. Например, “http://jsbin.com/#javascript,html,live” позволит вам видеть 3 раздела, в то время, как “http://jsbin.com/#html,live” — только два.
Минусы
Это неплохой инструмент, но ему определенно не хватает шарма других. Нет специального раздела для CSS и нужно вставлять его в HTML.
3.jsFiddle
jsFiddle является самым популярным вариантом в этом списке на данный момент. И не зря, ведь это удивительное приложение. Давайте посмотрим правде в глаза: когда вы начнете копаться в jsFiddle, вы больше никогда не взглянете на любые другие варианты.
Плюсы
Есть множество причин, почему вы должны использовать jsFiddle. Во-первых, он очень удобен в использовании. Здесь присутствуют четыре панели (HTML, CSS, JavaScript и панель просмотра) и большое количество настроек.
Вы можете настроить CSS и JavaScript панели и использовать ваши любимые инструменты. Вы найдете здесь поддержку синтаксиса Sass SCSS и CoffeeScript.
jsFiddle позволяет авторизироваться и просматривать ваши прошлые сохраненные работы. Есть возможность автоматически убирать грязный код.
Можно быстро подключить любую библиотеку Java Script (JQuery, MooTools и т.д. ).
Ещё одной приятной особенностью является то, что вы можете вставлять скрипты в веб-страницы.
Минусы
Главным минусом jsFiddle является отсутствие опции автоматического обновления для предварительного просмотра. Если вы уже протестили все другие варианты из этого списка, вам будет трудно трудно смириться с тем, что постоянно нужно обновляться вручную. Горячие клавиши, конечно, могут немного ускорить этот процесс, но всё же…
4.Dabblet
Dabblet — новичок в этом жанре. Как CSSDesk, он сосредоточен только на HTML и CSS. Тем не менее, он приносит некоторые серьезные инновации, которые вы не найдете ни в одном другом редакторе.
Плюсы
По умолчанию Dabblet делится на четыре вкладки: CSS и результат, HTML и результат, все вкладки и просто результат. Это обеспечивает гибкость и внимание, позволяя вам всегда следить за результатом.
Вы можете изменить положение блоков, как показано ниже. Расположение разделов может быть вертикальным, горизонтальным или на весь экран с наложенной областью с кодом. Обратите внимание, есть также сообщения об использовании prefix-free. Это означает, что вы не должны использовать префиксы всех браузеров.
Dabblet имеет много вариантов для сохранения, например, можно «сохранить анонимность.»
Ещё одна замечательная функция Dabblet — это потрясающий эффект при наведении в CSS. Его легче показать, чем описать. Вот несколько примеров:
Вы можете получить предварительный просмотр шрифтов, цветов, размеров, и даже изображений.
Минусы
Dabblet немного причудливый с визуальной точки зрения.
5.Tinkerbin
Tinkerbin очень похож на jsFiddle. Хотя здесь есть не все функции, которые доступны в jsFiddle, он имеет несколько собственных хороших функций.
Плюсы
Удобный интерфейс. HTML, CSS и JavaScript разделены вкладками, которые позволяют вам сосредоточиться только на одном из них.
Кроме того, Tinkerbin поддерживает еще более альтернативный синтаксис вариантов, чем jsFiddle. Вы можете выбрать HTML или HAML, CSS, SCSS (с Compass), старый синтаксис SASS или LESS, JavaScript или CoffeeScript. Разумеется, если вы работаете с препроцессорами — этот вариант лучший для вас.
Tinkerbin это единственный вариант, который позволяет увидеть весь ваш код при помощи окна «View Source».
Минусы
Хочется поиграть с настройками и сделать область предварительного просмотра шире.
Нет учетной записи, интеграции в GitHub , и т.д. Вы просто сохраняете свои эксперименты на сокращенный URL-адрес.
6.Codepen
Codepen — нашумевший проект Криса Койера. Больше узнать о нём вы можете посмотрев следующее видео:
Заключение
Надеюсь, этот обзор поможет вам заглянуть в детали каждого из этих решений. Теперь вы должны знать не только то, что делает каждый вариант, но и их достоинства и недостатки.
А какими инструментами вы пользуетесь? Какой из них ваш любимый и почему?
По материалам designshack