Как создать «переворачивающуюся» карточку в email-рассылке

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

Эта продвинутая CSS-анимация поддерживается преимущественно в Apple Mail, поэтому мы предусмотрели версию, которая работает в других почтовых клиентах с ограниченной поддержкой анимации, а также фоллбэки (резервные варианты) для случаев, когда CSS-анимация не поддерживается вовсе.

Итак, как мы это сделали? Рад, что вы спросили.

## Создание анимации

Мы начинаем с разработки самой продвинутой версии: «переворачивающейся» карточки (flip card). Создать такую карточку для веба относительно просто, это не требует сложной анимации. Но, конечно, это email, поэтому нам пришлось внести несколько интересных правок, чтобы заставить её работать, так как поддерживается далеко не всё.

Сначала создаем контейнеры для лицевой и обратной стороны карточки:

В контейнеры можно поместить что угодно, но, поскольку мы работаем с email, я рекомендую использовать изображения, а не текст или CSS. Убедитесь, что у этих изображений есть атрибут alt, *особенно* если на них есть текст. Для обратной стороны карточки убедитесь, что изображение перевернуто. Поскольку мы будем вращать его, чтобы оно встало правильно, нам нужно начать с зеркального отображения.

Затем мы оборачиваем всё это в условные комментарии (conditional code), чтобы скрыть от Outlook, и помещаем в ячейку таблицы с классом «interactive».

Теперь, когда у нас есть карточки, давайте убедимся, что они расположены правильно — то есть одна над другой, с невидимой обратной стороной.

Нам нужно задать размеры карточек через width и height, соответствующие размерам изображений. Применяем это к внешнему