От автора: Некоторые элементы HTML не очень хорошо сочетаются с адаптивными разметками. Один из них – старый добрый iframe, который может понадобиться при вставке содержимого из внешних источников, таких как YouTube.

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

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

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

Градиенты обычно состоят из одного цвета, переходящего в другой, но в CSS можно контролировать каждый аспект этого процесса, от его направления до цветов (сколько угодно много) до того, где будет происходить изменение этих цветов. Давайте все из них рассмотрим.

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

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

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

От автора: В текущую реализацию Webkit’ом спецификации CSS Shapes мы добавили поддержку shape-outside с помощью изображения как значения. В данном случае вместо определения формы с помощью функции basic-shape форма высчитывается из альфа-канала изображения с порогом непрозрачности, конфигурируемым с помощью shape-image-threshold. Применив изображение с прозрачным фоном, можно использовать CSS Shapes для заливки текста вокруг определенной им произвольной формы.

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

От автора: Практически каждый HTML элемент, который мы создаем, представляется нам в горизонтальной форме. Мы придаем гораздо большее значение ширине, чем высоте, особенно если дело касается текста внутри. Иногда нам, тем не менее, нужно расположить текст вертикально. В старые времена недоработанных версий Internet Explorer, это было практически невыполнимо. Однако, в нынешние времена – это легкая работа. Вот как это можно сделать.

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

От автора: Время от времени я ставлю себе задачи по разработке, которые могут быть не вполне реалистичными, для того, чтобы увидеть смогу ли я их выполнить. Это помогает мне расти как разработчику, по двум причинам – мне нужно проявлять творческий подход и потому, что это, как правило, требует каких-то исследований. Сегодня задача стоит: создать ленточный баннер на чистом css и html. Никаких картинок.

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

От автора: Электронная почта может быть одним из самых мощных средств коммуникации с вашими пользователями и может послужить множеству целей. Вы можете использовать ее как способ привлечь внимание к выбранному контенту (ежемесячные/еженедельные рассылки, «обзор событий года» и т.д.), оказать услугу пользователям (аналитическая разбивка посещений страницы профиля/избранного), или поддержать связь с пользователями (анонсирование нового функционала). Здесь в Artsy, мы используем все эти виды email-рассылок и заметили, что они являются важным ресурсом. Однако, лучшие методики разметки шаблонов и использования CSS (помня о разнообразии устройств и размеров экранов ваших пользователей) очень отличаются и очень сильно отстают от нынешних стандартов HTML5 и методик создания красивых веб-страниц. В этой статье мне хотелось бы представить несколько техник, которые я успешно использовал в Artsy для создания email-шаблонов, которые будут хорошо выглядеть в вашем браузере или на мобильном устройстве, а также в нескольких самых популярных почтовых клиентах.

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

От автора: Адаптивный дизайн – это построение вебсайта с разметкой на базе сетки, масштабируемыми изображениями и медиазапросами, как его описывает Итан Маркотт (Ethan Marcotte). После того, как он дал определение этой технике, начали появляться framework-и адаптивного дизайна, объединяющие эти принципы. Основанные по большей части на CSS и JavaScript’е, многие из них с открытым кодом, их можно бесплатно скачать и легко модифицировать под себя.

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

От автора: Я собираюсь создать простую 2D игру на чистом JavaScript. Для первого шага я хочу показать, как анимировать (панорамировать или прокручивать) фоновое изображение, используя элемент canvas. Я также собираюсь показать основной код, необходимый для создания цикла, в котором мы сможем прорисовывать кадры.

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

От автора: Гиперссылки существуют с самого зарождения Сети. А в начале эры HTML5 к скромному тэгу a добавились три новых атрибута поддержки уже существующих атрибутов вроде href, rel и прочих за компанию.

Эти новые атрибуты: download, media и ping. В данной статье мы вкратце разберемся в том, что эти атрибуты из себя представляют, и как по мере улучшения браузерной поддержки можно будет ими пользоваться.

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