HTML5 и CSS3 генераторы. Генерация HTML: удобнее чем хелперы и чистый HTML Что такое генератор html css шаблонов, и для чего он нужен

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

Этот простой on-line генератор страниц сайта позволяет Вам создавать страницы Вашего сайта как в обычном текстовом редакторе. Он умеет генерировать все самые необходимые html-тэги в теле web-страницы. Этот генератор html-кода тела страниц сайта многократно ускорит создание страниц сайта.

Некоторые замечания по использованию генератора страниц сайта

Этот генератор страниц сайта является визуальным в том смысле, что он генерирует такой html-код страницы, чтобы в в том браузере, в котором Вы находитесь при работе с этим генератором, страница отображалась точно также, как Вы её видите в окне редактора. Данный редактор-генератор генерирует только коды разметки, то есть только HTML. Он не предназначен для создания скриптов на таких языках программирования, как JavaScript или PHP.

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

Данный редактор не предназначен для работы с очень большим текстом и большим количеством "тяжелых" картинок. Если Вы хотите в этом редакторе создать web-страницу с очень большим текстом и/или с картинками большого объема, то лучше создайте сначала полный шаблон web-страницы, скопируйте полученный html-код в файл web-страницы и только потом вставляйте туда длинный текст и ссылки на картинки. Помните, что данный редактор не является профессиональным редактором и предназначен, в первую очередь, для любителей и начинающих вэб-мастеров. Его основное предназначение это помочь начинающим в обучении сайтостроения.

Инструкция по использованию

Если Вы когда-нибудь пользовались редакторами текстов типа MS Word, то у Вас не будет никаких трудностей с освоением этого генератора web-страниц. Этот редактор можно использовать или для создания тела web-страницы с нуля или для исправления уже существующей web-страницы, чтобы внести в неё свои изменения.

Если Вы начинаете создавать свою страницу с нуля, то Вам надо стереть мой начальный текст в окне редактора и начать вводить туда свой текст, картинки и делать своё форматирование. Когда работа будет закончена, надо в нижней части экрана редактора нажать на кнопку "Code" и скопировать полученный код в файл Вашей web-страницы. И сохранить этот файл. Обратите внимание, что копировать полученные коды надо только в тело web-страницы, то есть только между тэгами и . Сами теги body редактором не создаются.

Если Вы хотите редактировать какую-то уже готовую web-страницу, например, созданную не Вами или которую Вы создали давно, то Вам надо в нижней части экрана редактора нажать на кнопку "Code", удалить из окна редактора все мои начальные коды и скопировать туда коды из файла web-страницы. Обратите внимание, что копировать коды нужно только из тела существующей web-страницы, то есть только то, что находится между тэгами и . Сами теги body копировать в редактор не надо. Затем вам надо опять переключиться в режим визуального редактирования. Для этого надо нажать на кнопку "Design" в нижней части окна редактора и начать вносить изменения во внешний вид страницы.

Понятно, что редактировать тело web-страницы можно в этом редакторе двояко. Или в режиме "Design" редактировать визуально или в режиме "Code" редактировать сразу в кодах. Поэтому для начинающих web-мастеров это редактор очень полезен для обучения. Вы можете внести какие-то небольшие изменения в web-страницу в визуальном режиме и тут же посмотреть, как изменился при этом код, переключившись в режим редактирования кода. Или, наоборот, Вы можете внести какие-нибудь небольшие изменения в код web-страницы в режиме редактирования кода и тут же посмотреть, как измениться Ваша web-страница, переключившись в режим визуального редактирования (или в режим просмотра с помощью кнопки "Preview").

Обычное редактирование текста

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

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

Также, как и в любом текстовом редакторе, есть режимы, применяемые только для абзаца в целом и режимы, которые можно применить к части абзаца.

Краткое описание всех кнопочек верхней части меню в порядке их расположения:

• Paragraph. Выбирает уровень заголовка. Применяется для абзаца в целом.
• Шрифты.
• Размер шрифта.
• Цвет шрифта.
• Жирный шрифт.
• Наклонный шрифт.
• Подчеркнутый шрифт.
• Зачеркнутый шрифт.
• Выравнивание влево. Применяется для абзаца в целом.
• Центрирование. Применяется для абзаца в целом.
• Выравнивание вправо. Применяется для абзаца в целом.
• Двустороннее выравнивание. Применяется для абзаца в целом.
• Горизонтальная линия. Это и не абзацная вещь и не для части абзаца. Это просто вставка горизонтальной линии на всю ширину.
• Верхний индекс.
• Нижний индекс.

Основное html-редактирование

В средней строке меню находятся как кнопки для типичного редактирования web-страницы, так и сервисные кнопки обычных редакторов.

Описание всех кнопочек верхней части меню в порядке их расположения:

• Создание гиперссылки. Обязательно нужно выделить мышкой тот текст или картинку, при нажатие на которых Вы хотите, чтобы произошел переход на другую web-страницу. После выделения жмете на кнопку меню и открываете окошко, в котором Вы должны задать адрес, куда будет идти переход (URL) и условия перехода (target). Вы можете задать следующие условия:
  • Пусто. По умолчанию новая страница откроется в том же самом окне.
  • _blank. Новая страница будет выводиться в новом окне браузера (или в новой вкладке браузера, в зависимости от конкретных настроек браузера).
  • _parent. Новая страница будет выводиться в родительском окне (или вкладке) браузера. Если родительского окна (или вклпдки) нет, то это аналог условия _self.
  • _self. Новая страница будет выводиться в то же самое окно, в котором находится ссылка. Это аналог режима "Пусто".
  • _top. Если страница сайта с фреймами (то есть разбита на несколько окон), то новая страница будет выводиться во всё окно браузера. В обычном случае это тоже аналог режима _self.
  Обратите внимание, что задавать адрес новой страницы, куда ведет гиперссылка, надо в полном виде, типа "http://site.ru" или "http://site.ru/page.html". Иначе при попытке повторного редактирования этой гиперссылки, этот редактор не найдет адреса сайта и по умолчанию подставит адрес моего сайта "http://сайт" прямо перед именем Вашей страницы.
• Отмена гиперссылки. Выделяете текст гиперссылки ПОЛНОСТЬЮ. Если выделите только часть текста гиперссылки, то невыделенная часть останется гиперссылкой. Например, если выделили только центральную часть текста гиперссылки, то образуется две гиперссылки с одинаковым адресом на невыделенных текстах.
• Вставка картинки. Ставите курсор в то место, где должна быть картинка и жмёте на кнопку. В открывшимся окошке задаете путь к картинке (Image URL), описание картинки (Image Description), выравнивание картинки на странице (Alignment), ширину границы (Border) и отступы картинки от текста (или других элементов на странице по горизонтали и по вертикали (HSpace, VSpace). Выравнивание картинки Вы можете задать следующим:
  • Пусто. По умолчанию это выравнивание по левому краю.
  • BaseLine. Текст (и другие элементы страницы) находящийся с картинкой в одном абзаце будет располагаться так, как решили создатели Вашего браузера.
  • Top. Текст (и другие элементы страницы) находящийся с картинкой в одном абзаце будет выровнен по верхней части картинки.
  • Middle. Текст (и другие элементы страницы) находящийся с картинкой в одном абзаце будет выровнен по центру картинки.
  • Dottom. Текст (и другие элементы страницы) находящийся с картинкой в одном абзаце будет выровнен по нижней части картинки.
  • TextTop. Текст (и другие элементы страницы) находящийся с картинкой в одном абзаце будет размещен над картинкой. (Поддерживается не всеми браузерами.)
  • Absolute Middle. (Поддерживается не всеми браузерами.)
  • Absolute Bottom. (Поддерживается не всеми браузерами.)
  • Left. Картинка будет размещена слева от текста (и других элементов страницы) находящегося с картинкой в одном абзаце.
  • Right. Картинка будет размещена справа от текста (и других элементов страницы) находящегося с картинкой в одном абзаце.
  Вставленную картинку далее уже невозможно будет редактировать в визуальном редакторе. Поэтому для дальнейшего редактирования картинки переключитесь в режим редактирования кода. Для удаления картинки надо кликнуть по ней мышкой и нажать кнопку Delete (Del) на клавиатуре.
• Отмена Форматирования. Отменяет форматирование, которое было сделано при помощи кнопок верхней строки меню, которые относятся к форматированию части абзаца. Работает точно также, как и кнопки верхнего меню, когда надо отменить форматирование, то есть выделяем нужный кусок текста и нажимаем на эту кнопку. Удобство этой кнопки состоит в том, что она одним нажатием сразу убирает всё форматирование, всех видов, которые были в выделенном фрагменте.
• Создание и редактирование таблицы. Кнопка применяется, чтобы создать таблицу в месте расположения курсора или отредактировать выделенную таблицу. При создании таблицы надо задать следующие параметры:
  • Rows - число строк.
  • Columns - число столбцов.
  • Width - ширина таблицы. Задается или в процентах от ширины экрана или в пикселях.
  • Border - ширина границ ячеек. Если оставить значение 0, то границы ячеек не будут видны.
  • CellSpacing - расстояние в пикселях между ячейками таблицы.
  • CellPadding - расстояние в пикселях от границы ячейки до текста внутри ячейки.
  • Alignment - выравнивание таблицы на страницы:
    • Default. По умолчанию, как задали разработчики Вашего браузера.
    • Left. Таблица прижата к левому краю страницы.
    • Center. Таблица расположена в центре web-страницы.
    • Right. Таблица прижата к правому краю страницы.
  Для удаления таблицы надо выделить её границу, кликнув мышкой по границе, и надать на клавиатуре кнопку Delete (Del). Для редактирования таблицы надо поставить курсор в любое место таблицы (или выделить часть таблицы или всю таблицу) и снова нажать на кнопку меню. При этом для редактирования Вам доступны все параметры, кроме числа строк и числа столбцов. Следующие 6 кнопок средней строки меню предназначены для редактирования числа строк и столбцов в уже созданной таблице. Когда курсор стоит на таблице, то эти шесть кнопок доступны для нажатия.
• Создать один столбец слева от курсора. Если выделено несколько столбцов, то считается, что курсор стоит на последнем столбце, который был выделен.
• Создать один столбец справа от курсора. Если выделено несколько столбцов, то считается, что курсор стоит на последнем столбце, который был выделен.
• Создать одну строку выше от курсора. Если выделено несколько строк, то считается, что курсор стоит на последней строке, которая была выделена.
• Создать одну строку ниже от курсора. Если выделено несколько строк, то считается, что курсор стоит на последней строке, которая была выделена.
• Удалить один столбец от курсора. Если выделено несколько столбцов, то считается, что курсор стоит на последнем столбце, который был выделен.
• Удалить одну строку от курсора. Если выделено несколько строк, то считается, что курсор стоит на последней строке, которая была выделена.
• Создать нумерованный список. Либо выделяете какие-нибудь абзацы и нажимаете на кнопку меню. При этом все эти абзацы становятся элементами нумерованного списка. Либо ставите в нужное место курсор, нажимаете на эту кнопку меню и далее все абзацы, которые Вы вводите, автоматически становятся элементами нумерованного списка.
• Создать простой список. Выделяете какие-нибудь абзацы и нажимаете на кнопку меню. При этом все эти абзацы становятся элементами простого списка без нумерации.
• Удаление отступа. Курсор должен стоять на том абзаце, отступы которого хотим удалить. Можно выделить весь абзац или только его часть.
• Создание отступа. Курсор должен стоять на том абзаце, у которого хотим создать отступ слева. Можно выделить весь абзац или только его часть. Отступ создается для всего абзаца в целом (а не только для первой строки).
• Откат всех изменений назад. Пока Вы не нажали на кнопку "Code" или "Preview", Вы можете удалить все сделанные изменения и вернуться к тому состоянию, которое было последний раз при просмотре кода или просмотра страницы.
• Восстановление всех убранных изменений вперед. Если Вы сделали обратный откат изменений больше, чем нужно, то можете восстановить убранные изменения. Точно также, если после отката изменений Вы переходили в режим "code" или "Preview", то восстановить изменения уже не сможете.
• Уничтожить выделенное с одновременным копированием выделенного в "карман" Windows. (Ctrl+X)
• Копировать выделенное в "карман" Windows. (Ctrl+C)
• Вставить содержимое "кармана" Windows в то место, где стоит курсор. (Ctrl+V)

Дополнительное html-редактирование

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

Список кнопок третьей строки меню в порядке их расположения:

• Создать форму. Надо в открытом окошке ввести имя формы, адрес скрипта, который будет обрабатывать данные этой формы и метод передачи данных (post или get).
• Создать Check Box. В открытом окошке вводите название этой формы выбора, значение, принимаемое при выборе и указываете, стоит или нет галочка выбора изначально в этой форме.
• Создать Radio-кнопку. В открытом окошке вводите название этой формы выбора, значение, принимаемое при выборе и указываете, выбрана эта кнопка изначально или нет. При создании меню из radio-кнопок, не забывайте, что все radio-кнопки одного и того же меню должны иметь одно и тоже название.
• Создать площадку для ввода текста. В открытом окошке вводите название площадки для ввода текста, ширину площадки числом символов, число строк площадки, расположение абзацев и полос прокрутки и начальный текст в этом поле.
• Создать кнопку "Выполнить". В открывшемся окошке пишем имя кнопки и тот, текст, который будет написан на этой кнопке.
• Создать кнопку "Выполнить" в виде картинки. В открывшемся окошке пишем имя кнопки и адрес той картинки, которая будет играть роль кнопки.
• Создать кнопку очистки заполненной формы и возврата всех значений по умолчанию. В открывшемся окошке пишем имя кнопки и тот, текст, который будет написан на этой кнопке.
• Создать скрытое поле. В открывшемся окошке пишем имя скрытого поля и его значение.
• Создать поле для ввода пароля звездочками. В открывшемся окошке пишем имя поля пароля, длину поля и максимальное число символов пароля, которое сможет ввести пользователь при вводе своего пароля.
• Создать текстовое поле. В открывшемся окошке пишем имя текстового поля, его размер в символах, сколько максимум символов может ввести пользователь и начальный текст в этом поле.
• Отправить на печать.
• Выделить всё.

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

Подборка HTML-генераторов

Image-Maps — сервис для создания карт-изображений.

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

FREE Banner Maker — сервис для HTML5-баннеров.

HTML minifier — сервис для минимизации HTML-кода.

Mobile HTML5 таблица совместимости HTML5 API на мобильных и планшетных браузерах с тестированием на реальных устройствах.

— генератор HTML5-шаблонов, которые помогут начать работу над вашим новым проектом. Он построен на базе HTML5 Boilerplate, мощнейшем HTML5-шаблоне, созданном Paul Irish и Divya Manian. С его помощью вы элементарно создадите HTML5-проект с необходимыми настройками по вашему выбору. По сути, это облегченная версия Boilerplate. Выбираемыми параметрами являются: структура, серверные опции (.htaccess, nginx.conf, web.config), подключение jquery, аналитики google, выбор между css и less и тд. Как только вы настроите конфигурацию шаблона, нажмите Download и вы получите набор файлов, согласно сделанному выбору.

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

Сервис Can I use… тестирует поддержку основных возможностей HTML5 для всех версий всех браузеров. Он позволяет выделить именно те возможности, которые требуются вам. Для работы с сервисом нужно выбрать вкладку Tables , затем вкладку Compatibility tables , после чего выбрать требуемую возможность (возможности), установив флажок. Также можно производить поиск через поле Search .

Писать чистый 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 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 и интерпретации синтаксиса.