Рубрика «html» - 83

Хотите создать собственную кросс-платформенную игру на HTML5? Перед вами – первая часть руководства, которое посвящено разработке в среде Intel XDK. Здесь мы будем делать игру про голодную змейку, вариант всем известной Snake.

image

Для того, чтобы претворить планы в жизнь, воспользуемся игровым движком Cocos2d-JS. Предполагается, что вы, приступая к чтению, знаете, что такое HTML5 и JavaScript. Предварительного знакомства с Cocos2d-JS и XDK не требуется. Предлагаем начать с рабочей среды – с Intel XDK.
Читать полностью »

image

К сожалению, не у всех есть браузер/устройство, поддерживающие flexbox. Это руководство в виде шпаргалки, в котором предлагаются альтернативы обратной совместимости для свойств flexbox.

Хотя некоторый CSS-код в этом руководстве, возможно, покажется очевидным, я собираюсь бросить вызов flexbox, а также предложить простые решения проблем, которые возникали, пока он не обрёл популярность.

Читать полностью »

Box Model

В этой статье я хотел бы рассказать, как правильно расставлять поля (padding) и отступы (margin) в CSS.

Читать полностью »

image
Рисунок используемый для parallax эффекта. Автор Patryk Zabielski
Привет друзья, я покажу вам как создать простою многослойную иллюстрацию с глубиной, которая переходит к контенту. Мы будем использовать метод, в котором необходим только css и чистый JS(coffeescript) (Никаких jQuery!).
Этот урок для начинающих, с начальным знанием JS и CSS, так что я буду объяснять большинство вещей и ссылаться на внешние источники.
Финальное демо
Читать полностью »

image

AMP — наверняка, вы уже слышали об этой технологии, продвигаемой Google. Казалось бы, еще одна модная технология для хипстеров, о которой скоро все забудут. Однако, в реальности эта фича уже работает в продакшне значительного числа новостных сайтов, среди которых такие гиганты, как the Guardian, Times, Washington Post, и прочая, прочая, прочая. Краткий рассказ о плюшках AMP уже был на страницах “Хабра”, а я хотел бы чуть более подробно сфокусироваться на том, как внедрять это в проект, и какой профит в действительности можно получить.
Читать полностью »

Советы, библиотеки и дополнительные материалы по CSS-анимации

Введение

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

На компьютере был открыт текстовой файл со списком статей и библиотек про веб-разработку. Он постоянно пополнялся новыми данными.

Свернув его, я пошел на улицу в поисках кинотеатра с Deadpool'ом запустил браузер и стал блуждать по окрестностям интернета. Во время прогулки я наткнулся на интересную js-библиотеку по созданию css-анимации, которую добавил в открытый до этого текстовой документ… Как оказалось, по этой теме у меня уже набралось больше 40 ссылок на материалы и библиотеки.
Читать полностью »

Полгода назад за чашечкой кофе программист, режиссер и геймдизайнер вели дружескую беседу на тему того, что кинематограф становится скучным. «Да, спецэффекты становятся круче, количество D становится больше, но этим сейчас малого кого можно удивить. Людей цепляет сюжет. А теперь представьте, что когда-нибудь мы будем смотреть смотреть фильмы, которыми можно управлять?»
— Я бы убил Джона Коннора.
— А я бы не выбросил бузинную палочку и стал плохим волшебником.
— А я бы на месте Поттера воспользовался маховиком времени, чтобы спасти его родителей, а не клювокрыла.

Интерактивное видео и с чем его едят - 1

И, как говорится, понеслось…

На прошлой неделе мы спросили Хабражителей интересно ли узнать о технических аспектах создания игры. Сейчас мы готовы представить плоды нашей работы и рассказать с какими трудностями столкнулись, как с ними боролись и какие результаты получили.
Читать полностью »

На этот раз я хочу поделиться с вами полезными и удобными бесплатными сервисами, которые помогут вам создать и разослать эффектную маркетинговую рассылку. Как создать валидное email-письмо? Как узнать примерную вероятность попадания письма в спам? Добро пожаловать под кат!
Читать полностью »

REM vs EM – Великий спор - 1

Представляю вашему вниманию перевод достаточно большой и объемной статьи по поводу вечного спора, какие же единицы измерения использовать при верстке: em'ы или rem'ы. В каких случаях стоит использовать одни единицы, а в каких другие. Вас ожидает много кода, примеров и их объяснений.

Добро пожаловать в мир типографики и относительных единиц измерения =)
Читать полностью »

Наверняка многие задумываются над тем, чтобы попробовать продавать свои шаблоны на известном маркетплейсе Envato.com, а некоторые уже успешно этим занимаются. В данной статье я хочу поделиться своим опытом разработки и продажи шаблонов на Themeforest.net

Информации в сети о заветном маркетплейсе Envato.com достаточно много, но детально расписанный процесс подготовки проектов попадается очень редко. Я сам не раз обращался к успешным авторам, продающим на Themeforest.net, за советом и помощью. Благо есть люди готовые помочь безвозмездно. Я надеюсь, моя статья также будет полезна начинающим авторам или тем, кто собирается стать автором. Ну или, по крайней мере, прольет немного света на темопроизводство.
Тернистый путь к продажам на Themeforest.net - 1

Как все начиналось

Как я рассказывал в своих предыдущих публикациях, уже несколько лет моя небольшая студия занимается диджитал продакшеном: разработкой web сайтов и мобильных приложений. А разработкой шаблонов мы занялись по рекомендации моего товарища. Однажды он сказал, что это отличный дополнительный заработок для небольшой студии, и, мол, усилий требуется совсем немного для этого. Идея иметь дополнительный заработок, используя ресурс студии, который не загружен по текущим проектам, мне понравилась. Но тогда я еще даже не представлял какое количество времени мы потратим до того момента, как в продаже на Themeforest.net появится наш первый шаблон. Нам для старта продаж понадобилось более полутора лет. Однако, это случай частный и не стоит на него ориентироваться. Я знаю примеры и более стремительного успеха. Но хочу более детально рассказать, почему мы так долго к этому шли и с какими трудностями столкнулись в процессе.Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js