О PhoneGap и его аналогах, таких как Appcelerator (Titanium Mobile), MotherApp, NimbleKit уже существует достаточно большое количество статей. Основная цель данных фреймворков заключается в предоставлении разработчику возможности создавать приложения для мобильных устройств только с использованием HTML, CSS и JavaScript.
Читать полностью »
Рубрика «css3» - 23
Некоторые аспекты использования PhoneGap
2012-04-05 в 7:43, admin, рубрики: android development, Android sdk, css3, html5, javascript, phonegap, Веб-разработка, Песочница, Разработка под android, метки: android development, Android sdk, css3, html5, javascript, phonegapОшибка в большинстве браузеров
2012-04-02 в 14:46, admin, рубрики: css3, Firefox, Google Chrome, ie9, opera, opera next, Веб-разработка, метки: css3, firefox, Google Chrome, ie9, opera nextПредыстория :
Как то неожиданно появился заказ на создание интересного эффекта на сайте. Работа вроде и простая но и в одно время требовала немного подумать. Сам я занимаю уже 3 года версткой. И ничего подобного не делал. Оценил разработку и согласился. Но тут меня ждали подводные камни и ошибка которую я обнаружил в 1 варианте затрагивает браузеры Opera Next (12.00 alpha b.1351) и IE 9 (10й не тестировал). Что же касается Google Chrome 19 (dev) и Mozilla FF 11 (release) — тут все в порядке. Во 2 варианте сдался и Chrome.
Переводим в код 5 действительно полезных шаблонов адаптивной разметки
2012-04-02 в 3:15, admin, рубрики: css, css3, media queries, responsive design, адаптивная разметка, веб-дизайн, Веб-разработка, метки: css3, media queries, responsive design, адаптивная разметкаПриветствую всех.
Недавно наш хабраколлега опубликовал интересную статью об адаптивной разметке.
Уже не далеко то время, когда мы будем уделять верстке под все разрешения намного больше внимания, нежели делаем это сейчас. Посему считаю нужным подходить к этому периоду подкованным в данном вопросе, ну или хотя бы иметь четкое представление, что это такое и с чем его едят. Запасаемся смартфонами и таблетками.
Читать полностью »
Несколько примеров применения Responsive Web Design, или Ваш сайт может и должен быть резиновым
2012-03-29 в 12:33, admin, рубрики: css, css3, html5, responsive web design, адаптивный дизайн, веб-дизайн, Веб-разработка, метки: css3, html5, responsive web design, адаптивный дизайнДоброго времени суток!
Несколько дней назад, гуляя по интернету, я наткнулся на достаточно интересную подборку сайтов, которые следуют, если можно так сказать, практике под названием Responsive Web Design. В двух словах, эта практика подуразумевает создание «резинового» сайта, который будет тянуться в зависимости от размера окна вашего браузера, или же экрана вашего мобильного телефона. Итак, встречайте наших сегодняшних героев!
Читать полностью »
Адаптивная навигация: куда деть меню
2012-03-28 в 8:12, admin, рубрики: css, css3, media queries, responsive web design, Веб-разработка, метки: css3, media queries, responsive web design 
Адаптировать свой сайт под мобильные устройства уже пытаются очень многие. Используют новые возможности CSS3 и на простых сайтах и на куда более сложных. В процессе возникают некоторые сложности, причем одной из важнейших является поведение меню сайта при просмотре на маленьких экранах. Решают данную проблему, как выяснилось, несколькими способами. Для меня же данная задача недавно стала особенно актуальной, поэтому я слежу за материалами в сети, касающимися адаптивного дизайна. И недавно я наткнулся на хороший анализ существующих паттернов адаптивной навигации.
Так как я имею отношение к адаптивному HTML5-шаблону Simpliste, то решил все существующие возможности работы с навигацией испробовать на практике. Но кроме получения собственного опыта, мне удалось создать несколько наглядных примеров, доступных для использования любым желающим, а также подготовить описание процесса, познакомиться с которым будет однозначно полезно.
Читать полностью »
Форма входа и регистрации с помощью HTML5 и CSS3
2012-03-27 в 18:05, admin, рубрики: css, css3, html, html5, веб-дизайн 
Здравствуй, дорогой хабрадруг! В этом туториале мы научимся создавать две формы HTML5: форма входа и форма регистрации. Эти формы будут меняться друг с другом местами с помощью псевдо-класса CSS3 :target. Мы будем использовать CSS3 и шрифт с иконками. Идея этого демо в том, чтобы показать пользователю форму входа и предоставить ему ссылку “перехода” к форме регистрации.
В этом туториале я подробно расскажу о том, как создавать эффект как в Демо 1.
Читать полностью »
CSS3 градиент для границ блока
2012-03-26 в 19:59, admin, рубрики: css, css3, linear-gradient, веб-дизайн, метки: css3, linear-gradient 
В этой статье я покажу один из вариантов создания градиента для границ у любого блока с помощью CSS3.
Читать полностью »
Введение в CSS3 Grid Layout. Работаем с сетками
2012-03-26 в 10:45, admin, рубрики: css, css3, internet explorer 10, Windows 8, Блог компании Microsoft, веб-дизайн, верстка, метки: css3, internet explorer 10, Windows 8, версткаВведение
Модуль CSS3 Grid Layout — это один из самых интересных, на мой взгляд, модулей в семействе CSS3. Официальная история модуля в виде черновика спецификации насчитывает сегодня чуть менее года. О предварительном анонсе еще с названием CSS Grid Alignment на TPAC 2010 Владимир Юнев писал еще в декабре 2010. Надо также отметить, что с чуть другим названием и несколько отличным синтаксимом, но с той же сутью, он был заявлен в качестве WD еще в 2007г. Сегодня работы по доводке модуля идут полным ходом, предварительная реализация уже есть в Internet Explorer 10 и есть надежда, что поддержка новых возможностей также появится в будущих версиях других популярных браузеров.
Зачем нужен Grid Layout?
Задача, которую решает модель CSS3 Grid Layout очень проста и понятна любому веб-верстальщику (да и не только ему): предоставить удобный механизм расположения контента по виртуальной сетке.
В отличие от старых табличных подходов, основанных на использовании table, здесь не замусоривается семантика документа и представление четко отделено от содержания. В отличие от различных вариаций блочной верстки со становящимися при сколь-нибудь сложной структуре безумными и многоэтажными float'ами в сочетании с вручную просчитанными отступами, здесь описание стилей становится тривиально простым и прозрачным. В отличии от абсолютного позиционирования с привязкой к координатам, здесь сохраняется гибкость. В отличие от популярных сегодня css/js — библиотек для разметки по сетке путем указания соответствующих классов (взять хоть те же bootstrap или yui css grids), здесь не замусоривается привязка классов.
Сплошное удовольствие! Осталось только дождаться широкой поддерки :) Впрочем, если вы планируете делать приложения в стиле Metro для Windows 8 на html/js, ключевые возможности, описываемые в модуле CSS3 Grid Layout, уже работают — и можно двигаться вперед, используя удобные и практичные механизмы.
Читать полностью »
Креативные сайты с нестандартными элементами
2012-03-25 в 22:05, admin, рубрики: css3, веб-дизайн, параллакс, сайты, тренды, метки: css3, веб-дизайн, параллакс, сайты, трендыПоследнее время все чаще можно встретить сайты с необычным дизайном и функциональностью, увидев которые, можно залипнуть на некоторое время. Увидев такие, у меня рука непроизвольно тянется к f12, чтобы открыть firebug и посмотреть, как же реализован тот или иной компонент. Таким образом можно открыть для себя интересные техники и в будущем реализовать их на своих проектах. Некоторые из них стали доступны с приходом новых технологий, например таких, как CSS 3 — то, что раньше было реализовано на флеше, теперь можно воплотить с помощью строк кода в таблице стилей. Дизайнеры тоже не теряют времени, создавая новые тренды и все плотнее взаимодействуя с верстальщиками. В этой статье я хотел бы показать 15 сайтов, которые так или иначе удивили и порадовали меня. Возможно, кого-то они вдохновят на собственный шедевр
Flipboard-анимация средствами CSS3 и JavaScript
2012-03-22 в 16:58, admin, рубрики: animation, css3, flipboard, javascript, Веб-разработка, Песочница, метки: animation, css3, flipboard, javascriptДобрый день. Наверняка многие видели приложение для iOS под названием Flipboard. При всех его достоинствах, лично меня оно в первую очередь порадовало своими забавными анимациями перелистывания. Родилась идея реализовать нечто подобное для своего сайта исключительно на Javascript и CSS3.
В данном случае я использовал CSS3 свойство transform: rotate3d(...), которое требует поддержки аппаратного ускорения графики и адекватно работает только в Chrome 16+, поэтому все нужyые свойства я ограничил префиксами -webkit-. В продакшене для пользователей с неподходящим параметрами я заменял анимацию на более простую.
Вот так выглядит готовый результат: