PHP

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

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

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

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

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

Идея была в том, чтобы сделать как можно проще:

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

Это самый простой пример. Название метода - тэг, внутри передается значение. Если нужно добавить атрибутов - не проблема:

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

И можно было бы подумать, что проще уже никак, но тут на помощь приходят CSS-селекторы, и немного уличной магии:

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

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

В начале я упоминал Aura.Html, стоит сравнить как генерируется 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 ])

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

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

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

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

Генерируется HTML без шанса оставить тэг незакрытым, или что-то в этом роде.
Везде используются общие правила обработки, которые логичны, весьма быстро запоминаются, и являются намного чаще удобными, чем наоборот.
Можно использовать с абсолютно любыми тэгами, даже с веб-компонентами (пример писать не буду, и так много примеров).
Нет никаких зависимостей, есть возможность унаследовать и переопределить/расширить по желанию всё что угодно, так как это всего лишь один статический класс, и больше ничего.
На выходе обычная строка, которую можно легко использовать вместе с абсолютно любым кодом, использовать на входе следующего вызова класса.

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

В CSS нет простого способа приостановить анимацию прежде чем цикл начнется снова. Есть возможность задержки воспроизведения, но это всего лишь задержка в самом начале анимации, то есть при загрузке. Инструмент WAIT! Animate позволяет быстро рассчитать время задержки и установить ее между циклами. Эффект получается интересный: циклическая анимация длится положенное ей время, а затем наступает пауза, длину которой устанавливает сам разработчик. После того, как пауза заканчивается, вновь происходит запуск анимации. Очень полезный инструмент, с его помощью можно использовать множество анимационных эффектов с задержкой воспроизведения. Достаточно лишь выбрать нужную анимацию, установить длину паузы и генератор автоматически создаст CSS-код.

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

Создавать градиенты в CSS достаточно трудно, особенно начинающим веб-разработчикам. Но, к счастью, появился очень простой инструмент ColorZilla Gradients, который является обычным визуальным редактором, в котором можно в считанные секунды создать нужный градиент и сгенерировать CSS-код. Инструмент совершенно бесплатный и работает примерно так же, как и соответствующий инструмент в Photoshop. Ничего сложного, нужно лишь выбрать подходящий оттенок и создать градиент, перемещая ползунки. Можно создавать горизонтальные, вертикальные, диагональные и радиальные градиенты. Однако есть и минусы: в старых версиях наиболее популярных браузеров сгенерированный код работать не будет.

Иногда бывает нужно посмотреть, как будет смотреться тот или иной шрифт, если применить к нему какое-либо правило. Сделать это можно с помощью инструмента CSS Type Set. Генератор работает следующим образом: нужно предварительно ввести нужный текст или слова и обновить настройки, например, изменить размер шрифта, цвет текста, расстояние между буквами, начертание и много другое. Все изменения происходят в режиме реального времени: разработчик сразу же видит, как текст будет выглядеть на веб-странице. Единственный недостаток этого очень полезного генератора – небольшой выбор шрифтов. Было бы очень хорошо, если бы создатели инструмента добавили бы шрифты из коллекции Google Fonts. Но пока выбор ограничен наиболее востребованными шрифтами: Arial, Verdana, Tahoma, Times New Roman и т.д.

Инструмент Enjoy CSS – это мечта любого веб-разработчика. Это одновременно визуальный редактор и генератор кода, а это значит, что с его помощью можно создавать различные элементы дизайна, такие как кнопки, поля ввода, блоки и сразу получать сгенерированный CSS-код. Enjoy CSS позволяет создать практически все, что может понадобиться разработчику в его повседневной работе, в том числе переходы и преобразования. Можно даже проверить, как будут смотреться шрифты Adobe, если применить к ним различные текстовые эффекты. Но самый главный плюс этого генератора заключается в наличии CSS-галереи, которая содержит бесплатные фрагменты кода и готовые шаблоны для наиболее востребованных элементов дизайна.

