Наверняка все, кто занимается html-версткой, сталкивались с векторными изображениями в формате svg.

Вообще SVG (Scalable Vector Graphic) - это язык для описания двумерной графики в XML. Он включает в себя три типа объектов: фигуры, изображения и текст. Как видно из названия, одним из главных преимуществ данного формата является возможность его масштабировать без потери качества, а следовательно для svg нет необходимости даже задумываться о retina-адаптации - векторные изображения будут четкими вне зависиморсти от плотности пикселей экрана.

Демо Скачать

Cейчас все больше вычислений стараются производить на стороне клиента, чтобы сократить нагрузку на сервер и увеличить производительность веб-приложения в целом. Я уже писал о сжатии изображений на стороне клиента, до его отправки на сервер; сегодня же речь пойдет о кадрировании изображения (инструмент crop) средствами HTML5 canvas.

Демо Скачать

Продолжая серию статей "для начинающих", хочу рассказать про верстку модальных окон.

На всякий случай поясню, что под модальными (popup) окнами понимаются слои, которыенакладываются на все остальные и требуют какого-либо действия от пользователя - что-то ввести, что-то подтвердить или отклонить и т.д. Тоесть функционально это либо "отдельное окно" внутри основного окна или alert\confirm окно.

На первый взгляд, что может быть проще - блок с фиксированный позиционированием и все. Но здесь есть свои нюансы, о которых и пойдет речь.

Демо Скачать

С начала этого года потихоньку продолжил работу над одним старым проектом. Планируется весьма масштабные изменения, как с точки зрения функционала, так и визуализации.
Чтобы обеспечить приятный внешний вид выводимых изображений на страницах, нужно было реализовать сетку, где изображения выровнены по высоте и строки были бы выровнены по краям.

Идея алгоритма была позаимствована у Алексей @Squier и его статьи "Красивый вывод изображений".

На мой взгляд, решение данной задачи на стороне сервера не совсем правильно, особенно если речь идет о современном адаптивном сайте.

Поэтому для решения этой задачи напсал небольшой плагин для jQuery.

Демо1 Демо2 Скачать

Новый год в России всегда празднуется с особым размахом. Именно в предновогодние дни мы вспоминает про друзей, коллег и просто знакомых, с кем уже очень давно не общались (наверное, с прошлого НГ ).

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

А мы с командой Emailmatrix работали над новогодним проектом для Райффайзен банка, о котором я немного здесь и расскажу.