От автора: мы уже писали статьи на тему шаблона Priority+. По ссылке вы найдете кучу рабочих примеров. Если бы он попался мне раньше, однако совсем недавно я наткнулся на приоритетное меню от Gijs Rogé. Его способ довольно-таки неплох: полностью независим, чистый код, много настроек и легко изменить дизайн. Такие показатели уже сами по себе не мало, но кроме того там же еще и множество вспомогательных функций. В общем, я решил улучшить его версию.

Читать далее →

От автора: Gulp – инструментарий, облегчающий жизнь веб-разработчика, с его помощью можно задавать различные задачи. Часто используется для таких front-end задач как: поднятие сервера, автоматическое обновление страницы браузера в любой момент сохранения файла, использование препроцессоров как Sass или LESS, оптимизация CSS, JavaScript и изображений.

Читать далее →

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

Читать далее →

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

Читать далее →

От автора: еще пару лет назад разработчики уже могли создавать множество проектов с помощью одного лишь CSS без применения JavaScript. Но сегодня CSS настолько окреп, что можно писать поистине удивительные вещи без единой строки JavaScripta’а. Скорее всего вы уже читали статьи на тему «способы на чистом CSS», в которых демонстрируется мощь каскадных таблиц стилей.

Читать далее →

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

Читать далее →

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

Читать далее →

От автора: с помощью анимации CSS, SVG dash-array и режимов наложения мы можем создать эффект, как на лотерейных карточках всего за 5 шагов. «Потри поле, чтобы увидеть изображение».

Читать далее →

От автора: недавно я работал с сайтом, CMS которого имела слегка неполный функционал. JavaScript был отключен, и я мог добавлять только свой HTML и CSS код. Дизайн, над которым я работал, включал в себя карусель. У меня было пару идей, как написать ее, используя CSS-анимации и свойство transform.

Читать далее →

От автора: начать данную статью я должен с признания: очень долгое время я не мог никак понять, как работают w дескриптор в адаптивных HTML5 изображениях, а также работу атрибута sizes. Принцип использования тега picture и изменение разрешения картинки с помощью srcset и x дескриптора были ясны, но когда все это стало намного сложнее, с приходом запятой-разделителя в синтаксис, а также появление атрибута sizes и w все стало очень запутанно. Статьи на эту тему и спецификации только усугубляли все: для чего это было все создано, и почему я хочу их применять?

Читать далее →