a! А Вы пользуетесь генераторами CSS3 или HTML5 ? Если нет, то может стоит попробовать 🙂 Просто представьте, можно отказаться от ручного описания стилей для кнопок, углов в блоках, теней, градиентов если кто использует и так далее, так же HTML5. Зачем писать один и тот же код каждый раз при создании нового проекта, когда можно «забить» параметры в окошечки нажать кнопочку и получить готовый исходный код, а если надо то и пофиксить его!
В этой статье покажу Вам подборку из таких генераторов. Преимущественно это будут генераторы CSS3 и парочка для HTML5. Чтобы перейти на сайт сервиса — Жмем на название сервиса!

CSS3 генераторы:

CSS3.me

Один из самых лучших генераторов. Автором является Eric Hoffman . Есть возможность изменить и установить закругление, тень, градиент и прозрачность — самые часто используемые эффекты.

CSS3 Maker

Есть практически все и еще чуть-чуть. Вы можете настроить @font face, анимацию, тень блоков, тень текста, вращение текста, трансформацию, градиенты, закругление и многое другое.

CSS3 Generator

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

Webestools Shadow Generator

Генератор теней. Настраиваются только тени: цвет, смещение, размытие, внутренняя или внешняя тень и тд.

Генераторы кнопок

CSS3 Button Generator

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

CSS3-Tricks Button Maker

Этот генератор кнопочек немного попроще. Весь процесс создания кнопки построен на перетаскивании ползунков. Здесь ставка делается на фон, то есть игра с цветами кнопки.

CSS3 Button.net

Вот еще не плохой генератор кнопок. Можно настраивать фон кнопки, границу, тень внешнюю, внутреннюю тень, размер, цвет текста и тень текста. При внесении изменений в блоке справа сразу изменяется код.

Border Image и Radius генератор

Border-Radius

Достаточно скромный функционал: можно настроить только закругление углов, но зато каждого угла в отдельности.

Border-image

Немного сложный в освоении, но если необходимо сделать в качестве границы (border) изображении, то этот инструмент в самый раз! Выбираете свое изображение, ползунками выбираете размеры границы, можно даже для каждой границы увеличить фон… также способ повтора изображения. А код генерируется снизу.

CSS3 генератор градиента

Colorzilla Gradient Editor

Вот очень классный генератор градиента. Есть большое количество готовых наборов цветов, но также можно и самому выбирать. Устанавливается тип градиента: горизонтальный, вертикальный и тд. Даже поддержка для IE есть.

HTML5 генераторы

HTML5 ★ BOILERPLATE

С помощью этого генераторы Вы получаете заготовку шаблона , полностью оптимизированную для разных браузеров. Мне очень понравился этот генератор, теперь буду пользоваться им. Что бы ознакомиться со всеми «фишками» посетите этот проект, тем более там все на русском.

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

Initializr является генератором HTML5 шаблонов, которые помогут вам начать работу с новым проектом. Initializr создает для вас чистый настраиваемый шаблон. Выбираемыми параметрами являются: первичный каркас, серверные опции (.htaccess, nginx.conf, web.config), подключение jquery, аналитики google, выбор между и тд.

Это простой генератор. Нам предлагают выбрать какие элементы будут присутствовать на странице, и еще указать пару опций.

На этом все, если вы знаете хорошие генераторы HTML5 или CSS3, не стесняйтесь пишите о них в комментариях 🙂

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на

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

CSS Click Chart

CSS CheatSheet

Spritebox

Pixel Map Generator

Clean CSS

CSS Animate

Ну что, парни, анимация? Применяйте и играйте с переходами в CSS.

UI Gradients

WAIT! Animate

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

CSS3 Generator

CSS Type Set

Хотели посмотреть, как выглядят различные шрифты? Зайдите на CSS Type Set . Всё, что нужно, - ввести текст и выбрать параметры шрифта.

Enjoy CSS

Flexy Boxes

Если вы никак не можете разобраться с flexbox, то вам стоит попробовать Flexy Boxes . В этом приложении можно сравнить различные версии flexbox и интерпретации синтаксиса.

Писать чистый HTML часто неудобно, особенно если нужно делать динамические вставки.

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

В некоторых фреймворках есть хелперы, в частности написать эту статью меня вынудила Aura.Html . С хелперами иная история - они изначально задуманы для реального упрощения, поскольку одной командой могут генерировать хороший кусок HTML кода, но они в большинстве заточены под определённое использование, и что-то дальше этого выглядит слишком криво.

Как более универсальное решение было бы не плохо не изобретать причудливый синтаксис, а использовать самый обычный PHP и всем знакомые примитивные CSS-селекторы.

Как оно работает?

H::div("Content")
что на выходе даст

H::div("Content", [ "class" => "some-content" ])

H::{"div.some-content"}("Content")
На выходе будет то же самое. С первого взгляда может показаться немного странным, но на практике весьма удобно.

В сравнении с Aura.Html

$helper->input(array("type" => "search", "name" => "foo", "value" => "bar", "attribs" => array()));
Наш вариант:

H::{"input"}()
Любой из параметров можно было вынести в массив.
На выходе:

И ещё вариант посерьезней.

Aura.Html (пример из документации):

$helper->input(array("type" => "select", "name" => "foo", "value" => "bar", "attribs" => array("placeholder" => "Please pick one",), "options" => array("baz" => "Baz Label", "dib" => "Dib Label", "bar" => "Bar Label", "zim" => "Zim Label",),))
Наш вариант:

H::{"select"}([ "in" => [ "Please pick one", "Baz Label", "Dib Label", "Bar Label", "Zim Label" ], "value" => [ "", "baz", "dib", "bar", "zim" ], "selected" => "bar", "disabled" => "" ])
Тут in используется явно, его можно использовать для передачи внутренностей тэга, как Content в примере с div выше. Используются как общие правила, так и некоторые специальные, немного подробнее о которых дальше.
На выходе то же самое:

Please pick one Baz Label Dib Label Bar Label Zim Label

Специальная обработка

H::{"input"}()

Работает похоже с select , в value значение, а checked проставится когда совпадет одноименный элемент передаваемого массива.

Ещё один пример использования in и специальной обработкой input :

H::{"input"}([ "checked" => 1, "value" => , "in" => ["Off", "On"] ])
Off On
Никаких оберток label не добавляется специально, чтобы сделать код максимально общим и предсказуемым.

Если нужно обработать массив

H::{"tr td"}([ "First cell", "Second cell", "Third cell" ])
Либо даже опустить лишние скобки в самом простом случае

H::{"tr td"}("First cell", "Second cell", "Third cell")
На выходе:

Каждый элемент массива будет обработан отдельно, то есть вполне законно передавать не только строки, но и некоторые атрибуты, правда, иногда это выглядит слишком монструозно:

H::{"tr.row td.cs-left"}("First cell", [ "Second cell", [ "class" => "middle-cell", "style" => "color:red;", "colspan" => 1 ] ], [ "Third cell", [ "colspan" => false ] ])
Если в вызове тоже были указаны атрибуты - class и style будут расширены, остальные перезаписаны, атрибуты с логическим значением false будут удалены.

С помощью волшебной палочки, которая не является привычной частью CSS-селектора (это единственное исключение, без которого можно обойтись), можно управлять тем, как будут обрабатываться уровни вложенности:

H::{"tr| td"}([ [ "First row, first column", "First row, second column" ], [ "Second row, first column", "Second row, second column" ] ])
Если массив получен из базы данных, или иного хранилища - удобно использовать такой массив напрямую, и это можно сделать передав в специальный атрибут insert :

$array = [ [ "text" => "Text1", "id" => 10 ], [ "text" => "Text2", "id" => 20 ] ]; h::a("$i", [ "href" => "Page/$i", "insert" => $array ])
Text1 Text2
Можно и в одну строчку все атрибуты написать:

$array = [ [ "id" => "first_checkbox", "value" => 1 ], [ "id" => "second_checkbox", "value" => 0 ], [ "id" => "third_checkbox", "value" => 1 ] ]; h::{"input]]"}([ "insert" => $array ])

А ещё всё это можно расширять

H::radio([ "checked" => 1, "value" => , "in" => ["Off", "On"] ])
On Off
Так же можно переопределить метод pre_processing , и реализовать произвольную обработку атрибутов непосредственно перед рендерингом тэга, например, при наличии атрибута data-title я навешиваю класс, и таким образом получаю всплывающую подсказку над элементом при наведении.

Преимущество использования

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

Генераторы, онлайн-сервисы CSS

обновлено 05.04.2017

— сервис для генерации браузерных префиксов и не только.

— огромная коллекция цветовых палет, в том числе для создания материального и плоского дизайна.

— генератор цветовых схем.

Автопрефиксер онлайн — добавляет нужные вендорные префиксы и удаляет ненужные в вашем CSS.

— сервис для подбора цветовых схем для сайта, альтернативных теней, определение цветов по картинке.

cssFilters — пользовательские фильтры и фильтры как в Инстаграмм для изображений.

Type Scale — визуальный калькулятор для расчёта размера заголовков.

TRANSPARENT TEXTURES — коллекция прозрачных бесшовных текстур для вашего сайта.

Image Slider Maker — онлайн-сервис для создания адаптивного слайдера с картинками.

— 3D-редактор для создания объёмных моделей на чистом CSS.

Web Code Tools — генератор кода для создания эффектов CSS, HTML-кода для различных элементов, карточек для Твиттера и других полезных вещей.

HOW TO CENTER IN CSS — генератор стилей для центрирования (выравнивания) блока или текста с помощью различных приёмов. Также имеется поддержка различных версий Internet Explorer.

img2css — инструмент, который преобразует изображения в CSS-код, он выдаёт вам один div с кодом, который вы можете использовать в своих проектах.

CSS Apple Device Generator — генератор разметки и стилей для устройств Apple. В поле Device Type можно выбрать тип устройства, с помощью Device Width — задать ширину, а также выбрать цвет экрана в поле Device Inner color.

Web Colour Data — онлайн-сервис, позволяющий получить цветовую палитру любой веб-страницы.

The Simpsons in CSS — коллекция любимых персонажей на чистом CSS.

Mobile phone emulator протестирует, как выглядит сайт на экранах мобильных устройств. Cell phone terminal — поле для выбора типа устройства, размера окна и ориентации, Website to terminal — поле для ввода url-адреса.

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

Flexplorer — площадка для демонстрации возможностей модели Flexbox. Вы сможете задать свои параметры для блоков и увидеть пример в действии.

Screenfly — данный сервис поможет протестировать, как будет выглядеть ваш сайт на экранах устройств различного разрешения. Чтобы воспользоваться сервисом, нужно ввести url-адрес в строку поиска, для выбора вида девайса воспользуйтесь верхним меню.

Long shadows — сервис, позволяющий создавать так называемые «длинные тени» для блоков и для текста.

— веб-приложение, проверяющее код CSS на ошибки. Результаты проверки выводятся в виде таблицы с указанием строчек ошибок, и пояснением. При проверке можно использовать разные параметры, определяя ее глубину.

Responsive Grid System — CSS-фреймворк для создания гибкого макета на основе сетки (grid). Раздел Let’s Go to Work позволяет выбрать и скачать нужную разметку страницы, используя от 2-х до 12-ти колонок, а калькулятор в разделе Or Make Your Own поможет задать собственную разметку.

CSS TEXT TO PATH GENERATOR сгенерирует html-код для текста, расположенного по кривой.

3D Ribbon Generator поможет создать красивые 3D ленточки. Вам нужно выбрать вариант дизайна, а также задать цвет и размер элементов.

Paletton — онлайн-сервис для подбора цветовой схемы для вашего сайта. Вкладка COLOR TABLES откроет палитру, а также различные комбинации цветов, а круглые переключатели под названием сервиса позволят выбрать количество сочетаемых цветов.

CSS3 generator — онлайн-сервис, который позволяет без труда сгенерировать код CSS3 для определенных свойств, таких как:
border-radius, box-shadow, text-shadow, RGBA, @font-face, multiple columns, box resize, box sizing, outline, transition, transform, gradient . Вам всего лишь нужно выбрать свойство, которое вы хотите использовать в стилях вашего браузера, задать для него требуемые параметры, а затем скопировать полученный код в свой проект.

CSS 3.0 Maker — сервис, аналогичный CSS3 generator, присутствует еще одна интересная возможность — Text Rotation.

— незаменимый сервис для создания панелей навигации на основе списков как на чистом CSS, так и с использованием jQuery. Помимо основной разметки предлагает готовые варианты стилей для вертикальных и горизонтальных панелей навигации.

Содержит большую коллекцию CSS-свойств, на сайте вы сможете найти всевозможные ресурсы и инструменты, которые позволят сделать ваш css-код идеальным.

Border Image - онлайн-генератор CSS3 свойства border-image, позволяющий оживить границы блока с помощью картинок.

— генератор HTML+CSS шаблонов. Благодаря этому ресурсу вы сможете без особого труда создать разметку страницы на основе блочной верстки. Большой плюс ресурса — вы сможете сделать макет как фиксированной, так и «резиновой» ширины, при этом не ломая голову над тем, как прижать «футер» к низу окна браузера. Всем начинающим верстальщикам рекомендуем!

CSS3 Please! — очень удобный сервис для создания кроссбраузерного кода для таких CSS стилей, как border-radius, box-shadow, linear-gradient, transition и многих других. Задавая значения стилей в редакторе, вы сможете сразу же увидеть получившийся результат на примере блока, расположенного в окне справа.

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

Генератор CSS спрайтов избавит вас от лишней работы при создании спрайтов для ваших веб-страниц.

Предлагает вашему вниманию пример виртуозного использования возможностей CSS3. У вас появится возможность создать сложные бесшовные фоны для своего сайта. 37 образцов выполнены в различных стилях, и мы уверены, что вы найдёте образец себе по душе!

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

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

CSS Click Chart

CSS CheatSheet

Spritebox

Pixel Map Generator

Clean CSS

CSS Animate

Ну что, парни, анимация? Применяйте и играйте с переходами в CSS.

UI Gradients

WAIT! Animate

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

CSS3 Generator

CSS Type Set

Хотели посмотреть, как выглядят различные шрифты? Зайдите на CSS Type Set . Всё, что нужно, - ввести текст и выбрать параметры шрифта.

Enjoy CSS

Flexy Boxes

Если вы никак не можете разобраться с flexbox, то вам стоит попробовать Flexy Boxes . В этом приложении можно сравнить различные версии flexbox и интерпретации синтаксиса.