Flexbox это попытка решить проблему, которая возникает при построении лейаутов в CSS. Ведь верстальщику приходится решать огромное количество проблем при создании сайта. Flexbox позволяет контролировать выравнивание, порядок и размер всех элементов по нескольким осям, попутно решая другие задачи. При этом все блоки становятся «резиновыми», элементы могут растягиваться и сжиматься по заданным правилам. Flexbox сравнительно новая спецификация и пока в интернете не так много сайтов, созданных с ее помощью. Но определенно будущее за Flexbox – он действительно упрощает работу. Генератор Flexy Boxes позволяет быстро получить нужный CSS-код, указав параметры элемента в специальном меню.

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

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

С помощью генератора Patternify можно создавать CSS-код фоновых изображений. Этот инструмент совершенно бесплатный и позволяет создавать довольно интересные структуры. Конечно, возможности сервиса ограничены, так как он создает пиксельную структуру, так что шум придется добавлять в других генераторах. Тем не менее, инструмент очень полезный, так как Patternfly автоматически создает URL изображения с генерирует base64-код, который можно вставить в файл CSS.

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

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 .

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

Генераторы CSS3

Хотите определить стили? В этом вам помогут генераторы CSS3. Мне удалось найти достаточно большое их количество, поэтому я сгруппировал однотипные сервисы (а иногда и плагины) в подгруппы:

Универсальные CSS3-генераторы

К данному сервису приложил руку известный дизайнер Эрик Хоффман (Eric Hoffman). Функционал данного генератора вряд-ли способен впечатлить (вы можете определять только border-radius, box-shadow, background gradient и opacity), зато все сделано очень удобно - значения регулируются на глаз ползунками, имеется превью в режиме реального времени и так далее.

Еще одна приятная фича - после того как вы нажмете кнопку «Get the Code», в появившемся окне вы можете галочками отметить (или наоборот, убрать лишнее) дополнительные «опции» (не знаю как то еще назвать) кода, например, совместимость со старыми браузерами или комментарии.

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 Maker, но, на мой вкус, чуть менее удобный (хоть и обладающий более простым интерфейсом). В первую очередь за счет того, что здесь отсутствуют удобные ползунки и вам необходимо прописывать точные значения параметров. Хотя, для кого-то это, естественно, недостатком не является.

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

С помощью CSS3-Tricks Button Maker создать красивую кнопку (кнопки) может даже абсолютный «чайник». Единственная (но очень серьезная) претензия к сервису - функционал мог бы быть побогаче, все таки речь о CSS3. Данный генератор все возможностей стандарта, конечно, не реализует.

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

Весьма неплохой удобный генератор кнопок. Обладает очень простым интерфейсом, а потому пользоваться им одно удовольствие. Мне кажется, CSS3 Button Generator - отличный выбор для новичков!

Border-генераторы

Хотите задать интересный стиль границ на основе какого-то изображения? Вам по адресу, Border-Image это умеет!

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

Генератор градиентов

Color Zilla Gradient Editor - удобный и практичный генератор градиентов. В отличие от всех описанных выше инструментов является расширением для браузера, а не сервисом, что впрочем, пожалуй, даже хорошо. В арсенале «Колорзилла» есть пипетка (Color Picker), которой гораздо удобнее орудовать когда ее не нужно вызывать из интерфейса какого-нибудь сервиса.

Drop Shadow генератор

Очень простой генератор, задающий значение свойства box-shadow. Вы можете регулировать размер тени, ее цвет, прозрачность, уровень размытия (Blur), источник света (смещение) и прочее.

Прочие генераторы

Это в большей мере даже не генератор, а обучающий продукт. Вам дан шаблон, вы можете отключать/включать те или иные правила, менять значение и смотреть что получится. Отличное практическое пособие для тех кто познает новый стандарт CSS3 или просто знакомится с основами HTML и CSS верстки.

HTML5

HTML5-генераторы, это по-сути не что иное, как генератор семантического шаблона. В данный обзор я умышленно не включив всем известный HTML5 Boilerplate , поскольку он и без того широко известен и любим вебмастерами всего мира. Давайте менее распространенных представителей:

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

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

P.S. Карточные игры всегда были популярны в разных ситуациях, но игра покер заняла свою особенную нишу как спорт и даже способ заработка денег в сети.
Сделайте замечательный подарок своей девушке — элитная парфюмерия http://makeup.com.ua/ в нашем интернет магазине представлена всеми популярными брендами.

Генератор 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 и интерпретации синтаксиса.