Верстка \ HTML&CSS

Ленточный баннер на чистом CSS

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

Продолжить чтение

Верстка \ Адаптивная верстка

Несколько советов по разметке и отзывчивости email-писем

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

Продолжить чтение

Верстка \ Адаптивная верстка

Framework-и для адаптивного дизайна

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

Продолжить чтение

Верстка \ HTML&CSS

Создание панорам и прокрутка фона с использованием элемента canvas

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

Продолжить чтение

Верстка \ HTML5

Новые атрибуты гиперссылок HTML5

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

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

Продолжить чтение

Верстка \ Адаптивная верстка

5 мощных техник адаптивного веб-дизайна

От автора: При увеличении количества устройств, применяемых для доступа в интернет (компьютеры, планшеты, смартфоны…), вам приходится гарантировать, что ваш веб-сайт будет смотреться хорошо в каждом из возможных устройств. В этой статье я собрал пять техник, суперполезных для отличного, более адаптивного сайта или веб-приложения.

Продолжить чтение

Верстка \ HTML5

Как пользоваться секционными элементами HTML5

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

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

Продолжить чтение

Верстка \ HTML&CSS

Эффект анимации рамки с помощью SVG и CSS

От автора: Веб-сайт Карла Филипа Бреннена (Carl Philipe Brenner) отличается очень креативной и изящной анимацией, и сегодня мы собираемся разобраться, как воссоздать эффект анимации рамки, применив к линиям SVG переходы CSS.

Сегодня мы хотели бы разобраться в очень тонком, но интересном эффекте анимации рамки, которую можно видеть на креативном вебсайте Карла Филипа Бреннера (Carl Philipe Brenner). При проведении мышью над одним из белых элементов сетки портфолио вы увидите изящную анимацию: элемент сетки становится прозрачным, а линии рамки с каждой стороны начинают анимацию по часовой стрелке, создавая действительно красивый эффект. В данном случае он получается путем анимации ширины или высоты нескольких тегов span с помощью JS. Мы опробуем другой подход, применяющий SVG и переходы CSS. Пожалуйста, помните, что эта техника очень экспериментальна.

Продолжить чтение

Верстка \ HTML&CSS

Оптимизируйте передачу CSS

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

Неважно, каким образом он установлен на страницах – CSS обязан помочь отображаться странице быстрее, а не тормозить отрисовку страницы.

Продолжить чтение

Верстка \ HTML&CSS

Галерея для сайта

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

В цикле из нескольких уроков мы с вами будем создавать несложную, но вместе с тем привлекательную галерею.

Продолжить чтение