Задать вопрос
@nwtoneseo

Как сделать тени в письме?

Нужно сделать тени для блоков в email вёрстке, который будут работать на всех почтовых клиентах, включая адаптивные версии, важно учитывать что необходимо иметь одинаковую тень со всех 4 сторон.

Код тени:

box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.10);

Пример блока:

65e5e46baa61d409941185.jpeg
  • Вопрос задан
  • 311 просмотров
Подписаться 1 Простой Комментировать
Решения вопроса 1
dudeonthehorse
@dudeonthehorse
Email Developer
Объясни заказчику, что реализовать это везде не получится.

Мотивация:
- Тени работают не во всех почтовых движках рендеринга
- Рисовать тени картинками ненадежно, так как письмо станет очень чувствительным к контенту и рассыпется при малейшем чихе

Самое элегантное решение:
- Реализовать тень через box-shadow
- Прописать border 1px solid таким цветом, чтобы он сливался с css-тенью. Таким образом там, где css свойство box-shadow не поддерживается, останется аккуратная рамка вместо пустого белого фона.

Этот принцип называется graceful degradation. Мы нежно сглаживаем проблемы там, где отсутствует современная поддержка.
Ответ написан
Пригласить эксперта
Ответы на вопрос 4
@EvgeniyOne
junior full-stack develop
селектор {
box-shadow: inset сдвиг_по_x сдвиг_по_y размытие размер_тени цвет;
}
Ответ написан
Комментировать
saboteur_kiev
@saboteur_kiev
software engineer
Нет, нельзя так сделать чтобы во всех клиентах.

Не определены стандарты html для всех почтовых клиентов, поэтому общий признанный стандарт - пользоваться как можно меньшим количеством тегов и аттрибутов. Вместо блоков только таблица, и ту клиент может взять и урезать по собственному мнению.
В гмайле будет одно, в ms outlook другое, в thebat третье, в яндексе четвертое.
Ответ написан
Комментировать
CityCat4
@CityCat4
//COPY01 EXEC PGM=IEBGENER
Нужно сделать тени для блоков в email вёрстке, который будут работать на всех почтовых клиентах

Задача не имеет решения. Поступившее мне письмо я имею полное право пропустить через фильтр, который "обдерет" с него весь html, оставит только голый текст. Многие корпоративные почтовики именно так и делают.
Почту читают гораздо большим числом способов, чем браузерный клиент.
Ответ написан
Комментировать
"На всех почтовых клиентах" не получится. MS Outlook и браузерная Яндекс-Почта не поддерживают box-shadow и тени там при крайней необходимости можно делать только через полупрозрачные пнг-изображения.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы